Z przyjemnością informujemy, że pierwsza runda narzędzi obsługuje nowy wskaźnik responsywności, czyli czas od interakcji do kolejnego wyrenderowania (INP). Informacje o samych danych znajdziesz w oficjalnym przewodniku po wskaźnikach INP.
Sugerowany pomiar
Celem pomiaru INP jest określenie, jak szybko strona reaguje na dane wejściowe użytkownika. Jedynym sposobem na uzyskanie realistycznych danych jest pomiar reakcji Twojej strony na działania prawdziwych użytkowników za pomocą danych z pola.
Pomiar INP w laboratorium pomaga lepiej zrozumieć czas trwania zdarzeń i to, gdzie należy wprowadzić optymalizacje. Narzędzia laboratoryjne nie będą automatycznie wchodzić w interakcję ze stroną, dlatego podczas pomiarów wymagają ręcznego wprowadzania danych lub skryptu z narzędziem automatyzacji takim jak Puppeteer. Gdy kluczowe interakcje zostaną zidentyfikowane na podstawie typowych ścieżek użytkownika, można je przetestować, aby zidentyfikować problemy lub skrypty, oraz włączyć je w testach CI, aby zapobiec regresji.
Dowiedz się, jakie są wrażenia użytkowników (dane z pola)
Otwórz PageSpeed Insights.
Narzędzie PageSpeed Insights pobiera dane z pól z interfejsu API raportu na temat użytkowania Chrome (CrUX) i pokazuje, jaką wydajność miała Twoja strona i jej domena w ciągu ostatnich 28 dni. Dane te obejmują teraz INP:
Wypróbuj to w PageSpeed Insights.
Pobieranie własnych wartości INP z pola
Jeśli chcesz samodzielnie zbierać dane INP dotyczące witryny, najłatwiej jest to zrobić za pomocą biblioteki web-vitals, która w wersji beta obsługuje już w pełni 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ć tę wartość w konsoli Narzędzi deweloperskich.
Rozszerzenie Web Vitals do Chrome
Rozszerzenie Web Vitals zapewnia wgląd w jakość stron użytkowników (z interfejsu CrUX API), a także zapewnia dane w czasie rzeczywistym w CWV i najważniejsze dane związane z bieżącą wizytą na stronie.
Zainstaluj rozszerzenie Web Vitals do Chrome.
diagnozować problemy z wydajnością (dane z laboratorium);
Korzystanie z schematów działań użytkowników w Lighthouse
Nowy tryb okresu w panelu Lighthouse w DevTools 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 ułatwia diagnozowanie problemów z responsywnością.
Tę samą sekwencję interakcji można zautomatyzować, korzystając z przepływów użytkownika Lighthouse. Od wersji Lighthouse 9.6 INP jest dostępny w przepływach użytkownika.
Szczegóły dotyczące dostępności narzędzia
- Raport na temat użytkowania Chrome (CrUX)
- BigQuery wartość INP dostępna jako
interaction_to_next_paint - Interfejs API Crux: INP dostępny jako
interaction_to_next_paint - Panel Crux: zawiera dane INP
- BigQuery wartość INP dostępna jako
- PageSpeed Insights
- pagespeed.web.dev: dane pól INP na poziomie strony i na poziomie źródła z interfejsu CrUX API pojawiały się jako „Interakcja do następnego wyrenderowania”
- PSI API: INP dostępne jako
INTERACTION_TO_NEXT_PAINT_MS
- Biblioteka JS
web-vitalsweb-vitalsobsługuje INP
- Rozszerzenie Web Vitals do Chrome
- Obejmuje pomiar INP na poziomie lokalnym i dane z pola INP, jeśli są dostępne w interfejsie CrUX API
- Lighthouse
- Panel Lighthouse w Narzędziach deweloperskich: pomiar INP dostępny w trybie „timespan” w Chrome Canary (104)
- Moduł npm Lighthouse: pomiar INP dostępny w okresie (użyj Puppeteer do danych wejściowych syntetycznych).
Przyszłe działania i prośba o opinię
W przyszłości zespoły zajmujące się narzędziami Chrome będą nadal inwestować w funkcje debugowania i rekomendacje optymalizacji dotyczące INP.
Jeśli chcesz wyrazić swoją opinię na temat przydatności danych lub ułatwienia pomiarów, umieść ją w grupie dyskusyjnej Google z informacjami o web-vitals-feedback.