Co nowego w Lighthouse 6.0

Nowe dane, aktualizacja wyniku skuteczności, nowe audyty i inne informacje.

Connor Clark

Dzisiaj udostępniamy Lighthouse w wersji 6.0.

Lighthouse to automatyczne narzędzie do audytu witryn, pomaga deweloperom w udostępnianiu możliwości i danych diagnostycznych, które mogą poprawić wrażenia użytkowników korzystających z witryn. Jest 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 oraz Firefox). Wiele usług Google w tym web.dev/measure i PageSpeed Statystyki.

Narzędzie Lighthouse w wersji 6.0 jest dostępne od razu w npm i w Chrome Wersja Canary Inne usługi Google korzystające z Lighthouse otrzymać aktualizację do końca miesiąca. Pojawi się w stabilnej wersji Chrome w wersji 84 (w połowie lipca).

Aby wypróbować interfejs wiersza poleceń węzła w Lighthouse, użyj tych poleceń: bash npm install -g lighthouse lighthouse https://www.example.com --view

Ta wersja Lighthouse zawiera wiele zmian, znajdziesz w historii zmian wersji 6.0. Zagadnienia omówionych w tym artykule.

• Nowe dane
• Aktualizacja wyniku skuteczności
• Nowe kontrole
• Lighthouse CI
• Zmiana nazwy panelu Narzędzi deweloperskich w Chrome
• Emulacja urządzenia mobilnego
• Rozszerzenie przeglądarki
• Budżety
• Linki do lokalizacji źródłowej
• Na horyzoncie
• Pozdrawiam

Nowe dane

Lighthouse w wersji 6.0 wprowadza do raportu 3 nowe dane. Dwa nowe rodzaje danych: największe Wyrenderowanie treści (LCP) i skumulowane przesunięcie układu (CLS) to laboratoryjne implementacje Core Web Wskaźniki życiowe.

Największe wyrenderowanie treści (LCP)

Największe wyrenderowanie treści (LCP) to pomiar postrzeganego wczytywania. i uzyskiwanie dodatkowych informacji. Wskazuje moment wczytywania strony, w którym została wczytana główna lub „największa” treść. będą widoczne dla użytkownika. LCP to ważne uzupełnienie FCP (Pierwsze wyrenderowanie treści), rejestruje sam początek wczytywania. Wartość LCP dostarcza deweloperom informacji o tym, aby użytkownik mógł zobaczyć zawartość strony. Wynik LCP niższy niż 2,5 sekundy to uznanych za „dobre”.

Więcej informacji znajdziesz w tym szczegółowym materiale poświęconym LCP przygotowany przez Paula Irelanda.

Skumulowane przesunięcie układu (CLS)

Skumulowane przesunięcie układu (CLS) to wartość określająca stabilność wizualną. it określa, jak bardzo zmienia się wizualnie treść strony. Niski wynik CLS jest sygnałem dla: dla deweloperów, że ich treści nie ulegają nadmiernym zmianom; wynik CLS poniżej 0,10 jest uznanych za „dobre”.

CLS w środowisku laboratoryjnym jest mierzone do końca wczytywania strony. W terenie mierzyć CLS do pierwszej interakcji użytkownika lub z uwzględnieniem wszystkich danych wejściowych użytkownika.

Aby dowiedzieć się więcej, obejrzyj ten film z omówieniem CLS przygotowany przez Annie Sullivan.

Łączny czas blokowania (TBT)

Całkowity czas blokowania (TBT) określa czas reakcji na wczytanie i mierzy łączny czas, przez jaki wątek główny był zablokowany na tyle długo, aby uniemożliwić reagowanie na dane wejściowe. TBT mierzy łączny czas między pierwszym wyrenderowaniem treści (FCP) a czasem do pełnej interaktywności (TTI). Jest to wskaźnik towarzyszący w TTI i wnosi więcej niuansów do ilościowego pomiaru aktywności w głównym wątku który uniemożliwia użytkownikowi interakcję ze stroną.

Dodatkowo TBT dobrze koreluje z wskaźnikiem pola Opóźnienie przy pierwszym działaniu. (FID), czyli Core Web Vitals.

Aktualizacja wyniku skuteczności

