PageSpeed Insights cz. 2 - Poprawiamy błędy

Witam,

Z góry przepraszam, że tak długo czekaliście na ten wpis.
Od jakiegoś czasu wpisy pisałem sam. A przez ostatni czas byłem bez dostępu do komputera o czym Was poinformowałem na Fanpage.
Jednak teraz wszystko jest ok i czas zabrać się do roboty 🙂

Dzisiaj zajmiemy się kontynuacją mojego wcześniejszego wpisu. Czyli poprawimy część błędów wytkniętych nam przez PageSpeed Insights, które spowalniają naszą stronę.

Włącz kompresję

Chodzi tutaj o włączenie kompresji gzip, która spowoduje, że nasza strona stanie się lżejsza.

Jeśli wasz hosting korzysta z modułu Apache to w tym wypadku wystarczy do naszego .htaccess dodać następujący kod:

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Wykorzystaj pamięć podręczną przeglądarki

Tą sprawę pozwoli nam załatwić kolejny kod, który również musi się znaleźć w naszym .htaccess.

## EXPIRES CACHING ##

&lt;IfModule mod_expires.c&gt;
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
&lt;/IfModule&gt;

## EXPIRES CACHING ##

Nagłówki “expires” przykładowo “access 1 year” określają “datę ważności” danego pliku, znajdującego się w cache przeglądarki.

Jeżeli dany plik jest starszy niż data zawarta w nagłówku “expires” to ściągana jest nowsza wersja tego pliku z serwera.

Zoptymalizuj obrazy

Tutaj polecam skorzystać z narzędzia online, które dostępne jest pod tym adresem:

http://tools.dynamicdrive.com/imageoptimizer/

Następnie należy podmienić zoptymalizowane obrazy z tymi starymi.

Zmniejsz HTML, CSS, JavaScript

Tutaj jest już więcej zabawy. Mimo wszystko znajdziemy strony, które nam w tym pomogą

Na pierwszy ogień pójdzie kod CSS. Kopiujemy kod, który chcemy zoptymalizować i wklejamy go w okienko „Source„, które znajdziemy na tej stronie:

http://tools.w3clubs.com/cssmin/

Następnie, klikamy „crunch„, kopiujemy kod z okienka „Result” i podmieniamy z naszym starym kodem CSS.

Z kodem JavaScript postępujemy dokładnie tak samo korzystając z narzędzia dostępnego pod tym linkiem:

http://jscompress.com/

Kompresja kodu html wygląda tak samo jak w dwóch powyższych przypadkach. Jedyne co ją różni to inna strona do optymalizacji.

http://www.textfixer.com/html/compress-html-compression.php

UWAGA!

Pod naszym wynikiem PageSpeed możemy pobrać zoptymalizowane obrazy oraz kody CSS i JavaScript dla naszej strony, które zostały wygenerowane dla nas przez Google.

PageSpeed Insights cz. 2 – Poprawiamy błędy