Obsługa narzędzia Od interakcji do kolejnego wyrenderowania (INP)

Brendan Kenny

Elizabeth Sweeny

Z radością informujemy, że udostępniliśmy pierwszą wersję narzędzi obsługujących nowy wskaźnik responsywności w stanie oczekiwania – interakcję do kolejnego wyrenderowania (INP). Aby dowiedzieć się więcej o tym wskaźniku, zapoznaj się z oficjalnym przewodnikiem po wskaźniku INP.

Sugerowany pomiar

Celem pomiaru INP jest sprawdzenie, jak szybko strona reaguje na dane wprowadzane przez użytkownika. Jedynym sposobem na uzyskanie realistycznych danych jest pomiar reakcji strony na działania prawdziwych użytkowników odwiedzających witrynę. W tym celu należy użyć danych z pól.

Pomiar INP w laboratorium pomaga lepiej zrozumieć czasy zdarzeń i miejsca, w których należy wprowadzić optymalizacje. Narzędzia laboratoryjne nie wchodzą automatycznie w interakcje ze stroną, dlatego podczas pomiaru wymagają ręcznego wprowadzania danych lub muszą być obsługiwane przez narzędzie do automatyzacji, takie jak Puppeteer. Gdy z typowych ścieżek użytkowników zostaną zidentyfikowane kluczowe interakcje, można je przetestować, aby wykryć problemy, lub zapisać w skrypcie i umieścić w testach CI, aby zapobiec regresji.

Sprawdź, co widzą Twoi prawdziwi użytkownicy (dane z pól)

Otwórz PageSpeed Insights

PageSpeed Insights pobiera dane z pól z interfejsu Chrome User Experience (CrUX) Report API i przedstawia migawkę skuteczności strony i domeny w ciągu ostatnich 28 dni. Te dane obejmują teraz INP:

Wypróbuj PageSpeed Insights.

Zbieraj własne wartości INP z pól

Jeśli chcesz samodzielnie zbierać dane INP dotyczące witryny, najłatwiej to zrobić za pomocą biblioteki web-vitals, która w wersji beta ma już pełną obsługę INP.

import {onINP} from 'web-vitals';

onINP(({value}) => {
  // Log the value to the console, or send it to your analytics provider.
  console.log(value);
});

Dowiedz się więcej o web-vitals i o tym, jak mierzyć w konsoli Narzędzi deweloperskich.

Rozszerzenie Web Vitals do Chrome

Rozszerzenie Web Vitals zawiera zarówno przegląd jakości strony użytkowników (z interfejsu CrUX API), jak i wartości CWV w czasie rzeczywistym oraz kluczowe dane dotyczące bieżącej wizyty na stronie.

Zainstaluj rozszerzenie Web Vitals do Chrome.

Diagnozowanie problemów z wydajnością (dane z laboratorium)

Użyj przepływów użytkowników Lighthouse

Nowy tryb przedziału czasu w panelu Lighthouse w Narzędziach deweloperskich umożliwia uruchomienie Lighthouse, interakcję ze stroną testową w dowolny sposób, a następnie uzyskanie raportu o tym, co się działo w tym czasie. Ten raport zawiera teraz INP i audyt, który pomaga zdiagnozować problemy z responsywnością.

Tę samą serię interakcji można zautomatyzować za pomocą przepływów użytkowników Lighthouse. INP jest dostępny w przepływach użytkowników od wersji Lighthouse 9.6.

Szczegóły dostępności narzędzia

• Raport na temat użytkowania Chrome (CrUX)
  • BigQuery: INP dostępny jako interaction_to_next_paint
  • CrUX API: INP dostępny jako interaction_to_next_paint
  • Panel CrUX: zawiera dane INP
• PageSpeed Insights
  • pagespeed.web.dev: dane INP z pól na poziomie strony i domeny z interfejsu CrUX API wyświetlane jako „Interakcja do kolejnego wyrenderowania”
  • PSI API: INP dostępny jako INTERACTION_TO_NEXT_PAINT_MS
• web-vitals Biblioteka JS
  • web-vitals obejmuje obsługę INP
• Rozszerzenie Web Vitals do Chrome
  • Obejmuje lokalny pomiar INP i dane INP z pól, jeśli są dostępne w interfejsie CrUX API.
• Lighthouse
  • Panel Lighthouse w Narzędziach deweloperskich: pomiar INP dostępny w trybie „przedział czasu” w Chrome Canary (104)
  • Moduł Lighthouse npm: pomiar INP dostępny w przedziałach czasu (do syntetycznego wprowadzania danych użyj Puppeteer)

Dalsze prace i prośba o opinię

Zespoły pracujące nad narzędziami Chrome będą nadal inwestować w możliwości debugowania i rekomendacje dotyczące optymalizacji INP.

Jeśli masz jakieś uwagi dotyczące przydatności wskaźnika lub łatwości pomiaru, podziel się nimi w grupie dyskusyjnej web-vitals-feedback.