Narzędzia do pomiaru podstawowych wskaźników internetowych

Twoje ulubione narzędzia dla programistów mogą teraz mierzyć podstawowe wskaźniki internetowe.

Wprowadzona niedawno inicjatywa Wskaźniki internetowe zapewnia ujednolicone wytyczne dotyczące sygnałów jakości, które są niezbędne dla wszystkich witryn, aby zapewnić użytkownikom wygodę korzystania z internetu. Z przyjemnością informujemy, że wszystkie popularne narzędzia Google dla deweloperów stron internetowych obsługują teraz pomiar podstawowych wskaźników internetowych, co ułatwi Ci diagnozowanie i rozwiązywanie problemów z wygodą użytkowników. m.in. Lighthouse, PageSpeed Insights, Chrome DevTools, Search Console, narzędzie do pomiaru na stronie web.dev, rozszerzenie Web Vitals do Chrome oraz nowy (!) interfejs API Chrome UX Report.

Ponieważ wyszukiwarka Google uwzględnia teraz podstawowe wskaźniki internetowe jako podstawę oceny jakości strony, ważne jest, aby te dane były jak najbardziej dostępne i przydatne.

Aby zacząć optymalizować komfort użytkowników za pomocą podstawowych wskaźników internetowych, wypróbuj ten proces:

• Użyj nowego raportu dotyczącego podstawowych wskaźników internetowych w Search Console, aby na podstawie danych z pola zidentyfikować grupy stron, które wymagają uwagi.
• Gdy znajdziesz strony wymagające poprawy, użyj narzędzia PageSpeed Insights (opartego na technologii Lighthouse i raporcie na temat użytkowania Chrome), aby zdiagnozować problemy z modułami i polami na stronie. Narzędzie PageSpeed Insights (PSI) jest dostępne w Search Console. Możesz też wpisać adres URL bezpośrednio w PSI.
• Chcesz zoptymalizować witrynę lokalnie w module? Korzystaj z Lighthouse i Chrome DevTools, aby mierzyć podstawowe wskaźniki internetowe i uzyskiwać przydatne wskazówki, co należy poprawić. Rozszerzenie Web Vitals do Chrome zapewnia wgląd w dane w czasie rzeczywistym na komputerach.
• Potrzebujesz niestandardowego panelu z podstawowymi wskaźnikami internetowymi? W przypadku danych terenowych używaj zaktualizowanego panelu CrUX lub nowego interfejsu Chrome UX Report API. Do danych modułu używaj interfejsu PageSpeed Insights API.
• Szukasz wskazówek? web.dev/measure może Ci pomóc mierzyć skuteczność strony i wyświetlać priorytetowy zestaw przewodników i ćwiczeń z programowania dotyczących optymalizacji przy użyciu danych PSI.
• I na koniec używaj narzędzia Lighthouse CI w żądaniach pull, aby mieć pewność, że w podstawowych wskaźnikach internetowych nie pojawią się żadne regresje, zanim wprowadzisz zmianę w środowisku produkcyjnym.

W tym wstępie omówimy poszczególne aktualizacje każdego narzędzia.

Latarnia morska

Lighthouse to automatyczne narzędzie do audytu witryn, które pomaga deweloperom diagnozować problemy i odkrywać możliwości poprawy wygody użytkowników stron. Mierzy kilka wymiarów związanych z wrażeniami użytkowników w środowisku laboratoryjnym, w tym wydajność i ułatwienia dostępu. Najnowsza wersja Lighthouse (6.0, opublikowana w połowie maja 2020 r.) zawiera dodatkowe kontrole, nowe dane i nowo utworzony wynik skuteczności.

