Nowości w Lighthouse 8.4

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 CLI) lub jako rozszerzenie 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 linii 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 wczytywania obrazów znajdujących się poza ekranem, aby nie przeszkadzały one w wczytywaniu treści znajdujących się w ramce.

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 kategorii „Sprawdzone metody”, ale w wersji 8.4 został on również uwzględniony w kategorii „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 odpowiadać na pierwsze kliknięcie. Oznacza to nieudany FID wynoszący kilkaset milisekund.

Kontrola widoku na urządzeniu mobilnym 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 Lighthouse, jeśli nie znajdzie się żaden widok, zalecimy dodanie widoku treści takiego jak ten:

<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: