Lighthouse: jak uruchomić audyt strony w Chrome i co oznaczają jego kategorie

Czym jest Lighthouse i do czego służy

Lighthouse to automatyczne narzędzie Google o otwartym kodzie, które wczytuje wskazany adres, wykonuje na nim serię kontroli i przedstawia raport z ocenami oraz listą rzeczy do poprawy. Według dokumentacji Chrome for Developers można nim zbadać dowolną stronę internetową, także taką, która wymaga logowania. Korzystanie z niego nie wiąże się z opłatami, a każda kontrola, nazywana w raporcie audytem, ma własną stronę pomocy z opisem naprawy.

Warto od razu ustalić, czym Lighthouse nie jest. Nie pokazuje pozycji w Google, nie bada całego serwisu naraz i nie mierzy tego, jak strona działa u prawdziwych odwiedzających. Ocenia jedną podstronę, w jednej chwili, na jednym urządzeniu. Sklep z Poznania, który sprawdzi wyłącznie stronę główną, nie dowie się niczego o kartach produktów ani o koszyku.

Kilka dróg do tego samego raportu

Dokumentacja wymienia kilka sposobów uruchomienia: Narzędzia deweloperskie Chrome, wiersz poleceń, moduł dla środowiska Node, rozszerzenie do Chrome oraz PageSpeed Insights, czyli stronę, na której wystarczy wpisać adres. Wiersz poleceń i moduł Node służą programistom do automatyzacji pomiarów. Rozszerzenia Google nie poleca bez wyraźnego powodu, ponieważ nie pozwala ono badać witryn lokalnych ani stron dostępnych po zalogowaniu.

Dla właściciela firmy liczą się dwie drogi: karta Lighthouse w przeglądarce oraz PageSpeed Insights, które uruchamia Lighthouse na serwerach Google i dokłada dane o prawdziwych użytkownikach. Opisujemy to we wpisie o tym, jak czytać raport PageSpeed Insights. Karta w przeglądarce pozwala z kolei sprawdzić także wersję roboczą strony, panel klienta czy koszyk z produktami.

Jak uruchomić audyt Lighthouse w Chrome

Audyt uruchamia się w Narzędziach deweloperskich przeglądarki Chrome na komputerze, w karcie Lighthouse. Nie trzeba niczego instalować ani zakładać konta. Cała czynność zajmuje kilka kliknięć, a sam raport powstaje według dokumentacji zwykle w ciągu 30-60 sekund.

1. Otwarcie badanej podstrony

   W Chrome na komputerze należy otworzyć dokładnie ten adres, który ma zostać oceniony, na przykład stronę usługi albo kartę produktu.

2. Otwarcie Narzędzi deweloperskich

   Najprościej nacisnąć klawisz F12. Z boku lub u dołu okna pojawi się panel z kartami.

3. Przejście do karty Lighthouse

   Karta znajduje się w górnym pasku panelu, obok Konsoli, Sieci i Wydajności. Przy wąskim oknie bywa schowana na końcu paska.

4. Ustawienie pomiaru

   Należy zostawić domyślny tryb nawigacji, wskazać urządzenie mobilne albo komputer i pozostawić zaznaczone wszystkie kategorie.

5. Rozpoczęcie analizy

   Po kliknięciu przycisku rozpoczynającego analizę wczytywania strony przeglądarka sama odświeży adres i będzie go badać. W tym czasie nie należy niczego klikać ani przełączać kart.

6. Odczytanie raportu

   Raport pojawi się w tym samym panelu: u góry okrągłe wskaźniki z ocenami kategorii, niżej szczegóły każdej z nich.

Gotowy raport da się zachować. Menu oznaczone trzema kropkami w rogu raportu pozwala go wydrukować, skopiować albo zapisać, między innymi jako plik w formacie JSON. Taki plik można potem otworzyć w przeglądarce raportów Lighthouse Viewer, do której wystarczy go przeciągnąć. To wygodny sposób, żeby przekazać wynik wykonawcy strony bez robienia zdjęć ekranu.

Tryby i ustawienia panelu Lighthouse

Przed pomiarem panel pozwala określić trzy rzeczy: tryb badania, rodzaj urządzenia i zestaw kategorii. Od tych ustawień zależy, co dokładnie trafi do raportu, dlatego dwa pomiary wolno porównywać tylko wtedy, gdy wykonano je przy tych samych ustawieniach.

Opis panelu w dokumentacji Narzędzi deweloperskich wymienia trzy tryby. Nawigacja jest trybem domyślnym i daje raport po świeżym wczytaniu strony, czyli odpowiada na pytanie, jak strona zachowuje się u osoby, która właśnie na nią weszła. Okres bada stronę przez wybrany czas, w którym użytkownik sam wykonuje czynności, na przykład otwiera menu albo dodaje produkt do koszyka. Migawka ocenia bieżący stan strony bez ponownego wczytywania, co przydaje się przy sprawdzaniu otwartego okna dialogowego lub rozwiniętego formularza.

Wybór urządzenia decyduje o tym, czy Lighthouse udaje telefon, czy komputer. Większość firm powinna zacząć od wersji mobilnej, bo to ona jest zwykle wolniejsza i trudniejsza do poprawienia. Kancelaria z Krakowa, której strona na komputerze otwiera się natychmiast, może na symulowanym telefonie zobaczyć zupełnie inny obraz.

Ustawienia ukryte pod przyciskiem Ustawienia

Pod przyciskiem Ustawienia znajdują się opcje dodatkowe. Pierwsza dotyczy czyszczenia pamięci: gdy jest włączona, przeglądarka usuwa zapisane dane witryny, żeby pomiar lepiej oddawał pierwszą wizytę nowej osoby. Druga włącza próbkowanie kodu JavaScript, przydatne programiście podczas dalszej analizy w panelu Wydajność.

Trzecia opcja to ograniczanie, czyli celowe spowolnienie łącza i procesora. Do wyboru jest ograniczanie symulowane przez Lighthouse, które działa szybciej, ale wyniki wydajności przelicza, oraz ograniczanie wykonywane przez Narzędzia deweloperskie, zgodne z tym, co pokazuje panel Wydajność. Osobie, która nie zajmuje się programowaniem, radzimy zostawić ustawienie domyślne i nie zmieniać go między pomiarami.

Jakie kategorie ocenia Lighthouse

W panelu przeglądarki Lighthouse ocenia cztery kategorie: wydajność, ułatwienia dostępu, sprawdzone metody i SEO. Każda dostaje osobną ocenę od 0 do 100 i każda odpowiada na inne pytanie, dlatego nie ma sensu liczyć z nich jednej średniej. Strona z wynikiem 100 w SEO może mieć 40 w wydajności i odwrotnie.

Wprowadzenie do Lighthouse w dokumentacji wymienia obecnie także piątą grupę kontroli, związaną z przeglądaniem agentowym, czyli z tym, jak ze stroną radzą sobie programy działające w imieniu użytkownika. To nowy obszar i jego zakres może się zmieniać, dlatego poniżej skupiamy się na czterech kategoriach opisanych w dokumentacji panelu.

Wydajność

Kategoria wydajności mierzy przebieg wczytywania strony: kiedy pojawia się pierwsza treść, kiedy największy element, jak długo strona nie odpowiada na kliknięcia i czy układ przeskakuje. Pod oceną raport pokazuje wartości wskaźników, a niżej sekcje z możliwościami poprawy i diagnostyką. Trzy z tych wskaźników mają u nas osobne opracowania: LCP, czyli wyświetlenie największego elementu, CLS, czyli przeskoki układu, oraz INP, którego Lighthouse w trybie nawigacji nie mierzy i zastępuje całkowitym czasem blokowania.

Ułatwienia dostępu

