Nowości w Lighthouse 8.4

Brendan Kenny
Brendan Kenny
Lighthouse to automatyczne narzędzie do przeprowadzania audytów witryn, które pomaga deweloperom w ulepszaniu witryn pod kątem wygody użytkowników. Jest ona dostępna w Narzędziach deweloperskich Chrome, npm (jako moduł Node i interfejs wiersza poleceń) oraz jako rozszerzenie do przeglądarki (w ChromeFirefox). Korzystają z niego liczne usługi Google, w tym web.dev/measurePageSpeed Insights.

Lighthouse 8.4 jest już dostępny w wierszu poleceń i w Chrome Canary. Funkcja ta zostanie dodana do wersji stabilnej Chrome w Chrome 95 i w ciągu tygodnia będzie dostępna w PageSpeed Insights.

Aby wypróbować interfejs wiersza poleceń Lighthouse Node, użyj tych poleceń:

npm install -g lighthouse
lighthouse https://www.example.com --view

Pełną listę zmian znajdziesz w historii zmian wersji 8.4.

Nowe audyty

Nie ładuj obrazów największego wyrenderowania treści w trybie leniwym

Ładowanie opóźnione obrazów może być skutecznym sposobem na odroczenie ładowania obrazów, które nie są widoczne na ekranie, aby nie zakłócały one ładowania treści znajdujących się nad obszarem roboczym.

Jeśli jednak element LCP strony to obraz, jego ładowanie opóźnione może mieć znaczący negatywny wpływ na LCP. Przeglądarka może umieścić obraz w kole i najpierw pobrać inne zasoby, zamiast nadać obrazowi priorytet i natychmiast go pobrać. Ostatnie badanie dotyczące ładowania opóźnionego w WordPressie wykazało, że w przypadku niektórych witryn LCP może się poprawić nawet o 15%, jeśli obrazy w początkowym widoku nie są ładowane opóźnione.

Audyt LCP z opóźnionym ładowaniem w raporcie Lighthouse

Lighthouse wykryje teraz, czy element LCP był obrazem wczytywanym leniwie, i zaleci usunięcie z niego atrybutu loading.

Więcej informacji znajdziesz w wstępnej propozycjipull request dotyczącym implementacji.

Ustaw widoczny obszar na urządzeniach mobilnych, aby skrócić opóźnienie pierwszego wejścia

Od lat audyt viewport znajduje się w sekcji „Sprawdzone metody”, ale w wersji 8.4 znajdziesz go też w sekcji „Skuteczność”.

Wiele przeglądarek mobilnych obsługuje funkcję „podwójne kliknięcie, aby powiększyć”, aby umożliwić użytkownikom łatwe powiększanie treści nieprzeznaczonych do wyświetlania na ekranie urządzenia mobilnego, czyli treści bez wyraźnego oznaczenia dla urządzeń mobilnych.<meta name="viewport"> W praktyce oznacza to, że przeglądarka musi poczekać do 300 ms po kliknięciu przez użytkownika, aby sprawdzić, czy nastąpi drugie kliknięcie. W tym czasie strona nie może reagować na pierwsze kliknięcie. Oznacza to nieudany FID wynoszący kilkaset milisekund.

Kontrola widoku na urządzeniach mobilnych w raporcie Lighthouse

W niedawnym badaniu danych z archiwum HTTP ponad połowa witryn, które otrzymały w Lighthouse ocenę 90 lub wyższą, ale nie spełniały co najmniej jednego z podstawowych wskaźników internetowych, nie miała ustawionego widoku na urządzeniu mobilnym i nie spełniała kryterium FID. W związku z tym w sekcji dotyczącej wydajności w Lighthouse, jeśli nie znajdzie się żaden widok, pojawi się zalecenie dodania widoku treści:

<meta name="viewport" content="width=device-width">

Więcej informacji znajdziesz w problemie z propozycjąprośbie o przeniesienie do implementacji.

Kontakt z zespołem Lighthouse

Aby omówić nowe funkcje, zmiany w wersji 8.4 lub cokolwiek innego związanego z Lighthouse: