Jak uzyskać 100 punktów w GTMetrix (PS i YSlow)

GTMetrix to popularne wśród twórców stron narzędzie do analizowania szybkości wczytywania się stron, sklepów i aplikacji internetowych. Choć funkcjonalność GTMetrix może przypominać słynny PageSpeed Insights, po ostatniej PSI zakres jego audytu jest nieco węższy.

GTMetrix sprawdza tzw. dobre praktyki front-endowe. Nie bada natomiast procesu renderowania, widoczności fontów oraz wykorzystywania innych technik optymalizacyjnych (takich jak np. Lazy Load czy kodowanie obrazów w formatach nowej generacji).

Sprawdź najnowsze wymogi uzyskania 100 punktów w PageSpeed Insights.

Choć uzyskanie 100 punktów w GTMetrix jest stosunkowo łatwiejsze niż we wspomnianym narzędziu twórców wyszukiwarki, nie należy całkiem go pomijać – zwraca on bowiem uwagę na niektóre sprawdzone i skuteczne działania optymalizacyjne, które PSI pomija a tymi technikami są:

• użycie „bezciasteczkowych” domen (ang. cookie-free domain),
• wykorzystanie CDN (Content Delivery Network),
• minimalizacji ilości zapytań HTTP.

Działanie GTMetrix bazuje na wytycznych PageSpeed (twórców wyszukiwarki Google), oraz zasadach YSlow (które zdefiniowali twórcy wyszukiwarki Yahoo). Jeżeli posiadamy wynik bliski 100/100 w PSI to z pewnością pierwszy wynik jest bliski 100 a drugi wynik (YSlow) w najgorszym przypadku jest bliski 85 – 90/100. Aby mówiąc kolokwialnie „zamknąć licznik” w YSlow należy wdrożyć wspomniane poprawki.

Domena nie wykorzystująca cookies

Domenę nie wykorzystującą cookies możemy mieć domyślnie jeżeli posiadamy hosting VPS lub dedykowany. Wykorzystując najtańszy hosting współdzielony tak naprawdę korzystamy z jednego hostingu obsługującego wiele domen. Dostawca hostingu wykorzystuje własną analitykę i monitorowanie, która najczęściej przy każdym żądaniu HTTP wysyła cookie.

Przykładowo w hostingu z gamy Perso / Pro i Performance w OVH ciasteczkiem tym mogą być „000planBAK”, „000planD” lub „SERVERID00000” itd.

Ciasteczek tych nie da się wyłączyć. Jedynym rozsądnym rozwiązaniem jest wykupienie serwera plików lub wysłania plików statycznych do chmurowej usługi typu Amazon S3 (Simple Storage Service).

O tym jak założyć konto, korzystać i zintegrować aplikację PHP z usługą S3 napisałem osobny artykuł: Integracja PHP z Amazon S3

Przeniesienie plików ze zdjęciami, skryptami i stylami na osobny serwer wiąże się z kilkoma korzyściami. Po pierwsze, jest to przykład partycjonowania funkcjonalnego, dzięki czemu odciążymy dotychczasowy serwer HTTP (który zazwyczaj już jest odpowiedzialny za zbyt wiele rzeczy na raz). Po drugie, pozbędziemy się ograniczenia dostępnej przestrzeni dyskowej ponieważ usługa poza coraz wyższym cennikiem praktycznie nie nakłada limitu wykorzystywanej powierzchni. Usługę S3 wykorzystuje wiele popularnych serwisów, między innymi serwis Netflix oraz Airbnb.

Wdrażanie systemu dystrybucji treści (CDN)

Rozproszona dystrybucja treści (ang. Content Delivery Network) w skrócie: CDN to rozproszona sieć serwerów reverse proxy, której celem jest dostarczanie treści internetowych szybciej i wydajniej. Usługodawcy CDN dysponują wieloma węzłami takiej sieci, które są w stanie dostarczać treści pobrane z serwerów źródłowych w dużo bardziej efektywny sposób. Optymalizacja połączenia polega najczęściej

• na wyborze najmniej obciążonego w danym momencie węzła,
• serwera znajdującego się w najkrótszej odległości geograficznej od użytkownika końcowego,
• wyborze takiej trasy połączenia aby miała najmniejszą liczbę przeskoków. Zobacz test i czytaj więcej o CDN