Ta kategoria sprawdza, czy stronę da się obsłużyć czytnikiem ekranu i klawiaturą oraz czy treść jest czytelna. Zgodnie z opisem oceny ułatwień dostępu wynik jest średnią ważoną wszystkich kontroli, a wagi wynikają z tego, jak mocno dany błąd utrudnia życie użytkownikowi według biblioteki axe. Kontrola jest zaliczona albo nie, bez ocen pośrednich: jeśli część przycisków ma czytelne nazwy, a część nie, strona dostaje za tę kontrolę zero.

Raport zawiera też listę kontroli ręcznych, które nie wpływają na ocenę. To ważna informacja: automat nie potrafi stwierdzić, czy opis zdjęcia ma sens ani czy kolejność przechodzenia klawiszem Tab jest logiczna. Wynik 100 oznacza więc brak błędów wykrywalnych maszynowo, a nie potwierdzenie pełnej dostępności.

Sprawdzone metody

Sprawdzone metody to zbiór kontroli jakości technicznej. Dokumentacja grupuje je w kilka obszarów: ogólne zasady budowy strony, takie jak deklaracja typu dokumentu, zestaw znaków i brak błędów w konsoli przeglądarki, zabezpieczenia, czyli między innymi korzystanie z HTTPS i przekierowanie ruchu z HTTP, wygodę użytkownika, na przykład to, czy strona nie prosi o zgodę na powiadomienia lub lokalizację zaraz po wejściu i czy nie blokuje wklejania w polach formularza, oraz unikanie wycofanych technologii.

Dla firmy najczęstszym źródłem utraty punktów w tej kategorii są skrypty zewnętrzne. Hydraulik z Łodzi, który ma na stronie okno czatu, mapę i kilka kodów śledzących, często widzi w raporcie błędy w konsoli pochodzące właśnie z tych dodatków, a nie z własnej strony.

SEO

Kategoria SEO sprawdza podstawy techniczne potrzebne wyszukiwarce. Dokumentacja audytów SEO dzieli je na trzy grupy: zrozumienie treści przez wyszukiwarki, czyli metaopis, opisowy tekst linków, poprawny atrybut hreflang i rel=canonical, możliwość przemierzania i indeksowania, czyli poprawny kod odpowiedzi HTTP i prawidłowy plik robots.txt, oraz dostosowanie do telefonów. Każda z tych kontroli ma w ocenie taką samą wagę, a sprawdzenie danych uporządkowanych pozostaje kontrolą ręczną.

Trzeba przy tym wiedzieć, jak płytko te kontrole sięgają. Kontrola metaopisu kończy się niepowodzeniem tylko wtedy, gdy opisu nie ma albo jest pusty, a jego jakości Lighthouse nie ocenia. O tym, jak napisać go dobrze, mówi nasz wpis o tytule strony i meta opisie, a o regułach dla robotów wpis o pliku robots.txt.

Jeśli chcą Państwo zamówić audyt SEO, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl

Jak powstaje ocena punktowa wydajności

Ocena wydajności jest średnią ważoną ocen pięciu wskaźników. Wpływają na nią wyłącznie zmierzone wartości, a nie liczba zaleceń wypisanych niżej w raporcie. Wynika z tego praktyczny wniosek: wykonanie zalecenia z listy podnosi ocenę tylko wtedy, gdy rzeczywiście poprawi któryś ze wskaźników.

Wagi podaje strona o ocenie wydajności Lighthouse. W wersji dziesiątej narzędzia rozkładają się one tak, jak w tabeli poniżej. Google zastrzega, że wagi zmieniały się między wersjami, więc ocen z różnych wersji Lighthouse nie należy porównywać wprost.

Trzy wskaźniki o największych wagach dają razem cztery piąte oceny. Jeżeli więc strona ma słaby wynik, przyczyny warto szukać najpierw w nich. Całkowity czas blokowania, który waży najwięcej, to według jego opisu w dokumentacji suma tych fragmentów długich zadań, które przekraczają 50 milisekund. Zadanie trwające 70 milisekund dokłada do wyniku 20 milisekund. W praktyce wysoki czas blokowania oznacza zbyt dużo kodu JavaScript wykonywanego na starcie: rozbudowane wtyczki, czaty, suwaki, kody reklamowe.

