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 Chrome i Firefox). Korzystają z niego liczne usługi Google, w tym web.dev/measure i PageSpeed 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 kolejce 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.
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 propozycji i prośbie o przeprowadzenie implementacji.
Ustaw widoczny obszar dla urządzeń 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 formatu mobilnego.<meta name="viewport">
W praktyce oznacza to, że przeglądarka musi poczekać nawet 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, że wartość FID wynosi kilkaset milisekund.
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 takiego jak ten:
<meta name="viewport" content="width=device-width">
Więcej informacji znajdziesz w problemie z propozycją i 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:
- Zgłoś problem lub prześlij opinię za pomocą repozytorium Lighthouse na GitHub.
- Skontaktuj się z zespołem Lighthouse na Twitterze @____lighthouse.