Audyt HTML w Lighthouse

Lighthouse to narzędzie do automatycznego audytowania wbudowane w Chrome DevTools (karta Audits), które ocenia stronę w kategoriach Performance, Accessibility, Best Practices, SEO i PWA. Uruchamia audytowaną stronę w przeglądarce, wykonuje pomiary i generuje praktyczne zalecenia.

W Chrome DevTools należy przejść do Lighthouse, wybrać kategorie, wybrać Desktop lub Mobile, a następnie kliknąć „Analyze page load”. Narzędzie ponownie ładuje stronę w czystym środowisku i w czasie krótszym niż minuta generuje raport.

Performance mierzy podstawowe wskaźniki internetowe i inne metryki szybkości. Accessibility sprawdza reguły zgodne z WCAG. Best Practices obejmuje bezpieczeństwo i nowoczesne standardy internetowe. SEO sprawdza znaczniki możliwe do zindeksowania. PWA weryfikuje możliwość instalacji i obsługę trybu offline.

Audyt dostępności wykrywa: brak tekstu alternatywnego alt, brak etykiet formularzy, niski kontrast kolorów, brak atrybutu języka, powielone identyfikatory id, brak punktów orientacyjnych, elementy możliwe do ustawienia fokusu bez obsługi klawiatury. Każdy problem zawiera odnośnik do szczegółowych wskazówek dotyczących naprawy.

Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Total Blocking Time (TBT) i Speed Index. Wynik każdej metryki jest obliczany i uwzględniany z odpowiednią wagą w ogólnym wyniku Performance. Lighthouse pokazuje, które elementy DOM mają największy wpływ na poszczególne metryki.

Sprawdza użycie HTTPS, błędy konsoli, proporcje obrazów, przestarzałe API i mieszaną zawartość. Audyt Best Practices wykrywa szeroki zakres przestarzałych lub niebezpiecznych wzorców, które należy unowocześnić.

Wykrywa brak opisu meta, brakujący lub powielony element <title>, problemy z robots.txt, odnośniki bez opisowego tekstu, brak znacznika meta viewport i problemy z hreflang. Audyt SEO Lighthouse należy połączyć z rzeczywistym narzędziem do audytu SEO (Ahrefs, Screaming Frog) w celu przeprowadzenia analizy na poziomie treści.

Sprawdza wszystkie wymagania dotyczące instalowalności: HTTPS, prawidłowy manifest z minimalnym zestawem pól, zarejestrowany service worker, znacznik viewport i ikony. Przed uruchomieniem aplikacji jako instalowalnej należy naprawić wszystkie błędy audytu PWA.

Narzędzia Lighthouse CLI i Lighthouse CI integrują audyty z CI/CD. Dla każdego PR-a Lighthouse jest uruchamiany dla wdrożonej wersji podglądowej; akcja kończy się niepowodzeniem, jeśli wyniki spadną poniżej ustalonych progów. Zapobiega to cichym regresjom w zakresie dostępności, wydajności i SEO.

Raporty Lighthouse można zapisywać jako JSON i porównywać programowo: śledzić wynik LCP w czasie, aby wykrywać regresje, porównywać dwa PR-y w celu sprawdzenia, który z nich zmienił poszczególne metryki, oraz wysyłać alerty po przekroczeniu progów. Dane mają strukturę przystosowaną do użycia w narzędziach.

Lighthouse wykonuje test syntetyczny — działa w kontrolowanym środowisku, a nie na rzeczywistych użytkownikach. Należy połączyć go z narzędziami do monitorowania rzeczywistych użytkowników (RUM), które śledzą faktyczne doświadczenia użytkowników. Testy syntetyczne wcześnie wykrywają regresje, a RUM potwierdza, że użytkownicy rzeczywiście odczuwają poprawę.

Niektóre audyty oznaczają wzorce, których w określonych kontekstach nie da się uniknąć. Należy dokumentować wszystkie celowe wyjątki, dodawać je do listy ignorowanych elementów Lighthouse CI i okresowo je ponownie oceniać w miarę rozwoju platformy. Należy unikać ogólnego ustawienia „ignore all” — niweczy ono cel automatycznego audytowania.

Wyniki Lighthouse należy traktować jako cel ciągłego doskonalenia, a nie jednorazową poprawkę. Warto wypracować kulturę sprawdzania wyniku przy każdym PR-ze, natychmiastowego reagowania na regresje i stopniowego podnoszenia poziomu bazowego. Dzięki takiej dyscyplinie większość zespołów obserwuje systematyczny wzrost wyników na przestrzeni miesięcy.

Dlaczego audyty syntetyczne Lighthouse należy łączyć z monitorowaniem rzeczywistych użytkowników (RUM)?

Lighthouse audytuje stronę w kategoriach Performance, Accessibility, Best Practices, SEO i PWA. Do jednorazowych kontroli należy uruchamiać go z poziomu Chrome DevTools, a do ciągłej integracji — Lighthouse CI. Należy reagować na regresje przy każdym PR-ze, budować kulturę doskonalenia opartego na pomiarach oraz łączyć audyty syntetyczne z monitorowaniem rzeczywistych użytkowników, aby potwierdzić, że usprawnienia laboratoryjne przynoszą korzyści rzeczywistym użytkownikom.