Od milisekund do punktów

Każdy wskaźnik jest najpierw mierzony w swojej jednostce, zwykle w milisekundach, a potem zamieniany na ocenę od 0 do 100. Służy do tego krzywa zbudowana na danych o prawdziwych stronach z archiwum HTTP Archive. Punkty odniesienia są dwa: wartość, jaką osiąga 25. percentyl stron, daje ocenę 50, a wartość 8. percentyla daje ocenę 90. Ocena mówi więc, jak strona wypada na tle innych witryn, a nie tylko to, ile sekund trwało wczytywanie.

Krzywa nie jest linią prostą. Dokumentacja wyjaśnia, że w środkowym zakresie ocena rośnie niemal równomiernie, a przy najwyższych wartościach coraz wolniej. Przejście z 99 na 100 wymaga podobnej poprawy wskaźnika jak przejście z 90 na 94. Stąd bierze się zalecenie, które powtarzamy klientom: celem jest zielony zakres, a nie komplet punktów.

Osobne krzywe obowiązują dla telefonu i dla komputera. Ta sama strona dostaje dlatego dwie różne oceny, a wynik dla komputera jest zwykle wyższy.

Co oznaczają kolory

Oceny od 0 do 49 są oznaczone na czerwono i oznaczają słaby wynik. Zakres od 50 do 89 jest pomarańczowy i wskazuje, że strona wymaga poprawy. Od 90 do 100 ocena jest zielona, czyli dobra. Google podkreśla, że wynik 100 jest bardzo trudny do osiągnięcia i nie należy go oczekiwać.

Dlaczego wynik Lighthouse zmienia się między pomiarami

Wynik zmienia się, ponieważ pomiar odbywa się na żywej stronie, przez zwykłe łącze i na komputerze, który w tym samym czasie robi inne rzeczy. Autorzy narzędzia piszą wprost, że oceny wydajności będą się wahać nawet wtedy, gdy na stronie niczego nie zmieniono. Różnica kilku punktów między dwoma pomiarami nie jest więc ani poprawą, ani pogorszeniem.

Strona o ocenie wydajności wymienia najczęstsze przyczyny wahań: testy różnych wersji strony i zmieniające się reklamy, zmiany w trasie ruchu w sieci, różnice między urządzeniami, rozszerzenia przeglądarki oraz oprogramowanie antywirusowe.

Rozszerzenia przeglądarki i antywirus

Rozszerzenia wpływają na wynik, ponieważ wstrzykują do oglądanej strony własny kod JavaScript albo dodają i zmieniają żądania sieciowe. Program blokujący reklamy potrafi zawyżyć ocenę, bo wycina ciężkie skrypty, które zwykły odwiedzający pobierze. Rozszerzenie do tłumaczenia czy menedżer haseł może ją zaniżyć, bo dokłada stronie pracy. W obu przypadkach raport przestaje opisywać stronę, a zaczyna opisywać przeglądarkę osoby, która go wykonała.

Dokumentacja panelu zaleca dlatego uruchamianie Lighthouse w oknie incognito. Zastrzega jednocześnie, że nawet wtedy na wynik mogą wpływać rozszerzenia, procesy działające na urządzeniu oraz ustawienia zapisane w plikach cookie lub w pamięci lokalnej. Jeśli któreś rozszerzenie ma zgodę na działanie w trybie incognito, należy je na czas pomiaru wyłączyć.

Moc komputera

Sprzęt ma duży wpływ na wynik. Opracowanie zespołu Lighthouse o zmienności wyników zalicza różnice w sprzęcie i walkę programów o zasoby komputera do źródeł o wysokim wpływie, obok niestabilności lokalnej sieci i losowych zachowań samej strony. Jako minimum dla maszyny wykonującej pomiary podaje dwa rdzenie procesora przeznaczone wyłącznie do tego zadania i 2 GB pamięci, a zaleca cztery rdzenie i od 4 do 8 GB.

