Szybkie zmiany narzędzi: najważniejsze informacje z Chrome Developer Summit 2019

nowe dane o skuteczności, aktualizacje narzędzia PageSpeed Insights i raportu na temat użytkowania Chrome (CrUX);

Elizabeth Sweeny
Elizabeth Sweeny

Podczas szczytu dla deweloperów Chrome ja i Paul Irish ogłosiliśmy aktualizacje Lighthouse: Lighthouse CI, nową formułę wyniku wydajności i inne. Oprócz ważnych informacji o Lighthouse przedstawiliśmy ciekawe nowości dotyczące narzędzi do analizowania wydajności, w tym nowe wskaźniki wydajności, aktualizacje usługi PageSpeed Insights i raportu na temat użytkowania Chrome (CrUX) oraz wyniki analizy ekosystemu internetowego przeprowadzonej przez Web Almanac.

Nowe dane o skuteczności

Pomiar subtelności wrażeń użytkownika jest kluczowy do ilościowego określenia wpływu na wyniki finansowe oraz śledzenia ulepszeń i regresji. Z czasem pojawiły się nowe dane, które uwzględniają te niuanse i wypełniają luki w mierzeniu wrażeń użytkowników. Nowością w raporcie są 2 wskaźniki pólnajwiększe wyrenderowanie treści (LCP) i skumulowane przesunięcie układu (CLS), które są inkubowane w grupie roboczej W3C Web Performance Groups, oraz nowe wskaźniki laboratoryjneCałkowity czas blokowania (TBT).

Największe wyrenderowanie treści (LCP)

Największe wyrenderowanie treści (LCP) raportuje czas, kiedy największy element treści staje się widoczny w widocznym obszarze.

Przed wprowadzeniem największego wyrenderowania treści wskaźniki pierwszego wyrenderowania elementu znaczącego (FMP) i indeksu szybkości (SI) służyły do rejestrowania wczytywania po pierwszym wyrenderowaniu, ale są one skomplikowane i często nie określają, kiedy wczytano główną zawartość strony. Badania wykazały, że po prostu sprawdzenie, kiedy renderowany jest największy element na stronie, lepiej odzwierciedla moment wczytania głównej zawartości strony.

Nowy wskaźnik największego wyrenderowania treści będzie wkrótce dostępny w raportach Lighthouse. W międzyczasie możesz mierzyć LCP w JavaScriptzie.

Łączny czas blokowania (TBT)

Wskaźnik Total Blocking Time (TBT) (Całkowity czas blokowania) mierzy łączny czas między pierwszym wyrenderowaniem treści (FCP)czasem do pełnej interaktywności (TTI), w którym wątek główny był zablokowany na tyle długo, że uniemożliwiało to reagowanie na dane wejściowe.

Zadanie jest uważane za długie, jeśli jest wykonywane w wątku głównym przez ponad 50 ms. Każda milisekunda ponad ten czas jest wliczana do czasu blokowania danego zadania.

Diagram przedstawiający zadanie trwające 150 milisekund, z czasem blokowania wynoszącym 100 milisekund.

Łączny czas blokowania strony to suma czasów blokowania wszystkich długich zadań, które wystąpiły między pierwszym wyrenderowaniem treści (FCP) a czasem do pełnej interaktywności (TTI).

Diagram przedstawiający 5 zadań z łącznym czasem blokowania wynoszącym 60 milisekund na 270 milisekund czasu wątku głównego.

Z kolei funkcja Czas do interakcji dobrze wykrywa, kiedy wątek główny uspokaja się później podczas wczytywania, natomiast łączny czas blokowania ma na celu zmierzenie, jak wytrenowany jest główny wątek podczas ładowania. W ten sposób TTI i TBT uzupełniają się i zapewniają równowagę.

Skumulowane przesunięcie układu (CLS)

Skumulowane przesunięcie układu (CLS) mierzy stabilność wizualną strony i określa, jak często użytkownicy doświadczają nieoczekiwanych przesunięć układu. Nieoczekiwane przesuwanie treści może być bardzo frustrujące, a te nowe dane pomagają rozwiązać ten problem, podając, jak często występuje on u użytkowników.

Screencast pokazujący negatywny wpływ niestabilnego układu na wrażenia użytkowników.

Aby dowiedzieć się, jak obliczać i mierzyć zbiorcze przesunięcie układu, zapoznaj się z szczegółowym przewodnikiem.

Nowa formuła obliczania wyniku skuteczności Lighthouse wkrótce odejmie znaczenie wskaźnikom FMP i FCI, a zamiast tego uwzględni 3 nowe wskaźniki: LCP, TBT i CLS, które lepiej odzwierciedlają, czy strona jest użyteczna.

