Z przyjemnością informujemy, że pierwsza runda narzędzi obsługuje nowy wskaźnik responsywności, czyli interakcję do kolejnego wyrenderowania (INP). Więcej informacji o tych danych znajdziesz w oficjalnym przewodniku po danych 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 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:
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 zawiera przegląd jakości stron z perspektywy użytkowników (z interfejsu CrUX API) oraz wartości w czasie rzeczywistym dotyczące CWV i kluczowych danych z bieżącej wizyty 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óre pomagają zdiagnozować wszelkie problemy z szybkością działania.
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 INP dostępny jako
interaction_to_next_paint - Interfejs API Crux: INP dostępny jako
interaction_to_next_paint - Panel Crux: zawiera dane INP
- BigQuery INP dostępny jako
- PageSpeed Insights
- pagespeed.web.dev: dane INP na poziomie strony i początku z interfejsu CrUX API wyświetlane jako „Interakcja do kolejnego wyrenderowania”.
- PSI API: INP dostępne jako
INTERACTION_TO_NEXT_PAINT_MS
web-vitalsBiblioteka JSweb-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 podzielić się z nami opinią na temat przydatności danych lub łatwości ich pomiaru, odwiedź grupę Google poświęconą funkcjom witryny.