Narzędzie Google do inspekcji witryn, Lighthouse, zostało właśnie wydane w wersji 6.0. Lighthouse 6.0 daje programistom więcej możliwości w zakresie diagnostyki, aby poprawić komfort korzystania z ich stron. Nowa wersja zawiera wiele zmian, m.in. Nowe dane, CI Lighthouse, nowe audyty czy rozszerzenie przeglądarki.

Wprowadzenie nowych wskaźników

Lighthouse 6.0 wprowadza trzy nowe wskaźniki do raportu. Wiąże się to z wprowadzeniem przez zespół Google Chrome wskaźników Core Web Vitals, o których wspominaliśmy przy nowej wersji Next.js.

Largest Contentful Paint (LCP)

Pierwszy z nich jest miarą odczuwanego obciążenia. Daje programistom sygnał jak szybko użytkownik jest w stanie zobaczyć zawartość strony. Jest to moment podczas ładowania strony, kiedy użytkownik widzi podstawową lub największą zawartość strony. Wskaźnik LCP jest pewnym uzupełnieniem FCP – First Contentful Paint, który uwzględnia tylko początek ładowania. LCP powinien wystąpić w ciągu 2,5 sekundy od pierwszego załadowania strony, aby zapewnić dobrą obsługę.

Cumulative Layout Shift (CLS)

Kolejny – CLS – jest wskaźnikiem pomiaru stabilności wizualnej. Określa, o ile zmienia się wizualnie zawartość strony. Podczas testów CLS jest mierzony do końca ładowania strony. Natomiast w praktyce mierzy się go do pierwszej reakcji użytkownika lub uwzględnienia jego wszystkich danych wejściowych. Niski poziom CLS sygnalizuje programistom brak nieuzasadnionych zmian treści. Strony powinny utrzymywać CLS poniżej 0,1, aby wynik był uznany za dobry.

Total Blocking Time (TBT)

Ostatni nowy wskaźnik określa ilościowo czas reakcji na obciążenie. Daje miarę całkowitego czasu, podczas którego główny wątek był blokowany na tyle, żeby zapobiec reakcji wejścia. Dodatkowo TBT koreluje z wskaźnikiem FID (Opóźnienie pierwszego wejścia), co stanowi istotną funkcję sieciową.

Kalkulator punktacji

W Lighthouse 6.0 znajduje się także kalkulator punktacji, który ma na celu pomóc zbadać punktacje wydajności. Oprócz tego porównuje wyniki z Lighthouse v.5 i v.6.

Nowe audyty

Wśród nowych audytów można znaleźć m.in. Maskable icon, a także Charset declaration. Pierwszy z nich jest nowym formatem ikon, który powoduje, że PWA wygląda właściwie na wszystkich typach urządzeń.  Został on wprowadzony, aby sprawdzić, czy plik manifest.json obsługuje ten nowy format. Drugi z kolei – Deklaracja Charset – określa jakiego kodowania znaków należy użyć do interpretacji dokumentu HTML. Stąd audyt weryfikuje, czy strona ma prawidłowe kodowanie znaków i jest zdefiniowana wcześnie i z góry.

CI Lighthouse

Wraz z wprowadzeniem nowej wersji ogłoszono, że Lighthouse CI ma natywną obsługę wielu dostawców CI, m.in. GitLab, Github Actions, Circle czy Travis.

Symulacja mobilna

W warunkach mobilnych bardziej widoczne są problemy z wydajnością. Często jednak programiści nie testują działania swoich stron na urządzeniach mobilnych. Emulacja mobilna w Lighthouse 6.0 składa się z tworzenia wolnych warunków sieciowych i procesorowych, a także z emulacji ekranu urządzenia.

Linki do lokalizacji źródłowej

W przypadku znalezienia przez Lighthouse problemów można je prześledzić do określonego wiersza kodu. W raporcie znajdziemy wtedy odpowiedni plik i wiersz. Teraz, kliknięcie lokalizacji określonych w raporcie, otworzy odpowiednie pliki w panelu Źródła. Ułatwi to znacznie eksplorację w DevTools.

Podsumowanie

Zmiany wprowadzone w Lighthouse 6.0 pozwalają na poprawę wydajności stron. Prawie 8% witryn doświadczyło poprawy wyniku z powodu zmian w implementacji metryk. Lighthouse 6.0 jest dostępny natychmiast na Npm i na Chrome Canary .

Źródła:

• https://web.dev/lighthouse-whats-new-6.0/
• https://dev.to/adriansandu/lighthouse-6-0-what-s-new-in-chrome-83-highlights-of-ms-build-2020-front-end-news-4eoo
• https://github.com/GoogleChrome/lighthouse/releases
• https://www.c-sharpcorner.com/news/lighthouse-60-brings-new-metrics
• https://developers.google.com/web/tools/lighthouse