W Lighthouse w wersji 6 głównymi wskaźnikami wydajności wczytywania są pierwsze wyrenderowanie treści, indeks szybkości i największe wyrenderowanie treści. Czas do pełnej interaktywności, opóźnienie przy pierwszym działaniu, maksymalne potencjalne opóźnienie przy pierwszym działaniu i łączny czas blokowania to główne wskaźniki interaktywności. Skumulowane przesunięcie układu to główny wskaźnik przewidywalności.

Aby dowiedzieć się więcej, zapoznaj się z ocena wydajności Lighthouse i nową kolekcją danych web.dev.

Zmiana progów danych z pola (CrUX) w PageSpeed Insights

W ciągu ostatniego roku analizowaliśmy wydajność stron internetowych na podstawie danychRaportu na temat użytkowania Chrome (CrUX). Na podstawie tych danych ponownie oceniliśmy progi, które stosujemy do oznaczania wydajności witryny jako „wolna”, „umiarkowana” lub „szybka”.

Dwa wykresy słupkowe pokazujące rozkład wolnych, szybkich i umiarkowanych szybkości dla FCP i FID.

Aby uzyskać ogólną ocenę witryny, narzędzie PageSpeed Insights (PSI) używa pewnego percentylu całkowitego rozkładu danych terenowych jako złotej liczby dla tej witryny. Poprzednio użyte dla niej wartości progowe to 90 percentyl dla farby First Contentful API i 95 centyl opóźnienia przy pierwszym działaniu (FID).

Jeśli np. rozkład FCP witryny wynosi 50% szybko, 30% średnio i 20% wolno, 90. percentyl FCP znajduje się w sekcji „wolno”, więc ogólny wynik w tym polu dla witryny jest niski.

Dostosowaliśmy te dane, aby zapewnić lepszą ogólną dystrybucję w witrynach. Nowy podział wygląda tak:

Dane Ogólny percentyl Szybko (ms) Umiarkowany (ms) Powolny (ms)
FCP 75 centyl 1000 1000-3000 3000 lub więcej
FID 95 centyl 100 100-300 300+

Jeśli na przykład rozkład FCP witryny wynosi 50% szybko, 30% średnio, 20% wolno, 75. percentyl FCP mieści się w sekcji średnio, co oznacza, że ogólna punktacja pola witryny jest średnia.

Kanoniczne przekierowania adresów URL w PageSpeed Insights

Aby umożliwić Ci jak najdokładniejsze pomiary wrażeń użytkowników, zespół PageSpeed Insights dodał do PSI prośbę o ponowne przeanalizowanie witryny. W przypadku witryn przekierowanych na nowy adres URL pojawi się prośba o ponowne uruchomienie raportu dotyczącego adresu URL strony docelowej, aby uzyskać pełny obraz rzeczywistej skuteczności.

Interfejs PSI pokazujący przekierowanie URL-a i przycisk „Ponowne przeanalizowanie”

Raport CrUX w nowym raporcie dotyczącym szybkości w Search Console

Search Console wprowadziła nowy raport dotyczący szybkości na tydzień przed szczytem Chrome Dev. Korzysta on z danych z raportu na temat użytkowania Chrome, aby pomagać właścicielom witryn w identyfikowaniu potencjalnych problemów związanych z wygodą korzystania. Raport dotyczący szybkości automatycznie przypisuje podobne adresy URL do grup zawierających strony szybkie („Fast”), umiarkowane („Moderate”) i wolne („Slow”) oraz pomaga ustalać priorytety usprawnień związanych z konkretnymi problemami.

Raport dotyczący szybkości w Search Console.

Almanach internetowy

Dion Almaer prezentuje Web Almanac na konferencji CDS 2019.

W otwartym wystąpieniu ogłosiliśmy uruchomienie Almanachu sieci, czyli corocznego projektu, który łączy statystyki i trendy dotyczące stanu sieci z ekspertami społeczności internetowej. 85 uczestników, w tym programistów Chrome i społeczność internetową, wzięło udział w projekcie, w ramach którego analizujemy 20 podstawowych aspektów dotyczących tworzenia, udostępniania i obsługi stron internetowych. Zacznij odkrywać Almanach internetowy, aby dowiedzieć się więcej o wydajności, JavaScriptzie i kodzie firm zewnętrznych w internecie.

Więcej informacji

Aby dowiedzieć się więcej o aktualizacjach narzędzi do optymalizacji szybkości z Chrome Developer Summit, obejrzyj wykład na temat ewolucji narzędzi do przyspieszania działania: