Cieszymy się, że możemy rozpocząć pierwszą rundę obsługi narzędzi dla nowego wskaźnika czasu reakcji – od interakcji do następnego wyrenderowania (INP). Więcej informacji o danych znajdziesz w oficjalnym przewodniku po danych INP.
Sugerowany pomiar
Celem pomiaru INP jest sprawdzenie, jak szybko Twoja strona reaguje na dane wejściowe użytkowników. Jedynym sposobem na uzyskanie realistycznych danych jest pomiar reakcji strony w przypadku rzeczywistych użytkowników odwiedzających ją za pomocą danych zgromadzonych w terenie.
Pomiar INP w ramach laboratorium pomaga lepiej zrozumieć czasy zdarzeń oraz miejsca, w których następować optymalizacje. Narzędzia laboratoryjne nie będą automatycznie wchodzić w interakcję ze stroną. Oznacza to, że podczas przeprowadzania pomiarów trzeba je ręcznie wprowadzić lub być wyposażone w odpowiednie narzędzie do automatyzacji, takie jak Puppeteer. Po zidentyfikowaniu kluczowych interakcji na podstawie typowych ścieżek użytkownika można je wypróbować w celu zidentyfikowania problemów lub za pomocą skryptu, a następnie poddać je testom CI w celu uniknięcia regresji.
Dowiedz się, jakie są wrażenia użytkowników (dane z terenu)
Odwiedź PageSpeed Insights
PageSpeed Insights pobiera dane z interfejsu Chrome User Experience (CrUX) Report API i podsumowuje wydajność strony i źródła z ostatnich 28 dni. Te dane obejmują teraz INP:
Wypróbuj na stronie PageSpeed Insights.
Zbierz własne wartości INP z pola
Jeśli chcesz samodzielnie zbierać dane INP dla witryny, najprostszym sposobem jest skorzystanie z biblioteki web-vitals, która w wersji beta obsługuje teraz wszystkie wartości 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 sposobach przeprowadzania pomiarów w konsoli Narzędzi deweloperskich.
Rozszerzenie Web Vitals do Chrome
Rozszerzenie Web Vitals zapewnia wgląd w wygodę użytkowników strony (z interfejsu CrUX API), a także bieżące wartości CWV i kluczowe dane dotyczące bieżących wizyt na stronie.
Zainstaluj rozszerzenie Web Vitals do Chrome.
Diagnozowanie problemów z wydajnością (dane laboratoryjne)
Korzystanie ze schematów użytkownika Lighthouse
Nowy tryb zakresu czasu w panelu Lighthouse w Narzędziach deweloperskich pozwala uruchomić Lighthouse, w dowolny sposób wejść w interakcję ze stroną testową, a potem wygenerować raport o tym, co się wydarzyło w tym okresie. Raport zawiera teraz INP i kontrolę, która ułatwia diagnozowanie problemów z responsywnością.
Tę samą serię interakcji można zautomatyzować za pomocą schematów użytkownika Lighthouse. Od wersji Lighthouse 9.6 protokół INP jest dostępny w ramach przepływów użytkowników.
Szczegóły dostępności narzędzia
- Raport na temat użytkowania Chrome (CrUX)
- BigQuery identyfikator INP dostępny jako
interaction_to_next_paint - CrUX API: INP jest dostępny jako
interaction_to_next_paint - Panel raportu na temat użytkowania Chrome: zawiera dane INP
- BigQuery identyfikator INP dostępny jako
- PageSpeed Insights
- pagespeed.web.dev: dane pól INP na poziomie strony i źródłowej z interfejsu CrUX API wyświetlane jako „Interakcja z kolejnym wyrenderowaniem”
- PSI API: INP jest dostępny jako
INTERACTION_TO_NEXT_PAINT_MS
web-vitalsBiblioteka JSweb-vitalsobejmuje obsługę INP
- Rozszerzenie Web Vitals do Chrome
- Obejmuje lokalne pomiary INP i dane pól INP, jeśli są dostępne z poziomu interfejsu CrUX API
- Lighthouse
- Panel Lighthouse w Narzędziach deweloperskich: pomiar INP dostępny w trybie „zakres czasu” w Chrome Canary (104).
- Moduł npm Lighthouse: pomiar INP dostępny w zakresach czasowych (w przypadku danych wejściowych syntetycznych użyj aplikacji Lappeteer).
Dalsze działania i prośby o opinię
W przyszłości zespoły zajmujące się narzędziami Chrome będą nadal inwestować w możliwości debugowania i rekomendacje dotyczące optymalizacji w przypadku INP.
Jeśli chcesz podzielić się opinią na temat przydatności tych danych lub łatwości pomiarów, zamieść je w grupie dyskusyjnej Google web-vitals-feedback.