W Lighthouse 6.0 pojawiły się 3 nowe rodzaje danych w raporcie. Dwa z tych nowych wskaźników – największe wyrenderowanie treści (LCP) i skumulowane przesunięcie układu (CLS) – to laboratoryjne wdrożenia podstawowych wskaźników internetowych. Dostarczają one ważnych informacji diagnostycznych ułatwiających optymalizację wygody użytkowników. Nowe dane są nie tylko mierzone i uwzględniane w raporcie, ale też uwzględniane przy obliczaniu wyniku skuteczności, ponieważ odgrywają ważną rolę w ocenie wrażeń użytkowników.

Trzeci nowy rodzaj danych uwzględniony w Lighthouse – Total Block Time (TBT) – jest dobrze skorelowany z innym wskaźnikiem dotyczącym podstawowych wskaźników internetowych, takim jak Opóźnienie przy pierwszym działaniu (FID). Stosowanie się do rekomendacji podanych w raporcie Lighthouse i optymalizacja pod kątem wyników pozwoli Ci zadbać o jak najlepsze wrażenia użytkowników.

Wszystkie usługi wykorzystywane w Lighthouse są aktualizowane pod kątem najnowszej wersji. Jednym z nich jest Lighthouse CI, który pozwala łatwo mierzyć podstawowe wskaźniki internetowe dotyczące żądań pull przed ich scaleniem i wdrożeniem.

Więcej informacji o najnowszych aktualizacjach Lighthouse znajdziesz w poście na blogu Co nowego w Lighthouse 6.0.

PageSpeed Insights

PageSpeed Insights (PSI) raportuje wyniki laboratoryjne i terenowe strony na urządzeniach mobilnych i komputerach. Narzędzie zapewnia informacje o tym, jak użytkownicy korzystają ze strony (opracowane na podstawie raportu na temat użytkowania Chrome), a także zestaw przydatnych rekomendacji, które pomogą właścicielowi witryny poprawić jakość strony (dostarczone przez Lighthouse).

Narzędzia PageSpeed Insights i PageSpeed Insights API zostały zaktualizowane, aby korzystały z wersji Lighthouse 6.0 i obsługują teraz pomiar podstawowych wskaźników internetowych w częściach laboratoryjnych i praktycznych raportu. Podstawowe wskaźniki internetowe są oznaczone niebieską wstążką, jak widać poniżej.

Search Console zapewnia właścicielom witryn ogólny przegląd grup stron wymagających uwagi, natomiast PSI pomaga zidentyfikować strony, które można ulepszyć, aby poprawić ich jakość. W tym raporcie u góry raportu możesz wyraźnie sprawdzić, czy Twoja strona spełnia wymagania dotyczące wszystkich podstawowych wskaźników internetowych. Oznacza to, że spełnia ona podstawowe wskaźniki internetowe lub spełnia wymagania dotyczące podstawowych wskaźników internetowych.

CrUX

Raport na temat użytkowania Chrome (CrUX) to publiczny zbiór danych przedstawiających rzeczywiste wrażenia użytkowników korzystających z milionów witryn. Mierzy wersje terenowe wszystkich podstawowych wskaźników internetowych. W przeciwieństwie do danych laboratoryjnych dane raportu na temat użytkowania Chrome pochodzą od użytkowników, którzy wyrazili na to zgodę. Na podstawie tych danych deweloperzy mogą się dowiedzieć, jak użytkownicy w świecie rzeczywistym żyją w ich witrynach, a nawet w witrynach konkurencji. Nawet jeśli nie widzisz wskaźnika RUM w witrynie, raport CrUX umożliwia szybką i łatwą ocenę podstawowych wskaźników internetowych. Zbiór danych CrUX w BigQuery zawiera szczegółowe dane o wydajności dotyczące wszystkich podstawowych wskaźników internetowych i jest dostępny w miesięcznych zrzutach na poziomie źródła.

Jedynym sposobem na określenie rzeczywistej wydajności witryny w przypadku użytkowników jest rzeczywiste zmierzenie jej wydajności w trakcie ładowania strony i wchodzenia z nią w interakcję. Ten typ pomiaru jest często nazywany monitorowaniem użytkowników (RUM). Nawet jeśli nie widzisz wskaźnika RUM w witrynie, raport CrUX umożliwia szybką i łatwą ocenę podstawowych wskaźników internetowych.

Przedstawiamy interfejs CrUX API

Z przyjemnością informujemy o wprowadzeniu interfejsu CrUX API. Jest to szybki i bezpłatny sposób na łatwą integrację procesów programistycznych z pomiarem jakości na poziomie źródła i adresu URL w przypadku tych danych pól:

• największe wyrenderowanie treści
• zbiorcze przesunięcie układu
• Opóźnienie przy pierwszym działaniu
• Pierwsze wyrenderowanie treści

Deweloperzy mogą wysyłać zapytania o źródło lub adres URL i dzielić wyniki na segmenty według różnych formatów. Interfejs API jest aktualizowany codziennie i podsumowuje dane z ostatnich 28 dni (w przeciwieństwie do zbioru danych BigQuery, który jest agregowany co miesiąc). Interfejs API ma również te same łagodne limity, co dla naszego drugiego interfejsu API – PageSpeed Insights API (25 000 żądań dziennie).

Poniżej znajduje się przykład korzystania z interfejsu API CrUX z wizualizacją podstawowych wskaźników internetowych z rozłożeniem na dobre, wymagające poprawy lub słabe:

W kolejnych wersjach planujemy rozszerzyć ten interfejs, aby umożliwić dostęp do dodatkowych wymiarów i danych zbioru danych CrUX.

Ulepszony panel raportu na temat użytkowania Chrome

Nowy panel CrUX pozwala łatwo śledzić wydajność źródła na przestrzeni czasu. Możesz też używać go do monitorowania dystrybucji wszystkich podstawowych wskaźników internetowych. Aby zacząć korzystać z panelu, zapoznaj się z naszym samouczkiem na stronie web.dev.

Wprowadziliśmy nową stronę docelową z podstawowymi wskaźnikami internetowymi, dzięki której szybko sprawdzisz wydajność witryny. Chętnie poznamy Twoją opinię na temat wszystkich narzędzi CrUX. Aby podzielić się swoimi przemyśleniami i pytaniami, napisz do nas na koncie @ChromeUXReport na Twitterze lub w grupie dyskusyjnej Google.

Panel wydajności Narzędzi deweloperskich w Chrome

Debugowanie zdarzeń przesunięcia układu w sekcji „Doświadczenie”

W panelu Wydajność Narzędzi deweloperskich w Chrome znajdziesz nową sekcję dotyczącą interfejsu, która pomoże Ci wykrywać nieoczekiwane przesunięcia układu. Przydaje się to do znajdowania i rozwiązywania problemów z niestabilnością obrazu na stronie, które przyczyniają się do skumulowanego przesunięcia układu.

Wybierz przesunięcie układu, aby wyświetlić jego szczegóły na karcie Podsumowanie. Aby zobaczyć, gdzie miało miejsce samo przesunięcie, najedź kursorem na pola Przeniesiono z i Przeniesiono do.

Gotowość do debugowania z wartością Całkowity czas blokowania w stopce

Wskaźnik Total Block Time (TBT) można zmierzyć w narzędziach laboratoryjnych i stanowi doskonały wskaźnik opóźnienia przy pierwszym działaniu. TBT mierzy łączny czas między Pierwsze wyrenderowanie treści (FCP) a czasem do pełnej interaktywności (TTI), w którym wątek główny był zablokowany na tyle długo, że nie pozwalały na reagowanie na dane wejściowe. Optymalizacje wydajności, które poprawiają TBT w laboratorium, powinny poprawić FID w terenie.

Wartość TBT jest teraz widoczna w stopce panelu Wydajność Narzędzi deweloperskich w Chrome, gdy mierzysz wydajność strony:

1. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
2. Kliknij kartę Skuteczność.
3. Kliknij Nagraj.
4. Załaduj ponownie stronę ręcznie.
5. Poczekaj, aż strona się załaduje, a potem zatrzymaj nagrywanie.

Więcej informacji znajdziesz w artykule Co nowego w Narzędziach deweloperskich (Chrome 84).

Search Console

Nowy raport dotyczący podstawowych wskaźników internetowych w Search Console pomaga identyfikować grupy stron w witrynie, które wymagają uwagi na podstawie rzeczywistych danych pochodzących z raportu CrUX. Skuteczność adresów URL jest grupowana według stanu, typu danych i grupy adresów URL (grup podobnych stron internetowych).

Raport ten powstaje na podstawie 3 podstawowych wskaźników internetowych: LCP, FID i CLS. Jeśli dla danego adresu URL nie udało się zebrać minimalnej ilości danych raportowania związanych z tymi danymi, jest on pomijany w raporcie. Wypróbuj nowy raport, aby uzyskać pełny obraz skuteczności w przypadku strony początkowej.

Gdy znajdziesz typ strony, na której występują problemy z podstawowymi wskaźnikami internetowymi, możesz skorzystać z PageSpeed Insights, aby poznać konkretne sugestie dotyczące optymalizacji reprezentatywnych stron.

web.dev

https://pagespeed.web.dev/ umożliwia pomiar wydajności strony w czasie. Zawiera ona uporządkowaną według priorytetów listę przewodników i ćwiczeń z programowania, z których dowiesz się, jak ją ulepszyć. Pomiar jest realizowany za pomocą narzędzia PageSpeed Insights. Narzędzie do pomiaru obsługuje teraz też podstawowe wskaźniki internetowe, jak widać poniżej:

Rozszerzenie Web Vitals

Rozszerzenie Web Vitals mierzy w czasie rzeczywistym 3 podstawowe wskaźniki internetowe dotyczące Google Chrome (na komputery). Jest to przydatne w przypadku wykrycia problemów na wczesnym etapie procesu programowania, a także jako narzędzie diagnostyczne do oceny wydajności podstawowych wskaźników internetowych podczas przeglądania internetu.

Rozszerzenie jest już dostępne do zainstalowania ze sklepu Chrome Web Store. Mamy nadzieję, że te informacje okażą się przydatne. Zachęcamy do publikacji wszelkich opinii, które pomogą nam ją ulepszać, a także do przesyłania opinii o repozytorium GitHub.

Najważniejsze informacje

To koniec! Co możesz zrobić dalej:

• Użyj Lighthouse w Narzędziach deweloperskich, aby zoptymalizować wygodę użytkowników i upewnić się, że dzięki podstawowym wskaźnikom internetowym osiągasz sukcesy w tej dziedzinie.
• Użyj narzędzia PageSpeed Insights, aby porównać wyniki swojego laboratorium i poznać wydajność podstawowych wskaźników internetowych.
• Wypróbuj nowy interfejs Chrome User Experience Report API, aby łatwo sprawdzać skuteczność strony źródłowej i adresu URL w stosunku do podstawowych wskaźników internetowych w ciągu ostatnich 28 dni.
• W sekcji Możliwości i w stopce w panelu Wydajność w Narzędziach deweloperskich znajdziesz szczegółowe informacje na temat określonych podstawowych wskaźników internetowych i debugowanie tych aplikacji.
• Podsumowanie skuteczności źródeł w polu znajdziesz w raporcie dotyczącym podstawowych wskaźników internetowych w Search Console.
• Za pomocą rozszerzenia Web Vitals możesz na bieżąco śledzić wydajność strony w porównaniu z podstawowymi wskaźnikami internetowymi.

Więcej o narzędziu dotyczącym podstawowych wskaźników internetowych dowiesz się na stronie web.dev Live w czerwcu. Zarejestruj się, aby otrzymywać najnowsze informacje o wydarzeniu.

~ Elizabeth i Addy, WebPerf Janitors