Nowości w Lighthouse 8.4

Brendan Kenny
Brendan Kenny
Lighthouse to zautomatyzowane narzędzie do audytu witryn, które pomaga deweloperom w diagnostyce i wykorzystywaniu możliwości, aby poprawić wrażenia użytkowników. Jest ono dostępne w Narzędziach deweloperskich w Chrome, npm (jako moduł węzła i interfejs wiersza poleceń) lub jako rozszerzenie przeglądarki (w Chrome i Firefoksie). Obsługuje wiele usług Google, w tym web.dev/measure i PageSpeed Insights.

Narzędzie Lighthouse w wersji 8.4 jest dostępne bezpośrednio w wierszu poleceń i w Chrome Canary. Nowa wersja zostanie wprowadzona w wersji stabilnej Chrome 95, a w ciągu tygodnia zostanie udostępniona w narzędziu PageSpeed Insights.

Aby wypróbować interfejs wiersza poleceń węzła w Lighthouse, użyj tych poleceń:

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

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

Nowe audyty

Nie leniwie ładuj największego wyrenderowania treści

Leniwe ładowanie obrazów to skuteczny sposób opóźniania wyświetlania obrazów poza ekranem, dzięki czemu nie zakłócają one wczytywania treści znajdujących się w części strony widocznej na ekranie.

Jeśli jednak element LCP strony jest obrazem, leniwe ładowanie może mieć znaczny negatywny wpływ na LCP. Przeglądarka może najpierw umieścić obraz w kolejce i pobrać inne zasoby, zamiast traktować go priorytetowo. Przeprowadzone niedawno badanie dotyczące leniwego ładowania w WordPressie wykazało, że w przypadku niektórych witryn współczynnik LCP może wzrosnąć nawet o 15%, jeśli obrazy w początkowym widocznym obszarze nie będą ładowane leniwie.

Kontrola LCP w czasie leniwego ładowania 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 pierwotnej ofercie pakietowej i w żądaniu pull dotyczącym wdrożenia.

Ustaw widoczny obszar na urządzeniach mobilnych, by zwiększyć opóźnienie przy pierwszym działaniu

Audyt viewport od lat jest częścią kategorii Sprawdzone metody, a w wersji 8.4 można uwzględnić tę poradę również w kategorii Skuteczność.

Wiele przeglądarek mobilnych obsługuje funkcję powiększania dwukrotnym dotknięciem. aby umożliwić użytkownikom łatwe powiększanie treści nieprzeznaczonych na ekrany urządzeń mobilnych, czyli treści, które nie zawierają wyraźnego atrybutu <meta name="viewport"> mobilnego. W praktyce oznacza to, że przeglądarka musi odczekać nawet 300 ms od kliknięcia przez użytkownika, aby sprawdzić, czy nastąpi drugie kliknięcie. W tym czasie strona nie może odpowiedzieć na to kliknięcie. To przekłada się na niepowodzenie FID wynoszące kilkaset milisekund.

Audyt widocznego obszaru na urządzeniach mobilnych w raporcie Lighthouse

Zgodnie z niedawnym badaniem danych z archiwum HTTP ponad połowa witryn, które otrzymały w Lighthouse co najmniej 90, ale nie zaliczyło co najmniej 1 podstawowego wskaźnika internetowego, nie miało ustawionego widocznego obszaru dla urządzeń mobilnych i nie miały one FID. Dlatego w sekcji Wydajność narzędzia Lighthouse będzie teraz zalecać dodanie widocznego obszaru w sytuacji, gdy nie zostanie znaleziony żaden taki obszar jak poniżej:

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

Więcej informacji znajdziesz w artykułach o problemach z ofertą pakietową i żądaniu pull dotyczącym implementacji.

Kontakt z zespołem Lighthouse

Jeśli chcesz porozmawiać o nowych funkcjach, zmianach w wersji 8.4 lub innych kwestiach związanych z Lighthouse: