Google Lighthouse – recenzja narzędzia

|
|
Kategorie: SEO

Od 2010 roku szybkość ładowania strony, jest jednym z czynników rankingowych w wyszukiwarce Google. Od lipca 2018 będzie miała również wpływ na wygląd wyników w wyszukiwaniu mobilnym. Jak przygotować się na tę aktualizację? Kiedy możemy powiedzieć, że strona jest szybka?

Na rynku dostępnych jest wiele narzędzi, za pomocą których możemy zmierzyć prędkość naszych stron. Dziś przyjrzymy się bliżej narzędziu, które podchodzi inaczej do całego tematu, prezentując nie tylko cyfry i wskaźniki, ale próbując przedstawić nam „realne odczucia” użytkowników. Narzędziem tym jest Google Lighthouse.

 

Czy to w ogóle ma sens?

Nie wiemy jak mocny wpływ na pozycję witryn ma szybkość ładowania strony. Część osób może nie być przekonana, że jest on na tyle duży, że warto poświęcać czas na optymalizację witryny pod tym kątem. Ale nie możemy zapominać, o jeszcze jednym elemencie, który pozostaje w zależności z szybkością serwisu. Mowa oczywiście o współczynniku konwersji. Szybka dostępność  i użyteczność strony może w znacznym stopniu przyczynić się do zmniejszenia liczby odrzuceń, czy liczby porzucanych koszyków. Argumenty te przemawiają za tym, że jednak warto pochylić się nad tym tematem.

 

Czym jest Google Lighthouse?

Lighthouse to narzędzie open source stworzone przez firmę Google. Początkowo miało służyć do audytowania progresywnych aplikacji internetowych (PWA – Progressive Web Applications), w obecnej formie końcowy raport zawiera informację na temat błędów dotyczących szeroko pojętej wydajności i jakości stron oraz aplikacji internetowych. Oprócz listy niedociągnięć, otrzymujemy również użyteczne wskazówki jak je poprawić i dlaczego jest to istotne.

 

Jak uruchomić Lighthouse?

Dostęp do narzędzia możemy uzyskać na kilka sposobów:

  • Pierwszą metodą jest instalacja Lighthouse jako rozszerzenia do wyszukiwarki Chrome. Po pobraniu z Chrome Webstore i instalacji, na pasku przeglądarki pojawi się ikona aplikacji. Po kliknięciu w nią ukażę się nam menu, z poziomu którego możemy wygenerować raport. Gotowy raport zostanie otwarty jako nowa zakładka w przeglądarce.

chrome lighthouse

  • Drugą opcję dostępu do narzędzia oferuje nam sama przeglądarka Chrome, w którą, począwszy od wersji 60+, Lighthouse jest wbudowany. Wystarczy przejść do narzędzi dla developerów (prawy przycisk myszy -> zbadaj, lub z pomocą skrótu ctrl+shift+I), następnie wybieramy zakładkę Audits:

narzędzie dla developerów

  • Trzecią możliwością jest zainstalowanie Lighthouse jako modułu w środowisku Node. Wystarczy w oknie konsoli wpisać npm install -g lighthouse, a w celu uruchomienia audytu wykonać polecenie lighthouse https://przykładowy-adres.com

 

Elementy audytu

Po uruchomieniu audytu, Lighthouse przeprowadza serię testów na naszej stronie. Symulacja przeprowadzona jest w taki sposób, jakby na nasza witryna była odwiedzana przez urządzenie korzystające z połączenia 3G i dodatkowo procesor tego urządzenia był obciążony (możemy dezaktywować te ustawienia, jeśli korzystamy z programu z poziomu konsoli).

Końcowy raport zawiera ocenę pięciu obszarów:

  • Progressive Web App
  • Performance
  • Accessibility
  • Best Practices
  • SEO (dostępny obecnie tylko w rozszerzeniu do Chrome)

 

rapoert lighthouse

 

I. Progressive Web App: Raport zwierający aspekty ważne dla aplikacji PWA. W tej kategorii możemy otrzymać od 0 do 100pkt. Audyt opiera się na liście „Baseline PWA Checklist” (https://developers.google.com/web/progressive-web-apps/checklist#baseline). Wszystkie elementy są tej samej wagi, która przekłada się na końcową punktację.

 

II. Performance: Raport zawiera informację na temat wydajności strony/aplikacji i możliwości jej poprawy. Wynik może znajdować się w trzech zakresach:

  • 0 do 44 (słaby) – kolor czerwony
  • 45 do 74 (średni) – kolor pomarańczowy
  • 75 do 100 (dobry) – kolor zielony

Każdorazowe przeprowadzenie testu może dać różne wyniki. Może to być spowodowane ładowaniem różnych reklam, skryptów, warunkami sieciowymi, czy aplikacjami zainstalowanymi na naszym komputerze takimi jak antywirusy. Aby pozbyć się fluktuacji należy wyłączyć programy mogące zakłócić cały proces lub skorzystać z usługi hostowanej, np. przy pomocy strony https://webpagetest.org/

 

III. Accessibility: Lista elementów, które mogą poprawić dostępność naszej aplikacji. Końcowy wynik tego audytu jest średnią ważoną wszystkich poszczególnych czynników. Lista elementów, wraz z ich wagą, dostępna jest pod adresem: https://docs.google.com/spreadsheets/d/1dXH-bXX3gxqqpD1f7rp6ImSOhobsT1gn_GQ2fGZp8UU/edit?ts=59fb61d2#gid=0 Należy zwrócić uwagę na to, że w przeciwieństwie do audytu Performance, nie dostajemy pkt za częściowe spełnienie warunków. Jeżeli na naszej stronie znajdzie się przykładowo jeden obrazek bez atrybutu alt, to mimo tego, że wszystkie inne grafiki posiadają ten atrybut, to za element „image-alt” otrzymamy 0 pkt.

 

IV. Best Practises: Audyt listujący elementy będące dobrymi praktykami, które pozwalają na uniknięcie poważniejszych błędów z wydajnością. Ocena również w skali od 0 do 100.

 

V. SEO: Audyt sprawdzający krótką checklistę podstawowych elementów w optymalizacji SEO. Ww przyszłości ma zostać rozbudowany i udostępniony w stabilnej wersji narzędzi dla programistów https://productforums.google.com/forum/#!topic/webmaster-pl/raWjrgVhpYE;context-place=forum/webmaster-pl.

 

Wynik audytu

Jako że naszą uwagę do „Latarni morskiej” od Google przykuła głównie kwestia chęci lepszej optymalizacji szybkości witryn na urządzeniach mobilnych, to skupimy się w tej części wpisu na raporcie Performance.

wynik audytu

Podczas mierzenia wydajności Lighthouse wyróżnia następujące metryki:

  • First meaningful paint: określa ile czasu zajmuje wyświetlenie głównej treści strony.
  • First Interactive: określa czas, po którym strona jest w minimalnym stopniu interaktywna i reaguje na wprowadzane przez użytkownika dane.
  • Consistently interactive: określa czas, po którym strona staje się w pełni interaktywna.
  • Perceptual speed index: określa czas, po którym strona zostanie wyraźnie wypełniona.
  • Estimated Input Latency: określa czas reakcji strony na dane wprowadzone przez użytkownika. Zaleceniem jest nie więcej niż 50ms.

Jak widać powyżej, Google próbuje odzwierciedlić za pomocą metryk doświadczenia użytkowników w kontakcie ze stroną czy aplikacją. Analizując cały raport, wniosek jest jeden, najistotniejszym elementem jest jak najszybsze renderowanie najważniejszej treści strony i umożliwienie użytkownikom szybkiej interakcji. Dużą wagę ma optymalizacja krytycznej ścieżki renderowania (https://developers.google.com/web/fundamentals/performance/critical-rendering-path/)

Poniżej wyników poszczególnych metryk mamy kolejne zakładki, pierwszą z nich jest: „Opportunities” – przegląd wszystkich rzeczy, które możemy zrobić, aby przyspieszyć działanie witryny. Duży nacisk kładziony jest na odroczenie wykonywania nieistotnych skryptów JS, CSS, czy ładowania obrazów. Ważnym elementem jest też zapewnienie odpowiednich rozmiarów grafik dla różnych urządzeń.

Następna sekcja to „Diagnostics”. Zawiera w sobie między innymi element o nazwie „Critical Request Chains” – pokazuje on jakie zasoby wczytywane są w pierwszej kolejności, aby pokazać pierwszy render strony. Żeby usprawnić ładowanie strony należy rozważyć: zmniejszenie długości łańcucha całej ścieżki, zmniejszenie rozmiaru zasobów i opóźnić ładowanie nieistotnych elementów.

 możliwości lighthouse

Po rozwinięciu poszczególnych sekcji mamy dokładny podgląd na to, których elementów na stronie dotyczy dana kwestia. Dodatkowo przy każdym z nich jest odnośnik do wpisów w poradniku Google dla developerów, który opisuje szerzej dany problem i przedstawia sposób jego poprawy.

Ostatnia zakładka „Passed Audits” listuje segmenty, które wdrożone są poprawnie.

 

Google Lighthouse vs. pozostałe narzędzia

Niewątpliwie jednym z najbardziej popularnych obecnie narzędzi używanych do analizy prędkości strony jest PageSpeed Insights, który dostarcza ogólnego przeglądu wskaźników wydajności strony. Jednak mimo otrzymania końcowej oceny w 100 stopniowej skali oraz listy elementów do poprawy, narzędzie to nie daje nam żadnego wyobrażenia o faktycznej prędkości ładowania witryny. Ponadto, zalecenia sugerowane przez program często są bardzo trudne do wdrożenia, a czasami nawet niemożliwe. Osiągnięcie 100 punktów często jest po prostu sztuką dla sztuki i nie przekłada się bezpośrednio na poprawę szybkości.

Lighthouse w tym wypadku ma dużo bardziej praktyczne podejście, skierowane na potrzeby użytkownika. Sprawdza jak szybko może zajść interakcja ze stroną i jak oraz w jakim czasie po otrzymaniu danych wejściowych strona jest w stanie odpowiedzieć. Test przebiega w nieprzypadkowych warunkach, nie zawsze jesteśmy w zasięgu super szybkiego LTE, a nasze urządzenia często obciążone są przez inne aplikacje. Lighthouse skutecznie emuluje warunki, które doświadczamy w prawdziwym świecie. Dzięki temu otrzymujemy wskazówki nawet dla stron, które w świetle innych aplikacji były oceniane jako szybkie.

Jeśli w codziennej pracy używasz też innych narzędzi, takich jak GTmetrix, czy WebPageTest, to Lighthouse znakomicie uzupełni ten zestaw.

 

Podsumowanie

Czy Lighthouse będzie wyznaczał nowy standard dla narzędzi służących do pomiarów wydajności stron? Chyba za wcześnie, aby wysuwać takie wnioski. Natomiast na pewno jest świetnym uzupełnieniem dla wszystkich obecnych na rynku aplikacji tego typu.

Rozbudowanie PageSpeed Insights o realne dane użytkowników Chrome, czy ogłoszenie daty aktualizacji dotyczącej szybkości stron dla algorytmu w wyszukiwarce mobilnej – to wyraźne sygnały, mówiące o tym, że Google kładzie coraz większy nacisk na doświadczenia użytkowników oraz wydajność stron na urządzeniach mobilnych.

Jeśli jeszcze zastanawiasz się czy warto skorzystać z zaleceń zawartych w audytach Lighthouse i spróbować wyśrubować możliwie jak najwyższy wynik, to jedno jest pewne – nawet jeśli optymalizacja zgodna z Lighthouse nie pomoże w osiąganiu lepszych pozycji, to z pewnością im nie zaszkodzi. Poprawa komfortu użytkowników mobilnych może bowiem przynieść tylko profity.

Jakie są wasze opinie na temat Lighthouse? Jak prezentuje się na tle konkurencyjnych rozwiązań? Podzielcie się swoją opinią w komentarzu.

Komentarze do artykułu: Google Lighthouse – recenzja narzędzia