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.
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.
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:
- Zgłoś problem lub prześlij opinię, korzystając z repozytorium Lighthouse na GitHubie.
- Skontaktuj się z zespołem Lighthouse na Twitterze @____lighthouse.