Gtmetrix co to jest i jak działa?
GTMetrix jest niezwykle popularnym pośród twórców stron internetowych narzędziem, które może posłużyć do wykonania gruntownej analizy szybkości wczytywania się aplikacji internetowych, sklepów internetowych, jak i innych stron internetowych. Chociaż funkcjonalność GTMetrix może nam przypominać nieco słynne już testy szybkości na stronach, po ostatniej PSI zakres jego audytu jest zdecydowanie węższy.
GTMetrix zajmuje się sprawdzaniem tak zwanych dobrych praktyk front-endowych. Nie zajmuje się zaś procesami renderowania, widoczności fontów, jak i wykorzystaniem innego rodzaju technik służących do optymalizacji stron internetowych (takich jak chociażby kodowanie obrazu w formatach najnowszej generacji czy też Lazy Load).
GTmetrix wykręcamy 100/100
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 opiera się na wytycznych z Page speed (czyli twórców wyszukiwarki Google), jak i na zasadach YSlow (których zdefiniowaniem zajęli się twórcy wyszukiwarki Yahoo). Jeśli mamy wynik bliski 100/100 w PSI to na pewno pierwszy wynik będzie bliski 100, zaś drugi wynik (YSlow) w najgorszym wypadku będzie niedaleko 85-90/100. Aby mówiąc prosto zamknąć licznik w YSlow trzeba wdrożyć wyżej wspomniane poprawki.
Domenę, która nie wykorzystuje żadnych plików cookies możemy mieć niejako domyślnie, jeśli posiadamy hosting dedykowany albo VPS. Jeżeli wykorzystujemy najtańszy możliwy hosting współdzielony, tak naprawdę korzystamy wyłącznie z jednego hostingu, który obsługuje wiele różnych domen. Dostawca hostingu wykorzystuje własne monitorowanie, jak i analitykę, która na ogół przy każdym żądaniu HTTP wysyła różne pliki cookies.
Na przykład w hostingu z dany Performance , Pro i Perso w OVH ciasteczkiem takim mogą być SERVERID00000, 000planD albo 000planBAK.
Ciasteczek takich nie da się niestety wyłączyć. Jedynym rozsądnym rozwiązaniem w takim przypadku będzie wykupienie całego serwera albo wysyłanie statycznych plików do usługi chmurowej typu Amazon S3 (Simple Storage Service).
O tym, w jaki sposób założyć konto, korzystać, jak i zintegrować aplikacje PHP z tak zwaną usługą S3, należałoby napisać zupełnie osobny artykuł.
Przenoszenie plików zawierających zdjęcia, style i skrypty na zupełnie osobny serwer związane jest z kilkoma różnymi korzyściami. Po pierwsze, jest to przykład na partycjonowanie funkcjonalne, dzięki temu można odciążyć dotychczas używany serwer HTTP (który na ogół jest już odpowiedzialny za nazbyt wiele rzeczy za jednym razem). Po drugie pozbędziemy się z pewnością dostępnej dyskowej przestrzeni, gdyż usługa poza coraz wyższą ceną praktycznie nie nakłada żadnego limitu wykorzystywanej powierzchni. Z usługi S3 korzysta wiele spośród niezwykle popularnych serwisów, takich jak chociażby Airbnb czy Netflix.
Wdrażanie systemów do dystrybucji treści (CDN)
Rozproszona dystrybucja treści, czyli z angielskiego Content Delivery Network, w skrócie CDN to rozproszona sieć serwerów o nazwie reverse proxy, której głównym cel stanowi dostarczanie internetowych treści dużo wydajniej i znacznie szybciej. Usługodawcy Content Delivery Network dysponują sporą ilością węzłów tego rodzaju sieci, które będą w stanie dostarczyć treści pobierane z serwerów źródłowych w dużo bardziej efektywny sposób. Optymalizacja połączenia polega zwykle:
- na wybieraniu takiej trasy dla połączenia, aby posiadała możliwie jak najmniejszą ilość przeskoków,
- na wyborze serwera, który znajduje się w najkrótszej możliwej odległości geograficznej od użytkowników końcowych,
- na wybraniu najmniej dociążonego w danej chwili węzła.
Niewątpliwą korzyścią z zastawiania sieci Content Delivery Network jest zmniejszanie kosztów transferu wszelkich danych i tym samym znaczne przyspieszanie działania aplikacji, jak również odciążanie serwerów, które zajmują się utrzymywaniem plików. Tak samo jak w wypadku prostych serwerów plików, dzięki wykorzystaniu sieci Content Delivery Network możliwie jest dystrybuowanie plików do pobierania, albo innych obiektów, które dosyć rzadko ulegają modyfikacjom, na przykład JavaScript, pliki wraz ze stylami CSS, czy zdjęcia. Jest to warstwa, dzięki której możliwe staje się oddzielenie właściwego serwera plików, albo serwera HTTP od użytkowników końcowych. Usługę Content Delivery Network oferuje nam wielu różnych operatorów. Obecnie czołowymi dostawcami są: proinity LLC (usługa KeyCDN), MaxCDN, Amazon (usługa CloudFront) i Cloudflare.
O tym jak w prawidłowy sposób uruchomić CloudFront we własnej stronie albo aplikacji należałoby napisać zupełnie osobny temat, bowiem jest to niezwykle obszerna tematyka. Niemniej jednak jest zdecydowanie najtańszą opcją z węzłami w Polsce, zaś jej wdrażanie jest zdecydowanie przyjaźniejsze dla SEO (nie jest konieczne edytowanie DNS).
Minimalizacja ilości zapytań HTTP
Minimalizowanie ilości zapytań HTTP jest niezwykle korzystne w wypadku stosowania nadal powszechnego standardu o nazwie HTTP/1. Minimalizowanie zapytań HTTP może polegać między innymi na:
- wklejaniu niewielkich skryptów w ciało witryny,
- dywersyfikowaniu skryptów JS między wybranymi podstronami,
- scalaniu plików typu CSS w jeden plik zbiorczy.
O tym, kiedy najlepiej scalać (inaczej mówiąc łączyć) pliki JS CSS, zaś kiedy je wklejać w ciało dokumentu HTML, napisano wiele osobnych artykułów w tematyce optymalizacji plików JS i CSS w kodzie HTML.
Jakie są pozostałe wymagania?
Jak można się domyślić GTMetrix wymagać będzie również innego rodzaju działań o charakterze optymalizacyjnym, które zostały już opisane powyżej.
W wypadku wyników Pagespeed:
- minimalizowanie HTML,
- minimalizowanie i odkładanie wczytywania JavaScript,
- serwowanie bardzo dokładnie przeskalowanych zdjęć,
- unikanie pezekierowan, jak i błędów o numerze 404,
- optymalizowanie grafik, poprzez zapisywanie ich we właściwym formacie i silnej kompresji,
- określanie rozmiaru zdjęć przy pomocy atrybutu height i widht,
- unikanie instrukcji @import w CSS,
- używanie spójnego protokołu, za każdym razem HTTP, albo za każdym razem HTTPS,
- używanie spójnego URL (zawsze bez WWW, albo za każdym razem z WWW,
- wykorzystywanie pamięci podręcznej w przeglądarce (Cache Control/Expires).
W wypadku otrzymania drugiego wyniku YSLow:
- znaczące zminimalizowanie liczby zapytań HTTP (ta kwestia była już poruszana powyżej),
- zastosowanie kompresji z użyciem GZIP,
- zastawianie nagłówków Cache Control albo nagłówków Expires,
- używanie Content Delivery Network (opisane również powyżej),
- minifikacja (zminimalizowanie CSS i JavaScript,
- zmniejszanie ilości elementów DOM,
- usuwanie zduplikowanego JS, jak i nadmiarowego CSS,
- stosowanie GET, zamiast jakże popularnego POST w przypadku zapytań AJAXowych, kiedy jest to oczywiście możliwie,
- używanie domen bezciasteczkowych celem serwowania plików statycznych (opisywane dokładniej a powyższym tekście),
- wydzielanie kodów CSS i JavaScript dla osobnych plików (przykładowo bibliotekę bootstrap).
GTmetrix jako wtyczka WordPress
Omawiane w powyższym tekście narzędzie GTMetrix można także zainstalować z powodzeniem na należącym do nas WordPressie w roli niezwykle funkcjonalnej wtyczki. Niemniej jednak nie jest to niestety rozwiązanie zupełnie darmowe. Za darmo można przeprowadzić wyłącznie do 100 testów (mamy oczywiście możliwość dokupienia dowolnej ilości kredytów). Szczegółowe wyniki i tak możemy otrzymać dopiero na stronie internetowej.
Celem używania wtyczek musimy z pewnością postarać się o klucz API, który można otrzymać zupełnie za darmo, niemniej jednak trzeba będzie zarejestrować się na odpowiedniej, dedykowanej stronie.
Dalej konieczne będzie kliknięcie linku, który prowadzi do strony internetowej, na której można założyć konto. Należy wypełnić niezbędne pola i wysłać tak przygotowany formularz. Musimy także potwierdzić własne konto poprzez kliknięcie w link, który otrzymamy po procesie rejestracji, na podanego wcześniej maila kontaktowego. Po rejestracji należy wrócić na stronę API i kliknąć po raz drugi przycisk z odpowiedniego screenshota na stronie rejestracyjnej. Otrzymamy nasz indywidualny klucz API, który należy wkleić już w administracyjnym panelu należącego do nas WordPressa w ustawieniach dotyczących wtyczki.
Po wykonaniu tego rodzaju zabiegów można przejść do właściwego skonfigurowania wtyczki, na przykład poprzez ustawianie lokalizacji, z której ma być testowana strona internetowa, czyli inaczej mówiąc odpowiednie adresy mailowe dla powiadomień.
Na stronie testu można wybierać spośród testowania strony głównej albo też innego adresu w obrębie wybranej przez nas strony internetowej.
Test oczywiście potrwa chwilę, zaś po jego przeprowadzeniu będziemy mogli otrzymać wynik w postaci bardzo krótkiej oceny.
W tymże miejscu możemy także zaplanować sobie właściwe testy cykliczne, albo przejść na stronę internetową, która umożliwia szczegółową ocenę. Strona ta będzie taka sama jak ta, którą otrzymamy podczas wspomnianego już wyżej testu przeprowadzonego online.
Chcesz wiedzieć więcej, zapraszam na blog: https://cwierkaja.pl/wiedza
Gtmetrix – czy warto?
Odpowiedź na to pytanie zdecydowanie nie może być jednoznaczna, niemniej jednak na pewno warto zwrócić szczególną uwagę na niewątpliwe zalety, którymi odznacza się wyżej opisywany GTMetrix. Plusy to na pewno:
- szczegóły dla opcji strony internetowej,
- można zainstalować to narzędzie jako właściwą wtyczkę,
- umożliwia porównywanie wielu różnych adresów,
- nie wymaga rejestracji ani dokonywania żadnej instalacji,
- jest zupełnie darmowy i bez żadnych limitów.
GTMetrix można zdecydowanie polecić wszystkim tym, którzy chcą bardzo szybko sprawdzać wydajność własnej strony internetowej, czy też porównać ją z innymi witrynami (należącymi chociażby do konkurencji), bez konieczności instalacji rozszerzeń do przeglądarki. Warto sprawdzić to narzędzie i jego zalety.