W codziennej pracy oznacza to tyle, że pomiar na starszym laptopie z otwartą pocztą, arkuszem i wideokonferencją da gorszą ocenę niż pomiar tej samej strony na mocnym komputerze stacjonarnym. Dokumentacja panelu mówi wprost, że wyników z różnych komputerów nie należy porównywać bezpośrednio. Z naszej praktyki wynika, że to najczęstsze źródło nieporozumień: właściciel firmy widzi u siebie 55 punktów, wykonawca strony u siebie 85 i obie strony mają rację.

Zasady powtarzalnego pomiaru

Powtarzalny pomiar to taki, który za każdym razem odbywa się w tych samych warunkach i opiera się na kilku próbach zamiast jednej. Zespół Lighthouse zaleca posługiwanie się medianą, czyli wartością środkową, i podaje, że mediana z pięciu pomiarów jest dwukrotnie stabilniejsza niż pojedynczy wynik.

Medianę liczy się prosto: pięć ocen ustawia się od najniższej do najwyższej i bierze trzecią. Jeśli kolejne pomiary dały 61, 68, 64, 49 i 66 punktów, medianą jest 64, a wynik 49 okazuje się jednorazowym odchyleniem, na którym nie warto opierać decyzji.

• Pomiar w oknie incognito, z wyłączonymi rozszerzeniami.
• Zawsze ten sam komputer, podłączony do zasilania, z zamkniętymi innymi programami i kartami.
• To samo łącze, najlepiej przewodowe lub stabilna sieć w biurze, bez pobierania plików w tle.
• Te same ustawienia panelu: tryb nawigacji, to samo urządzenie, to samo ograniczanie, włączone czyszczenie pamięci.
• Pięć pomiarów tego samego adresu i zapisanie mediany, a nie najlepszego wyniku.
• Zapis daty, wersji Chrome i ustawień obok wyniku, żeby po miesiącu dało się pomiar odtworzyć.
• Osobny pomiar dla każdego ważnego typu podstrony: strony głównej, usługi, kategorii, produktu, wpisu.

Jeśli na miejscu nie ma odpowiedniego sprzętu, autorzy Lighthouse wskazują jako rozwiązanie laboratorium działające na cudzych serwerach, na przykład PageSpeed Insights. Pomiar odbywa się wtedy na maszynach Google, więc stan Państwa komputera i jego rozszerzenia przestają mieć znaczenie. Wahania nie znikają całkowicie, ale wyniki dwóch osób stają się porównywalne.

Ograniczenia audytu Lighthouse

Lighthouse dostarcza danych laboratoryjnych: bada jedno wczytanie jednej podstrony na jednym, symulowanym urządzeniu. Nie wie, z jakich telefonów i sieci korzystają Państwa klienci, nie zna treści strony i nie widzi reszty serwisu. Dlatego jego raport jest dobrym narzędziem diagnostycznym, ale słabym dowodem na to, że strona jest szybka albo dobrze przygotowana pod wyszukiwarkę.

Laboratorium to nie prawdziwi użytkownicy

Google rozróżnia dwa rodzaje danych. Opis narzędzia PageSpeed Insights wyjaśnia, że dane laboratoryjne pochodzą z Lighthouse, który symuluje wczytanie strony na jednym urządzeniu przy stałych warunkach sieci, a dane z rzeczywistego użytkowania pochodzą z raportu o wrażeniach użytkowników Chrome, obejmują poprzednie 28 dni i są podawane dla 75. percentyla wizyt. Oba zestawy mogą się różnić, bo prawdziwi odwiedzający korzystają z wielu urządzeń i sieci.

Ma to znaczenie dla widoczności. Podstawowe wskaźniki internetowe, o których Google pisze w dokumentacji dla właścicieli witryn, opisują doświadczenia rzeczywistych użytkowników: LCP w ciągu 2,5 sekundy, INP poniżej 200 milisekund i CLS poniżej 0,1. Ocena punktowa Lighthouse nie jest jednym z tych wskaźników. Strona może mieć w laboratorium 60 punktów i dobre wyniki u odwiedzających albo odwrotnie. Jak pracować nad danymi rzeczywistymi, opisujemy we wpisie o tym, jak poprawić Core Web Vitals.

Sto punktów w SEO nie oznacza dobrego pozycjonowania

Kategoria SEO obejmuje kilkanaście prostych kontroli technicznych. Nie ocenia jakości treści, doboru słów kluczowych, linków prowadzących do strony, struktury całego serwisu ani tego, czy podstrony ze sobą nie konkurują. Strona z jednym zdaniem tekstu i poprawnym metaopisem dostanie komplet punktów. Zakres pełnej analizy pokazujemy we wpisie o tym, co powinien zawierać audyt SEO.

Podobnie jest z dostępnością: automat wychwytuje tylko część problemów, a pozostałe trafiają na listę kontroli ręcznych. Jeśli Państwa firma podlega przepisom o dostępności, wynik Lighthouse nie zastąpi oceny wykonanej przez specjalistę, a w kwestii samych obowiązków warto zasięgnąć opinii prawnika.

Co zrobić z wynikiem i kiedy potrzebna jest pomoc

Raport najlepiej potraktować jako listę pytań do wykonawcy strony, a nie jako ocenę jego pracy. Kolejność działań wynika z budowy samego raportu: najpierw wskaźniki, potem przyczyny, na końcu pozostałe kategorie.

W kategorii wydajności warto zacząć od ustalenia, który wskaźnik jest czerwony lub pomarańczowy, i dopiero do niego dobrać zalecenia z sekcji możliwości i diagnostyki. Długi LCP prowadzi zwykle do obrazów i serwera, o czym piszemy przy okazji czasu odpowiedzi serwera. Wysoki czas blokowania prowadzi do skryptów, a jego odpowiednikiem u prawdziwych użytkowników jest opóźnienie reakcji na kliknięcie, czyli INP. Przeskoki układu mają źródło najczęściej w obrazach bez wymiarów i elementach doczytywanych z opóźnieniem.

W pozostałych kategoriach każda niezaliczona kontrola ma odnośnik do strony pomocy z opisem naprawy. Braki w SEO, takie jak pusty metaopis czy błędny adres kanoniczny, da się zwykle poprawić w panelu systemu strony, na przykład WordPressa. Błędy dostępności i sprawdzonych metod częściej wymagają zmian w szablonie.

Po wprowadzeniu poprawek pomiar należy powtórzyć w tych samych warunkach i porównać mediany. Biuro rachunkowe z Bydgoszczy, które po wymianie zdjęć zobaczyło wzrost z 62 na 64 punkty, nie ma jeszcze powodu do świętowania, bo taka różnica mieści się w zwykłych wahaniach. Wyraźna zmiana wartości LCP w sekundach mówi więcej niż przesunięcie oceny o kilka punktów.

Pomoc specjalisty przydaje się w kilku sytuacjach: gdy ocena wydajności pozostaje czerwona mimo wykonania zaleceń, gdy problem tkwi w szablonie lub wtyczkach, których nie da się po prostu wyłączyć, gdy dane laboratoryjne i rzeczywiste pokazują co innego oraz gdy raport jest zielony, a ruch z Google mimo to spada. W dwóch pierwszych przypadkach potrzebne jest SEO techniczne, w ostatnim szersza analiza, którą obejmuje kompleksowy audyt SEO. Nie obiecujemy przy tym określonych pozycji, bo szybkość i poprawność techniczna to tylko część tego, co wyszukiwarka bierze pod uwagę.

Jeśli chcą Państwo zamówić audyt SEO, zachęcamy do kontaktu: tel. 222 500 844 lub mailowo: biuro@pozycjonowaniestron.pl