Wynik wydajności w Lighthouse jest obliczany na podstawie ważone połączenie wielu wskaźników służących do podsumowania szybkości strony. Wzór na wynik skuteczności 6.0 co dalej.

Faza	Nazwa danych	Waga wskaźnika
Wczesne (15%)	First Contentful Paint (FCP)	15%
Średni (40%)	Wskaźnik prędkości (SI)	15%
	Największe wyrenderowanie treści (LCP)	25%
Opóźnione (15%)	Czas do pełnej interaktywności (TTI)	15%
Główny wątek (25%)	Łączny czas blokowania (TBT)	25%
Przewidywalność (5%)	Skumulowane przesunięcie układu (CLS)	5%

Chociaż dodaliśmy 3 nowe rodzaje danych, usunęliśmy 3 stare: Pierwsze wyrenderowanie elementu znaczącego, Pierwszy CPU bezczynny i Maksymalny potencjalny FID. Wagi pozostałych wskaźników zostały zmodyfikowane do kładą nacisk na interaktywność wątku głównego i przewidywalność układu.

Dla porównania przedstawiamy ocenę wersji 5:

Faza	Nazwa danych	Waga
Wczesne (23%)	First Contentful Paint (FCP)	23%
Średni (34%)	Wskaźnik prędkości (SI)	27%
	Pierwsze wyrenderowanie elementu znaczącego (FMP)	7%
Zakończono (46%)	Czas do pełnej interaktywności (TTI)	33%
	Pierwszy bezczynny procesor (FCI)	13%
Wątek główny	Maksymalny potencjalny FID	0%

Najważniejsze informacje o zmianach punktacji w Lighthouse w wersjach 5 i 6:

• Waga firmy TTI została obniżona z 33% do 15%. To była bezpośrednia reakcja użytkownika opinii na temat zmienności TTI, a także niespójności w optymalizacji danych, co prowadzi do które poprawiły wrażenia użytkownika. TTI to nadal przydatny sygnał, gdy strona jest w pełni interaktywne, jednak z TBT jako dopełnianie – zmienność jest ograniczona. Mamy nadzieję, że zmiana tego wyniku sprawi, że deweloperzy będą skuteczniej zachęcani do optymalizacji interaktywność użytkowników.
• Waga FCP została zmniejszona z 23% do 15%. Pomiar tylko wtedy, gdy pierwszy piksel jest nie dało nam pełnego obrazu. Łączy to z pomiarami, gdy użytkownicy mogą aby zobaczyć, na czym im najbardziej zależy (LCP), lepiej odzwierciedla proces wczytywania.
• Maksymalna wartość potencjalnego FID została wycofana. Już ich nie widać w raporcie, ale są wciąż dostępne w pliku JSON. Aby ocenić interaktywność, warto teraz przyjrzeć się TBT. zamiast mpFID.
• Pierwsze wyrenderowanie elementu znaczącego zostało wycofane. Te dane były zbyt zróżnicowane i nie miały dla nich sensu do standaryzacji, ponieważ implementacja jest specyficzna dla elementów wewnętrznych renderowania w Chrome. Choć niektóre zespoły uznają, że czas FMP w ich witrynie jest przydatny, dane nie będą otrzymywać dodatkowe ulepszenia.
• Proces Pierwszy bezczynny procesor został wycofany, ponieważ nie różni się on wystarczająco od TTI. TBT i TTI są najważniejszymi wskaźnikami dotyczącymi interaktywności.
• Waga CLS jest stosunkowo niska, ale planujemy zwiększyć ją w przyszłej wersji głównej.

Zmiany w wynikach

Jak te zmiany wpływają na wyniki rzeczywistych witryn? Opublikowaliśmy analiza zmienia się wynik za pomocą dwóch zbiorów danych: ogólnego zbioru witryn oraz zestaw witryn statycznych stworzona przy użyciu Eleventy. Podsumowując, ok. 20% witryn zauważa zauważalnie wyższy poziom ok. 30% – niemal 30% klientów, a w przypadku około 50% – spadek o co najmniej pięć punktów.

Zmiany wyniku można podzielić na 3 główne komponenty:

• zmiany wagi
• poprawki błędów w podstawowych implementacjach wskaźników
• indywidualne zmiany krzywej wyniku

Większość ocen wynikała głównie ze zmian wagowych wyników oraz wprowadzenia 3 nowych rodzajów danych. zmian. Nowe wskaźniki, których deweloperzy jeszcze nie zoptymalizowali pod kątem znaczenia w wersji 6. . Średni wynik wydajności korpusu testowego w wersji 5 wyniósł około 50, ale średnie wyniki nowego wskaźnika czasu blokowania i największego wyrenderowania treści wyniosły około 30. Łącznie te 2 rodzaje danych stanowią 50% wagi w wyniku wydajności w wersji 6 Lighthouse, więc naturalnie u dużego odsetka witryn nastąpił spadek.

Poprawki błędów w obliczeniach podstawowych wskaźników mogą powodować różne wyniki. Ma to wpływ ale w niektórych sytuacjach mogą mieć spore znaczenie. Ogólnie około 8% witryn poprawiła się wynik w wyniku zmian implementacji danych i u około 4% witryn z powodu zmian w implementacji wskaźników. Te poprawki nie miały wpływu na około 88% witryn.

Indywidualne zmiany krzywej wyniku również w niewielkim stopniu miały wpływ na ogólną zmianę wyniku. Śr okresowo upewnia się, że krzywa wyniku jest zgodna z zaobserwowanymi danymi w HTTPArchive. . Wykluczanie witryn, których dotyczą znaczące zmiany w implementacji (drobne) dostosowania krzywej wyników poszczególnych danych poprawiły wyniki o około 3% witryn obniżył wyniki o około 4% witryn. Około 93% witryn nie miało wpływu na tę zmianę.

Kalkulator punktów

Opublikowaliśmy kalkulator punktowy, aby ułatwić możesz sprawdzić wskaźnik wydajności. Kalkulator umożliwia też porównanie wersji 5 i Lighthouse 6 punktów. Gdy przeprowadzisz audyt w Lighthouse 6.0, raport będzie zawierał link do kalkulatora z wynikami.

Wielkie podziękowania dla Any Tudor za ulepszenie wskaźnika!

Nowe audyty

Nieużywany JavaScript

Wykorzystujemy kod w Narzędziach deweloperskich pokrycie według nowego audytu: Unused JavaScript.

Ta kontrola nie jest całkowicie nowa: została dodana w w połowie 2017 r., ale ze względu na narzut związany z wydajnością został domyślnie wyłączony, aby narzędzie Lighthouse było tak szybkie, jak to tylko możliwe. Zbieranie danych dotyczących pokrycia jest teraz znacznie wydajniejsze, więc domyślnie.

Audyty ułatwień dostępu

Narzędzie Lighthouse wykorzystuje wspaniałą bibliotekę axe-core kategorii ułatwień dostępu. W Lighthouse 6.0 dodaliśmy te audyty:

• aria-hidden-body
• aria-hidden-focus
• aria-input-field-name
• aria-toggle-field-name
• form-field-multiple-labels
• kolejność-nagłówków,
• aktywny identyfikator-zduplikowanego-identyfikatora
• aria z duplikatem identyfikatora

Ikona z możliwością maskowania

Ikony wielokrotnego użytku to nowy format ikon, który tworzy ikony aplikacji PWA. będą wyglądać świetnie na każdym urządzeniu. Aby Twoja aplikacja PWA wyglądała jak najlepiej, wprowadziliśmy nową kontrolę, aby sprawdzić, czy plik manifest.json obsługuje ten nowy format.

Deklaracja zbioru znaków

Element meta charset określa, jakie kodowanie znaków ma zostać użyte. interpretacji dokumentu HTML. Jeśli brakuje tego elementu lub został on zadeklarowany pod koniec przeglądarki używają wielu algorytmów heurystycznych do odgadnięcia, jakie kodowanie powinno zostać użyte. Jeśli przeglądarka błędnie odgaduje i znajduje spóźniony element meta charset, parser wysyła zazwyczaj całą wykonaną do tej pory pracę i zaczyna się od nowa, powodując negatywne wrażenia u użytkowników. Ten nowy Audyt sprawdza, czy kodowanie znaków na stronie jest prawidłowe oraz prawidłowo zdefiniowane.

Lighthouse (CI)

Na CDS ubiegłego listopada ogłosiliśmy wprowadzenie Lighthouse CI, czyli węzła open source Interfejs wiersza poleceń i serwer, który śledzi wyniki Lighthouse po każdym zatwierdzeniu w trybie ciągłej integracji i od czasu premiery alfa upłynęło długą drogę. Lighthouse CI obsługuje teraz dla wielu dostawców CI, takich jak Travis, Circle, GitLab i GitHub Actions. Gotowy do wdrożenia obrazy Dockera sprawiają, że konfiguracja a teraz kompleksowy wygląd panelu pozwala odzwierciedlić trendy dotyczące wszystkich kategorii i wskaźników. w Lighthouse.

Już dziś zacznij korzystać w swoim projekcie z Lighthouse CI, postępując zgodnie z naszymi przewodnika dla początkujących.

Zmiana nazwy panelu Narzędzi deweloperskich w Chrome

Zmieniliśmy nazwę panelu Audyty na panel Lighthouse. Dość już powiedzenia!

W zależności od rozmiaru okna Narzędzi deweloperskich panel jest prawdopodobnie za przyciskiem ». Możesz przeciągnąć kliknij kartę, aby zmienić ich kolejność.

Aby szybko wyświetlić panel za pomocą polecenia Command

1. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
2. Naciśnij Control+Shift+P (lub Command+Shift+P na Macu), aby otwórz menu Command.
3. Zacznij pisać „Lighthouse”.
4. Naciśnij Enter.

Emulacja urządzenia mobilnego

Narzędzie Lighthouse jest skoncentrowane na urządzeniach mobilnych. Problemy z wydajnością są bardziej widoczne przy typowym poziomie w warunkach mobilnych, ale deweloperzy często ich nie testują. Właśnie dlatego domyślna opcja w Lighthouse używa emulacji mobilnej. Emulacja składa się z tych elementów:

• Symulowane warunki powolnego działania sieci i procesora (za pomocą silnika symulacji Lampion).
• Emulacja ekranu urządzenia (ta sama funkcja dostępna w Narzędziach deweloperskich w Chrome).

Od samego początku w Lighthouse jako urządzenia referencyjnego używano Nexus 5X. W ostatnich latach większość inżynierowie i inżynierowie używają Moto G4 do celów testowych. Latarnia morska podąża za przykładem a urządzenie referencyjne zmieniono na Moto G4. W praktyce ta zmiana nie jest zbyt zauważalna, a oto wszystkie zmiany, które strona internetowa może wykryć:

• Rozmiar ekranu został zmieniony z 412 x 660 na 360 x 640 pikseli.
• Ciąg znaków klienta użytkownika został nieco zmieniony – część dotycząca urządzenia, która wcześniej nazywała się Nexus 5 Build/MRA58N będzie teraz Moto G (4).

Od wersji Chrome 81 Moto G4 jest też dostępny na liście emulacji urządzeń w Narzędziach deweloperskich w Chrome.

Rozszerzenie do przeglądarki

Rozszerzenie Lighthouse do Chrome to wygodny sposób na lokalne uruchamianie Lighthouse. Obsługa była dość skomplikowana. Uznaliśmy, że korzystanie z panelu Lighthouse w Narzędziach deweloperskich w Chrome jest wygodniejsze (raport integruje się z innymi panelami), możemy zmniejszyć nakład pracy inżynieryjnej, upraszczając .

Rozszerzenie Lighthouse nie będzie uruchamiać go lokalnie. Zamiast tego korzysta teraz z narzędzia PageSpeed Insights. API. Zdajemy sobie sprawę, że będzie to nie stanowiłby jednak wystarczającego rozwiązania dla niektórych naszych użytkowników. Oto główne różnice:

• PageSpeed Insights nie może kontrolować niepublicznych witryn, ponieważ jest uruchamiana zdalnie na serwerze, a nie na lokalnej instancji Chrome. Jeśli chcesz przeprowadzić audyt niepublicznej witryny, użyj w panelu Lighthouse w Narzędziach deweloperskich lub w interfejsie wiersza poleceń Node.
• Nie gwarantujemy, że PageSpeed Insights będzie korzystać z najnowszej wersji Lighthouse. Jeśli chcesz użyć funkcji w najnowszej wersji, użyj interfejsu wiersza poleceń Node. Rozszerzenie przeglądarki zostanie zaktualizowane w ciągu 1–2 tygodni od premiery.
• PageSpeed Insights to interfejs API Google. Korzystanie z niego oznacza akceptację Warunków korzystania z interfejsu API Google posprzedażna. Jeśli nie chcesz lub nie możesz zaakceptować warunków korzystania z usługi, użyj panelu Lighthouse w Narzędziach deweloperskich. lub interfejsu wiersza poleceń węzła.

Dobra wiadomość jest taka, że uproszczenie historii produktu pozwoliło nam skupić się na innych działaniach inżynieryjnych. . Dlatego udostępniliśmy Lighthouse Firefox .

Budżety

W Lighthouse w 5.0 wprowadzono budżety wydajności, które obsługiwane jest dodawanie progów dla ile zasobów każdego typu (np. skrypty, obrazy czy kod css), które może wyświetlać strona.

Dodanie Lighthouse w wersji 6.0 obsługują dane dotyczące budżetu, Możesz więc ustawić progi dla konkretnych wskaźników, takich jak FCP. Obecnie budżety są dostępne tylko w interfejsie wiersza poleceń Node i CI Lighthouse.

Linki do lokalizacji źródłowej

Niektóre problemy ze stroną wykrywane w Lighthouse można znaleźć w konkretnym wierszu w kodzie źródłowym, a raport będzie zawierał dokładny plik i wiersz, których dotyczy problem. Aby ułatwić przejrzyj w Narzędziach deweloperskich. Kliknięcie lokalizacji określone w raporcie spowoduje otwarcie odpowiednich plików. w panelu Źródła.

Narzędzia deweloperskie wskazują dokładny wiersz kodu, który powoduje problem.

Na horyzoncie

W Lighthouse zaczęliśmy eksperymentować z gromadzeniem map źródeł na potrzeby nowych funkcji, takich jak:

• wykrywanie zduplikowanych modułów w pakietach JavaScriptu.
• wykrywanie nadmiernej liczby elementów polyfill lub przekształceń w kodzie wysyłanych do nowoczesnych przeglądarek;
• Rozszerzanie kontroli nieużywanego JavaScriptu w celu uzyskania szczegółowości na poziomie modułu.
• Wizualizacje diagramów z wyróżnionymi modułami, które wymagają działania.
• Wyświetlanie oryginalnego kodu źródłowego elementów raportu z „lokalizacją źródłową”.

.

Nieużywany audyt JavaScriptu wykorzystujący mapy źródeł, aby pokazać nieużywany kod w określonych pakietach modułów.

Te funkcje będą domyślnie włączone w przyszłej wersji Lighthouse. Na razie możesz wyświetlić Kontrole eksperymentalne w Lighthouse z tą flagą interfejsu wiersza poleceń:

lighthouse https://web.dev --view --preset experimental

Dziękujemy!

Dziękujemy za korzystanie z narzędzia Lighthouse i przekazanie opinii. Twoja opinia pomoże nam ulepszyć Lighthouse Mamy nadzieję, że Lighthouse 6.0 ułatwi Ci witryn.

Co możesz zrobić dalej?

• Otwórz Chrome Canary i wypróbuj panel Lighthouse.
• Użyj interfejsu wiersza poleceń węzła: npm install -g lighthouse && lighthouse https://yoursite.com --view.
• Uruchom Lighthouse CI za pomocą do swojego projektu.
• Zapoznaj się z dokumentacją dotyczącą audytu Lighthouse.
• Baw się, by internet był lepszy!

Pasjonujemy się internetem i chcemy współpracować ze społecznością programistów nad tworzeniem narzędzi, i pomagają nam ulepszać internet. Lighthouse to projekt open source. Bardzo dziękujemy wszystkim pomagających w każdym aspekcie: od poprawiania literówek, przez refaktoryzację dokumentacji, po całkiem nowe i audyty. Chcesz nam pomóc? Skorzystaj z repozytorium Lighthouse na GitHubie.