Lighthouse — jak czytać wynik i co naprawdę poprawiać
Audyt Lighthouse w 5 minut, w 30 minut i w 3 godziny. Czym różni się Performance score od realnego doświadczenia użytkownika i które metryki warto śledzić co tydzień.
Lighthouse to wbudowane w Chrome narzędzie audytu — dostępne za jedno kliknięcie w DevTools. Daje wynik 0-100 w pięciu kategoriach. Problem w tym, że większość firm patrzy tylko na liczbę, nie wiedząc co kryje się pod spodem.
Pięć kategorii Lighthouse
- Performance — szybkość ładowania, oparta głównie na CWV
- Accessibility — dostępność, ale tylko to co da się sprawdzić automatycznie (ok. 30% problemów WCAG)
- Best Practices — HTTPS, brak konsolowych błędów, aktualne biblioteki
- SEO — meta tagi, alt teksty, mobile friendliness
- PWA — opcjonalne, dla aplikacji typu Progressive Web App
Lab data vs Field data
Lighthouse to lab data — testy w kontrolowanych warunkach, na symulowanym powolnym łączu. Realne doświadczenie użytkowników to field data z PageSpeed Insights (CrUX) lub własnego RUM. Różnice bywają znaczne. Klient z szybkim światłowodem nie odczuje problemu, który Lighthouse pokazuje na czerwono.
Co poprawiać w pierwszej kolejności
- Diagnostyka „Avoid huge network payloads" — obrazy, fonty, biblioteki JS
- „Eliminate render-blocking resources" — CSS i JS w <head> bez async/defer
- „Properly size images" — wysyłanie 2000px obrazka do 400px slotu to klasyk
- „Serve images in modern formats" — WebP/AVIF zamiast JPG/PNG
- „Reduce unused JavaScript" — wyrzucanie nieużywanych bibliotek
Czego Lighthouse NIE sprawdza
- Realnej dostępności (czy strona działa ze screen readerem)
- Jakości treści i UX-u
- Bezpieczeństwa aplikacji (tylko nagłówki HTTP)
- Konwersji i biznesu
Lighthouse 100/100 ze słabym UX-em sprzeda mniej niż 70/100 z dobrym. Wynik to wskazówka, nie cel sam w sobie.
Praktyczny rytm audytów
- Co tydzień: automatyczny audyt w CI (np. Lighthouse CI lub Calibre) — alert przy regresji
- Co miesiąc: manualny przegląd Field data w Search Console
- Co kwartał: pełny audyt techniczny z konsultacją UX
Masz pytania?
Pomożemy wdrożyć rozwiązania z tego artykułu na Twojej stronie. Bezpłatna konsultacja.
Skontaktuj się z nami