Korzyścią stosowania sieci CDN jest zmniejszenie kosztów transferu danych i tym samym przyspieszenie działania aplikacji a także odciążenie serwerów utrzymujących pliki. Tak samo jak w przypadku prostego serwera plików, poprzez sieć CDN można dystrybuować pliki do pobrania lub inne obiekty, które stosunkowo rzadko ulegają modyfikacji np. zdjęcia, pliki ze stylami CSS czy skrypty JavaScript. Jest to warstwa oddzielająca właściwy serwer plików lub serwer HTTP od użytkownika końcowego. Usługę CDN oferuje wielu operatorów, czołowymi obecnie dostawcami są: Cloudflare, Amazon (usługa CloudFront), MaxCDN, proinity LLC (usługa KeyCDN).

O tym jak uruchomić CloudFront w swojej stronie lub aplikacji pisałem tutaj: CloudFront z własną domeną i SSL. Jest to prawdopodobnie najtańsza opcja z węzłami w Polsce a jej wdrożenie jest przyjaźniejsze dla SEO (nie trzeba edytować DNS).

Minimalizacja ilości zapytań HTTP

Minimalizacja ilości zapytań HTTP jest bardzo korzystna w przypadku stosowania ciągle powszechnego standardu HTTP/1. Minimalizacja zapytań HTTP może polegać na:

• wklejanie małych skryptów w ciało strony,
• scalaniu plików CSS w jeden plik zbiorczy,
• scalaniu plików JS w pliki zbiorcze
• dywersyfikowaniu skryptów JS pomiędzy poszczególnymi podstronami.

O tym kiedy scalać (czyli łączyć) pliki JS CSS a kiedy je wklejać je w ciało dokumentu HTML napisałem osobny artykuł: Optymalizacja plików CSS i JS w kodzie HTML.

Pozostałe wymagania

Jawiadomo GTMetrix wymaga także innych działań optymalizacyjnych, które już poznaliśmy.

W przypadku wyniku PageSpeed:

• serwowanie dokładnie przeskalowanych zdjęć,
• minimalizację i odłożenie wczytywania JavaScripu,
• minimalizacja HTML,
• określanie rozmiaru zdjęć za pomocą atrybutu width i height,
• optymalizacja grafik zapisując ją w poprawnym formacie i silne kompresji,
• unikanie przekierowań i błędów 404,
• wykorzystywanie pamięci podręcznej przeglądarki (Expires / CacheControl),
• wklejanie CSS do do sekcji head,
• używania spójnego URL (zawsze z WWW lub zawsze bez WWW),
• używania spójnego protokołu zawsze HTTP lub zawsze HTTPS,
• unikania instrukcji @import w CSS,

W przypadku drugiego wyniku YSlow:

• minimalizacja ilości zapytań HTTP (poruszana powyżej),
• wykorzystywanie nagłówków Expires (lub CacheControl),
• kompresja za pomocą GZIP,
• użycie CDN (opisywnae powyżej),
• minimalizacja (minifikacja) JavaScript i CSS,
• Usunięcie nadmiarowego CSS i zduplikowanego JS,
• Zmniejszenie ilości elementów DOM,
• użycie domeny bezciasteczkowej do serwowania statycznych plików (opisywane powyżej),
• używanie GET zamiast POST w zapytaniach AJAXowych, kiedy to możliwe,
• unikanie zapytań DNS w ramach jednej witryny (ewentualnie wykorzystanie DNS prefetch),
• wydzielić kod JavaScript i CSS do osobnych plików (np. bibliotekę bootstrap)

Podsumowanie

Wysoki wynik w GTMetrix to kolejna przesłanka aby móc sądzić, że z naszą stroną jest wszystko w porządku i nie w niej wąskich gardeł powodujących powolne działanie. Strona która działa szybko ułatwia wyszukiwarkom indeksację i przynosi komfort użytkownikom.

Można się spierać czy sklep powinien mieć takie czy inne funkcje, można się spierać co do tego jak ma wyglądać, ale nie można zaprzeczyć, że nawet najmniejsze przyspieszenie sklepu, aplikacji czy portalu będzie w dłuższej perspektywie zawsze korzystne – dla wszystkich (oprócz naszej konkurencji).