W tym odcinku SEO Podcastu przyjrzymy się bliżej jednemu z najważniejszych narzędzi od Google – Google Lighthouse. To darmowe i niezwykle potężne narzędzie, które pozwala analizować wydajność naszego serwisu, jego dostępność dla osób niepełnosprawnych oraz stopień optymalizacji pod SEO. Pokażę Ci krok po kroku jak działa, co dokładnie mierzy i na co zwracać uwagę podczas analizy raportów. Podpowiem Ci też, jak wykorzystać jego wskazówki do poprawy swojego serwisu. Jeśli chcesz mieć pewność, że Twoja strona spełnia wymagania zarówno użytkowników, jak i algorytmów Google – ten odcinek jest właśnie dla Ciebie.
Spis treści:
Wideo
Transkrypcja
Omówienie zalet Google Lighthouse
Narzędzie Google Lighthouse to zaawansowane narzędzie audytowe oferujące liczne korzyści dla optymalizacji stron internetowych:
- Analizuje czasy ładowania, renderowanie treści i optymalizację zasobów, identyfikując wąskie gardła wpływające na szybkość działania strony.
- Wykrywa bariery utrudniające korzystanie ze strony osobom z niepełnosprawnościami, pomagając spełnić wymogi prawne i etyczne.
- Ocenia elementy kluczowe dla pozycjonowania, takie jak struktura nagłówków, meta tagi czy responsywność, przyczyniając się do lepszej widoczności w wyszukiwarce Google.
- Sprawdza implementację zabezpieczeń, poprawność kodu i optymalizację techniczną zgodnie ze współczesnymi standardami webowymi.
- Weryfikuje spełnienie kryteriów PWA, takich jak obsługa offline czy responsywny interfejs, zwiększając użyteczność aplikacji webowych.
- Generuje czytelne raporty z priorytetyzacją problemów i konkretnymi wskazówkami naprawczymi, ułatwiając wdrożenie optymalizacji.
- Łączy ocenę techniczną z badaniem doświadczeń użytkownika, identyfikując problemy wpływające na współczynnik konwersji.
No i najważniejsze, narzędzie jest całkowicie darmowe, zintegrowane z przeglądarką Google Chrome (działa jako narzędzie wbudowane w Chrome DevTools lub inaczej „Narzędzia dla developerów”) i dostępne jest bez konieczności dodatkowej instalacji narzędzi firm trzecich (oczywiście poza samą przeglądarką).
Według mojej opinii narzędzie to jest bardzo często pomijane na fakt, że jest wbudowane właśnie w narzędzia dla programistów, dlatego mam nadzieję, że tym filmem będę mógł wpłynąć na jego jeszcze większą popularność w branży SEO.
Okej, koniec teorii! Przejdźmy w końcu do jego użycia.
Uruchomienie Google Lighthouse
Aby rozpocząć wykonywanie audytu SEO z pomocą Google Lighthouse, należy włączyć wbudowane w przeglądarkę „Narzędzia dla developerów”. W tym celu w przeglądarce Google Chrome należy przejść do ustawień, klikając ikonę z trzema kropkami znajdującą się w prawym, górnym rogu przeglądarki, a następnie wybrać „Więcej narzędzi” i tutaj znajdziemy przycisk uruchamiający wspomniane narzędzia dla developerów.
W zależności od wybranej pozycji „dokowania”, narzędzia dla developerów zostaną wyświetlone z lewej, z prawej lub w dolnej części okna przeglądarki. Osobiście lubię dolną pozycję okna i taką mam ustawioną. W przypadku, jeśli korzystasz na przykład z dwóch monitorów, warto poświęcić jeden z nich na wyświetlanie narzędzi, zajmujących więcej miejsca, przez co analiza okaże się dużo bardziej czytelna. W tym celu wybierz ponownie ikonę z trzema kropkami, ale tym razem bezpośrednio w narzędziach dla developerów. Znajdziesz tu ikony symbolizujące pozycję dokowania narzędzi dla webmasterów, którą teraz możesz zmienić.
Teraz przejdźmy do narzędzia Google Lighthouse. Aby je włączyć należy zlokalizować kartę „Lighthouse”. Kliknijmy w nią.
Tryby pracy narzędzia Google Lighthouse
Narzędzie Google Lighthouse opiera się o trzy tryby pracy, są to:
- Nawigacja (z ang. Navigation) – jako domyślny tryb;
- Okres (z ang. Timespan);
- Migawka (z ang. Snapshot).
Każdy tryb ma swoje własne korzyści i ograniczenia, o których teraz Ci opowiem.
Tryb „Nawigacja” jako domyślny tryb do użycia służy do pełnej analizy strony zaraz po jej załadowaniu. Pozwala uzyskać ogólny wynik wydajności, sprawdzić dostępność oraz ocenić, czy strona spełnia kryteria Progressive Web App. Jest idealny do testowania tradycyjnych stron internetowych, które ładują się od razu. Nie sprawdzi jednak tego, co dzieje się po interakcji użytkownika, np. po kliknięciach czy przeładowaniach, ani nie wykryje treści ładowanych z opóźnieniem. W skrócie odpowiada na pytanie „Jak szybko i dobrze ładuje się strona przy jej starcie?”
Tryb „Okres” monitoruje działanie strony w trakcie użytkowania – od momentu rozpoczęcia do zakończenia nagrywania. Pomaga wykryć problemy z płynnością, czasem wykonania JavaScriptu i przesunięciami układu, szczególnie przy dłuższym korzystaniu ze strony lub aplikacji. Nie oferuje jednak ogólnego wyniku wydajności ani szczegółowych metryk związanych z konkretnymi momentami ładowania (np. kiedy pojawia się największy element) i nie analizuje dostępności. W skrócie odpowiada na pytanie „Jak działa strona podczas użytkowania, czyli w trakcie interakcji?”
Tryb „Migawka” wykonuje jednorazową analizę aktualnego stanu strony – jakby robił „zdjęcie” tego, co widać w danym momencie. Jest przydatny do sprawdzania ukrytych elementów interfejsu (np. rozwijanych menu czy formularzy), a także do wykrywania problemów z dostępnością w dynamicznych częściach aplikacji. Nie mierzy jednak wydajności, nie analizuje ruchu sieciowego ani nie sprawdza działania strony poza tym, co jest aktualnie widoczne w strukturze DOM. W skrócie odpowiada na pytanie „Jak wygląda i działa strona w danym momencie?”.
A teraz chciałbym przedstawić Ci po krótce możliwości każdego z tych trzech trybów dostępnych w narzędziu Google Lighthouse.
Tryb „Nawigacja”
Nasz audyt rozpoczniemy od pierwszego i domyślnego trybu – Nawigacja. Ale zanim zaczniemy, zwróć uwagę na dodatkowe opcje, które możemy wybrać. Otrzymujemy tu dodatkową możliwość wyboru urządzenia, które ma zostać wzięte pod uwagę w trakcie analizy. Wybiorę „Komputer”, ale zachęcam Cię, abyś wykonał analizę dla obydwu urządzeń, gdyż wyniki, jak i punktacja mogą Cię naprawdę zdziwić.
Dodatkowo, do wyboru mamy wszystkie możliwości testów, które mogą zostać wykonane. Pozostawię wszystkie zaznaczone, aby pokazać Ci możliwości tego narzędzia.
Na koniec konfiguracji narzędzia Lighthouse, zanim jeszcze przejdziesz do wykonania analizy, upewnij się, że posiadasz w przeglądarce adres do właściwego serwisu, który chcesz przeanalizować.
Jeśli jesteś gotowy, kliknij przycisk „Analizuj wczytanie strony”, aby rozpocząć proces analizy. Czas trwania jest uzależniony od trybu, ilości wybranych kategorii, które mają zostać przeanalizowane, a także od wydajności Twojego komputera, na którym uruchomisz analizę.
Jak widać, autorzy narzędzia uraczyli nas ciekawostkami, które możemy przeczytać w trakcie oczekiwań na rezultaty. Bardzo ciekawa funkcja.
Finalnie, narzędzie wyświetli nam w pierwszej kolejności punktację w skali od 0 do 100, gdzie „0” oznacza najgorszy stopień optymalizacji, a „100” – najlepszy.
Warto zwiększyć obszar raportu z narzędzia Google Lighthouse. A jeśli masz możliwość wyświetlenia go na drugim monitorze – to świetnie.
Zanim przejdziemy do analizy dalszej części raportu, chciałbym zwrócić Twoją uwagę na ikonę z trzema kropkami, która po kliknięciu odkryje przed Tobą dodatkowe możliwości na zapisanie lub wydrukowanie wyników raportu. Świetną opcją jest możliwość otwarcia raportu w nowej karcie przeglądarki, po kliknięciu w przycisk „Otwórz w przeglądarce”. To doskonała możliwość na dużo czytelniejsze i przyjemniejsze odczytywanie wyników raportu.
Zwróć teraz uwagę na punktację, w którą można kliknąć, aby przejść do wybranej sekcji w raporcie. Na potrzeby tego odcinka SEO Podcastu przejdziemy przez wszystkie sekcje raportu, aby omówić informacje, które przedstawia nam wygenerowany raport.
Jeśli miałeś możliwość analizowania strony w narzędziu Google PageSpeed Insights, to zauważysz tu ten sam raport, dotyczący wyników dla wydajności, czyli podstawowych wskaźników internetowych „Core Web Vitals”. Jeśli jednak masz umiejętności programistyczne, aby od ręki nakładać poprawki w kodzie źródłowym i tym samym od razu sprawdzić wyniki, z pomocą przyjdzie Ci audyt wykonywany bezpośrednio w przeglądarce. Łącząc edycję kodu z jego analizą w jednym miejscu, uzyskasz dużo lepsze możliwości.
Mimo wszystko, jeśli nie jesteś programistą, to i tak warto skorzystać z możliwości narzędzia Google Lighthouse, gdyż jest wbudowane w przeglądarkę Google Chrome i wygenerowanie raportu odbywa się zdecydowanie dużo szybciej. Minusem jest tylko potrzeba wykorzystania wydajności własnego komputera, gdyż analiza jest wykonywana lokalnie.
Wróćmy do wyników w raporcie.
W sekcji „Wydajność” znajdziesz osiągnięte wartości dla wskaźników w podsekcji „Core Web Vitals”, czyli na przykład:
- First Contentful Paint (FCP) – czas do pierwszego renderowania treści;
- Time to Interactive (TTI) – moment, gdy strona staje się w pełni responsywna;
- Speed Index – Szybkość wyświetlania widocznej zawartości.
Poza wskaźnikami znajdziesz także podsekcję „Diagnostyka”, a w niej wartości dla:
- Critical Request Chains – lista zasobów spowalniających ładowanie (np. skrypty, czcionki);
- Ostrzeżenia o nieoptymalnych zasobach – nieskompresowane obrazy i nadmiarowy CSS/JavaScript.
Drugą podsekcją są „Rekomendacje”, w której znajdziesz informacje na temat kompresji obrazów, opóźnienia ładowania skryptów oraz wykorzystania pamięci podręcznej.
Następną sekcją są „Ułatwienia dostępu”. Tutaj znajdziesz trzy podsekcje:
- Wykryte błędy – jak na przykład brak zawartości znacznika „ALT” dla obrazów czy problemy z semantyką kodu HTML (np. brak nagłówków);
- Testy zgodności z WCAG – czyli ocena spełnienia wytycznych dostępności dla użytkowników z niepełnosprawnościami;
- Sugestie poprawy – jak na przykład poprawa struktury dokumentu.
Trzecią sekcją jest „Sprawdzone metody”, która zawiera takie podsekcje jak:
- Bezpieczeństwo – informująca o wygasłych certyfikatach SSL czy przestarzałych bibliotekach (np. jQuery);
- Optymalizacja techniczna – zgłaszająca najpopularniejsze błędy związane z brakami odpowiednich funkcji czy atrybutów w kodzie JS i HTML, które mogą przyspieszyć wczytywanie strony;
- Ostrzeżenia – informująca na przykład o błędach w konsoli JavaScript.
Ostatnią i najciekawszą z mojego punktu widzenia jako specjalisty SEO jest sekcja o wdzięcznej nazwie „SEO”, która składa się na następujące podsekcje:
- Podstawowe testy – informująca na przykład o braku meta tagów czy o problemie z responsywnością na urządzenia mobilne, a także zgłaszająca problemy związane ze strukturą nagłówków H1-H6;
- Problemy indeksowania – zgłaszająca problemy o blokadzie indeksacji dla wybranych lub wszystkich zasobów dla robotów indeksujących, których źródłem może być zawartość pliku „robots.txt” lub problemy związane z brakiem lub błędnymi linkami kanonicznymi oraz błędami w mapie witryny czy w znacznikach strukturalnych;
- Rekomendacje – zawierająca sugestie, które mogą wpłynąć na lepszą optymalizację i poprawić szybkość ładowania analizowanej strony.
Tryb „Okres”
Przejdźmy teraz do drugiego trybu narzędzia Google Lighthouse – „Okres”. Ten tryb uruchomię również dla tego samego urządzenia, jakim jest komputer.
Jako że tryb „Okres” będzie wymagał od nas interakcji, przejdę więc do zakładki kontaktowej, w której zawarty jest formularz kontaktowy, który będę chciał uzupełnić w trakcie analizy.
Rozpocznijmy pracę z tym trybem po naciśnięciu przycisku „Uruchom okres”.
Następnie wypełnię formularz kontaktowy. A na koniec kliknę w „Zakończ okres”, aby zakończyć zbieranie informacji o mojej interakcji ze stroną i na jej podstawie wygenerować raport.
Po zebraniu danych i wygenerowaniu raportu, przed naszymi oczami okaże się zupełnie nowa punktacja i to w podziale tylko na dwie sekcje: „Wydajność” oraz „Sprawdzone metody”. Pomówmy o informacjach zawartych w tych sekcjach.
Zacznijmy od sekcji „Wydajność”, która obejmuje:
- Metryki interakcji – Cumulative Layout Shift (CLS) podczas dynamicznych zmian układu (np. ładowanie treści po scrollowaniu); Total Blocking Time (TBT) związany z długotrwałymi zadaniami JavaScript blokującymi główny wątek; Czas odpowiedzi na akcje użytkownika (np. kliknięcia, przewijanie).
- Diagnostyka – Zużycie pamięci przez skrypty działające w tle podczas interakcji; Nadmiarowe renderowania lub duże elementy DOM generowane dynamicznie.
- Rekomendacje – Optymalizacja długotrwałych zadań JavaScript.
Drugą i ostatnią sekcją trybu „Okres” jest „Sprawdzone metody”, która obejmuje:
- Bezpieczeństwo i stabilność – Błędy w konsoli JavaScript występujące podczas interakcji; Przestarzałe API lub biblioteki używane w dynamicznie ładowanych skryptach.
- Optymalizacja techniczna – Błędne lub nadużywane funkcje;
- Kompatybilność – Problemy z obsługą przeglądarek ujawnione podczas interakcji.
Tryb „Migawka”
Przejdźmy teraz do trzeciego i tym samym ostatniego trybu narzędzia Google Lighthouse – „Migawka”. Ten tryb ponownie uruchomię dla urządzenia, jakim jest komputer.
Ten tryb można uruchomić od razu i nie wymaga żadnej interakcji z naszej strony. Wystarczy tylko upewnić się, że wybraliśmy odpowiednie urządzenie, a następnie pozostaje kliknąć „Analizuj stan strony”.
Po zakończeniu zbierania informacji czas na analizę wygenerowanego raportu.
W trybie „Migawka” ponownie wracamy do ocen w czterech kategoriach, którymi są „Wydajność”, „Ułatwienia dostępu”, „Sprawdzone metody” i „SEO” – sekcje te występują również w domyślnym trybie „Nawigacja”, który opisałem Ci jako pierwszy w kolejności. Różnica pomiędzy tymi trybami jest taka, że w obecnym trybie – „Migawka” – analizujemy konkretny stan strony (na przykład wygenerowany po wcześniejszej interakcji użytkownika), a nie tylko proces ładowania.
Opiszę Ci po kolei, jakie informacje znajdziesz w tym raporcie.
W sekcji „Wydajność” znajdziesz metryki dla podstawowych wskaźników internetowych, czyli „Core Web Vitals”.
W sekcji „Ułatwienia dostępu” znajdziesz ocenę zgodności z wytycznymi WCAG, obejmująca m.in. poprawne etykiety formularzy, kontrast kolorów i obsługę technologii asystujących. Czyli typowe udogodnienia dla osób niepełnosprawnych, które również na co dzień korzystają z internetu.
Przechodząc do sekcji „Najlepsze praktyki” możesz znaleźć tutaj wyniki, które oparte są o wcześniejsze sprawdzenie między innymi użycia protokołu HTTPS, unikania przestarzałych API czy prawidłowej optymalizacji obrazów i skryptów.
W ostatniej sekcji „SEO” znajdziesz ocenę kryteriów „PWA”, czyli skrótu od „Progressive Web App” – kategorii audytu, której zadaniem jest weryfikacja, czy audytowany serwis internetowy spełnia kluczowe wymagania nowoczesnych aplikacji webowych.
Do takich wymagań należą między innymi:
- Działanie offline, czyli możliwość działania w trybie offline;
- Responsywność, czyli poprawność wyświetlania na różnych urządzeniach;
- Instalowalność, czyli możliwość dodania strony do ekranu głównego urządzenia i działanie po instalacji;
- Bezpieczeństwo – analiza występowania protokołu HTTPS do szyfrowania danych;
- Szybkość ładowania – czyli analiza wydajności ładowania nawet przy słabym połączeniu internetowym poprzez optymalizację zasobów w postaci grafik i bibliotek JavaScript.
Dziękuję Ci za obejrzenie tego praktycznego odcinka SEO Podcastu!
Jeśli spodobała Ci się jego tematyka lub masz dodatkowe pytania, na które chciałbyś poznać odpowiedź, to zapraszam do sekcji komentarzy pod tym filmem.
Kliknij też łapkę w górę i zasubskrybuj ten kanał, abyś otrzymywał powiadomienia o kolejnych praktycznych filmach na kanale SEO Podcastu. Przypominam, że praktyczne odcinki są dostępne tylko w serwisie YouTube.
Zapraszam Cię także na kanał SEO Podcastu w aplikacji Spotify po odcinki teoretyczne, których nie usłyszysz na kanale na YouTube.
Zapraszam Cię również do sprawdzenia moich dwóch książek o pozycjonowaniu oraz mojego kursu SEO. Link do kursu SEO znajdziesz w opisie pod tym filmem.
Trzymaj się, cześć!
Poszukujesz agencji SEO w celu wypozycjonowania swojego serwisu? Skontaktujmy się!
