Czym testować?
Narzędzie do testowania via www: https://developers.google.com/speed/pagespeed/insightsDodatki do przeglądarek - https://developers.google.com/speed/pagespeed/insights_extensions
- Mozilla Firefox [dodatek do dodatku, czyli do firebug
- Google Chrome
Dlaczego warto optymalizować stronę?
- zastosowanie się do rad pozwala zmniejszyć wagę strony, a dzięki temu skrócić czas oczekiwania użytkownika [jak i robotów sieciowych] na otrzymanie treści
- wynikające z w/w punktu lepsze i częstsze indeksowanie strony przez roboty Google, które szybciej indeksują lżejsze strony
- zmniejszenie zapytań do serwera, dzięki czemu zmniejszamy jego obciążenie -szczególnie istotnie w przypadku dużych, często odwiedzanych stron, gdzie każdy request ma znaczenie
- dodatkowo mniejsza waga ułatwia poruszanie się po stronie użytkownikom smartphontów/tabletów, oraz innych osób które korzystają z dobrodziejstw limitowanego internetu
Dobre rady Wujka Google
Wykorzystaj pamięć podręczną przeglądarki
Wystarczy wrzucić do pliku .htaccess poniższe dyrektywy (w zależności od uruchomionych modułów w Apatche, zostanie wybrany odpowiedni), co wymusi na przeglądarce cachowanie elementów strony [https://developers.google.com/speed/docs/best-practices/caching?hl=pl#LeverageBrowserCaching]<IfModule mod_expires.c>
#Header set cache-control: public
ExpiresActive on
ExpiresDefault "access plus 1 weeks"
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpg "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType text/javascript "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"
ExpiresByType video/ogg "access plus 1 months"
ExpiresByType audio/ogg "access plus 1 months"
ExpiresByType video/mp4 "access plus 1 months"
ExpiresByType image/x-icon "access plus 1 years"
ExpiresByType font/ttf "access plus 1 years"
ExpiresByType image/svg+xml "access plus 1 years"
</IfModule>
Włącz kompresję
Dzięki kompresji gzip, waga plików które są wysyłane przez serwer do przeglądarki zostaje zmniejszona. Google zaleca jedna stosowanie kompresji dla plików o minimalnej wadze 150 - 1000 bajtów, ponieważ pliki o niższej wadze po kompresji mogą ważyć więcej niż przed nią. Ponadto odradza kompresowanie wszystkich obrazków oraz innych plików binarnych. Z doświadczenia mogę powiedzieć, że kompresowanie np. plików swf potrafi skutecznie zrobić je niedziałającymi.<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>
<IfModule mod_deflate.c> SetOutputFilter DEFLATE # Don’t compress SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.(?:mp3|swf)$ no-gzip dont-vary SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary #Dealing with proxy servers <IfModule mod_headers.c> Header append Vary User-Agent </IfModule></IfModule>
Włącz obrazy do sprite’ów CSS
Rzecz o której często (zawsze) się, zapomina, jednakże pozwala to na zmniejszenie ilości zapytań do serwera, a przez to szybsze ładowanie. Zamiast 11 plików, można byłoby spokojnie pokusić się o zrobienie 2 - 3. Jeden do pojedynczych graficzek, drugi dla elementów powtarzanych w pionie i ostatni dla elementów powtarzanych w poziomie. [https://developers.google.com/speed/docs/best-practices/rtt?hl=pl#SpriteImages]Zoptymalizuj obrazy
Jedna z najprostszych do wykonania czynności. Aby zoptymalizować pliki .png wystarczy użyć programu PNG Monster, który pozwala na bezstratne zmniejszenie wagi plików, w ekstremalnych przypadkach, nawet o 90% ich pierwotnej wagi. Pozostałe pliki w skompresowanej wersji "otrzymuje" się od pluginu PageSpeed w przeglądarce, wystarczy pobrać plik, usunąć hasha i podmienić.Umieść krótki kod JavaScript bezpośrednio w dokumencie
Nagłówek chyba mówi sam za siebie. Pliki *.js zawierające małe ilości kodu najlepiej umieszczać bezpośrednio w dokumencie, bądź...Połącz kilka plików javascript w jeden
Zmniejszy to znacząco ilość requestów, oraz znacząco przyspieszy ładowanie strony. Nie od dzisiaj wiadomo, że o wiele szybciej ściąga się [bądź wysyła] jeden plik o wadze 0,5 MB, niż 50 plików o łącznej wadze 0,5MB. W sieci można znaleźć sporo skryptów php łączących wiele plików js w jeden większy. [https://developers.google.com/speed/docs/best-practices/rtt?hl=pl#CombineExternalJS]Połącz kilka plików css
Powyższą zasadę powinno się również stosować do plików CSS. Warto również pamiętać, aby nie stosować @import do ładowanie CSS, ponieważ może to wywoływać niepotrzebne opóźnienia w przeglądarce.Zoptymalizuj kolejność stylów i skryptów
Pliki umieszczaj zawsze w następującej kolejności- pliki CSS z wewnętrznej domeny
- pliki CSS z zewnętrznej domeny
- pliki JS z wewnętrznej domeny
- pliki JS z zewnętrznej domeny
Określ wymiary obrazu
Jedna z najmniej odczuwanych optymalizacji, mówiąca o nadawaniu atrybutów wysokość/szerokość na wszystkie obrazy występujące na stronie. Głównie przyspiesza to [chociaż trzeba przyznać, że nieznacznie] renderowanie strony przez samą przeglądarkę.Zmniejsz JavaScript / Zmniejsz CSS / Zmniejsz HTML
Zdecydowałem się umieścić wszystkie porady w jednym akapicie, gdyż opierają się na tej samej zasadzie - zmniejszaj, zmniejszaj i jeszcze raz zmniejszaj. Jeśli tylko jest taka możliwość ściągamy wszelkie biblioteki i gotowe skrypty w wersji zminimalizowanej. Dodatkowo warto posiadać dwie wersje plików: "cięższą" - developerską, oraz "lżejszą" produkcyjną. Warto tylko pamiętać, że PageSpeed proponuje zmniejszenie plików JS i CSS kosztem komentarzy, które ze względów licencyjnych są wymagane w tych plikach. Dlatego też zmniejszajmy pliki z głową, aby nie usunąć czyjegoś podpisu pod pracą.Jest też kilka porad mówiących same za siebie
- Zastosuj przeskalowane obrazy
- Umieść pliki CSS w nagłówku strony
- Zminimalizuj przekierowania - dotyczy szczególnie przekierowań w htaccess
Na koniec jeszcze lista porad z którymi się jeszcze do końca nie zapoznałem, a które mam nadzieję uda mi się opisać w najbliższej przyszłości
- Określ zestaw znaków [https://developers.google.com/speed/docs/best-practices/rendering?hl=pl#SpecifyCharsetEarly]
- Wstrzymaj analizowanie kodu JavaScript [https://developers.google.com/speed/docs/best-practices/mobile?hl=pl#DeferParsingJS]
Jestem pod wrażeniem. Bardzo ciekawie napisany artykuł.
OdpowiedzUsuń