Interakcja do kolejnego wyrenderowania (INP)

Jeremy Wagner

Barry Pollard

Data publikacji: 6 maja 2022 r., ostatnia aktualizacja: 9 września 2025 r.

Dane o używaniu Chrome pokazują, że 90% czasu spędzanego przez użytkownika na stronie przypada na okres po jej załadowaniu. Dlatego ważne jest dokładne mierzenie czasu reakcji w całym cyklu życia strony. To właśnie mierzy wskaźnik INP.

Dobra responsywność oznacza, że strona szybko reaguje na interakcje. Gdy strona reaguje na interakcję, przeglądarka wyświetla informację wizualną w kolejnej klatce, którą renderuje. Informacje wizualne informują Cię na przykład, czy element dodany do koszyka w sklepie internetowym został rzeczywiście dodany, czy otworzyło się menu nawigacyjne na urządzeniu mobilnym, czy serwer uwierzytelnia zawartość formularza logowania itp.

Niektóre interakcje trwają dłużej niż inne, ale w przypadku szczególnie złożonych interakcji ważne jest, aby szybko przedstawić wstępne informacje wizualne, które poinformują użytkownika, że coś się dzieje. Kolejna ramka, którą przeglądarka wyrenderuje, to najwcześniejsza okazja, aby to zrobić.

Dlatego celem INP nie jest pomiar wszystkich ostatecznych efektów interakcji (takich jak pobieranie danych z sieci i aktualizacje interfejsu użytkownika z innych operacji asynchronicznych), ale czasu, przez który blokowane jest kolejne wyrenderowanie. Opóźnienie wizualnych informacji zwrotnych może sprawić, że użytkownicy będą mieli wrażenie, że strona nie reaguje wystarczająco szybko. Wskaźnik INP został opracowany, aby pomóc deweloperom w pomiarze tej części wrażeń użytkowników.

W filmie poniżej przykład po prawej stronie natychmiastowo pokazuje, że akordeon się otwiera. Po lewej stronie pokazano przykład słabej responsywności i jej negatywnego wpływu na wrażenia użytkowników.

Z tego przewodnika dowiesz się, jak działa INP, jak go mierzyć i gdzie szukać informacji o jego poprawie.

Co to jest INP?

INP to dane, które oceniają ogólną responsywność strony na interakcje użytkowników na podstawie obserwacji czasu oczekiwania w odniesieniu do wszystkich kliknięć, dotknięć czy interakcji z klawiaturą w całym okresie odwiedzania strony przez użytkownika. Ostateczna wartość INP to najdłuższa zaobserwowana interakcja z pominięciem wartości odstających.

Interakcja to grupa funkcji obsługi zdarzeń, które są wywoływane podczas tego samego logicznego gestu użytkownika. Na przykład interakcje „kliknięcia” na urządzeniu z ekranem dotykowym obejmują wiele zdarzeń, takich jak pointerup, pointerdown i click. Interakcja może być wywoływana przez JavaScript, CSS, wbudowane elementy sterujące przeglądarki (np. elementy formularza) lub ich kombinację.

Opóźnienie interakcji to najdłuższy czas trwania grupy obsługi zdarzeń, które wywołują interakcję, od momentu rozpoczęcia interakcji przez użytkownika do momentu, w którym przeglądarka może ponownie wyrenderować ramkę. W rzadkich przypadkach może nie być klatki do narysowania, ale interakcja kończy się, gdy przeglądarka jest w stanie narysować klatkę.

Jaki jest dobry wynik INP?

Przypisanie etykiet takich jak „dobra” lub „słaba” do danych dotyczących responsywności jest trudne. Z jednej strony chcesz zachęcać do stosowania metod programowania, które zapewniają dobrą responsywność. Z drugiej strony musisz wziąć pod uwagę fakt, że możliwości urządzeń używanych przez użytkowników są bardzo różne, aby móc określić realistyczne oczekiwania dotyczące rozwoju.

Aby mieć pewność, że zapewniasz użytkownikom odpowiednią szybkość reakcji, warto mierzyć 75 percentyl wczytań strony zarejestrowanych w terenie, z podziałem na urządzenia mobilne i komputery:

• Wartość INP poniżej lub równa 200 milisekund oznacza, że strona dobrze reaguje.
• Wartość INP powyżej 200 milisekund i poniżej lub równa 500 milisekund oznacza, że responsywność strony wymaga poprawy.
• Wartość INP powyżej 500 milisekund oznacza, że strona ma słabe reagowanie.

Co zawiera interakcja?

Głównym czynnikiem interaktywności jest często JavaScript, chociaż przeglądarki zapewniają interaktywność za pomocą elementów sterujących nie opartych na JavaScript, takich jak pola wyboru, opcje i elementy sterujące oparte na CSS.

W przypadku INP obserwowane są tylko te typy interakcji:

• kliknięcie myszą,
• Kliknięcie urządzenia z ekranem dotykowym.
• Naciśnięcie klawisza na klawiaturze fizycznej lub ekranowej.

Interakcje zachodzą w głównym dokumencie lub w ramkach iframe umieszczonych w dokumencie, np. kliknięcie przycisku odtwarzania w umieszczonym filmie. Użytkownicy nie będą wiedzieć, co znajduje się w ramce iframe, dlatego INP w ramkach iframe jest potrzebny do pomiaru wrażeń użytkowników na stronie najwyższego poziomu. Interfejsy API JavaScript nie mają dostępu do zawartości elementów iframe, więc może to wykazywać różnicę między danymi z CrUX a danymi z RUM.

Interakcje mogą składać się z wielu zdarzeń. Na przykład naciśnięcie klawisza obejmuje zdarzenia keydown, keypress i keyup. Interakcje przez kliknięcie obejmują zdarzenia pointerup i pointerdown. Zdarzenie o najdłuższym czasie trwania w ramach interakcji ma największy wpływ na całkowite opóźnienie interakcji.

Jak widać na diagramie, czas przetwarzania interakcji z najdłuższym opóźnieniem obejmuje wszystkie wywołania zwrotne obsługi zdarzeń w tej ramce. Dzięki temu opóźnienie wejścia to czas, który upływa, zanim zostanie obsłużone jakiekolwiek wywołanie zwrotne interakcji, czas przetwarzania to czas potrzebny na wykonanie wszystkich wywołań zwrotnych, a opóźnienie wyświetlania to czas, który upływa od wykonania wywołań zwrotnych do momentu wyświetlenia ramki na ekranie użytkownika.

Wartość INP strony jest obliczana, gdy użytkownik opuści stronę. Wynikiem jest jedna wartość, która reprezentuje ogólną responsywność strony w całym okresie jej istnienia. Niska wartość INP oznacza, że strona była niezawodnie responsywna w odniesieniu do danych wprowadzanych przez użytkownika.

Czym różni się INP od opóźnienia przy pierwszym działaniu (FID)?

INP to następca wskaźnika opóźnienie przy pierwszym działaniu (FID). Oba te wskaźniki mierzą responsywność, ale FID mierzy tylko opóźnienie pierwszej interakcji na stronie. INP jest ulepszoną wersją FID, ponieważ monitoruje wszystkie interakcje na stronie, począwszy od opóźnienia przy wprowadzaniu danych, przez czas potrzebny na uruchomienie obsługi zdarzeń, aż do momentu, gdy przeglądarka wyrenderuje następną klatkę.

Te różnice oznaczają, że INP i FID to różne rodzaje danych dotyczących szybkości reakcji. FID to wskaźnik responsywności podczas wczytywania, który służy do oceny pierwszego wrażenia, jakie strona wywiera na użytkowniku. INP jest bardziej wiarygodnym wskaźnikiem ogólnej responsywności, niezależnie od tego, kiedy na stronie występują interakcje.

Co zrobić, jeśli nie ma wartości INP?

Strona może nie zwracać żadnej wartości INP. Może się tak zdarzyć z kilku powodów. Oto niektóre z nich:

• Strona została wczytana, ale użytkownik nigdy nie kliknął, nie dotknął ani nie nacisnął klawisza na klawiaturze.
• Strona została wczytana, ale użytkownik wszedł z nią w interakcję za pomocą gestów, które nie są mierzone, np. przewijania lub najeżdżania kursorem na elementy.
• Dostęp do strony uzyskuje bot, np. robot wyszukiwarki lub przeglądarka bez interfejsu, który nie został zaprogramowany do interakcji ze stroną.

Jak mierzyć INP

Wartość INP można mierzyć zarówno w terenie, jak i w laboratorium, o ile możesz symulować realistyczne interakcje użytkowników.

W terenie

Najlepiej zacząć optymalizację INP od danych z terenu. W najlepszym przypadku dane z pomiarów w terenie pochodzące z monitorowania użytkowników (RUM) dostarczą Ci nie tylko wartości INP strony, ale też dane kontekstowe, które wskazują, która konkretna interakcja odpowiada za wartość INP, czy interakcja miała miejsce podczas ładowania strony, czy po nim, jaki był jej typ (kliknięcie, naciśnięcie klawisza lub dotknięcie) oraz inne cenne dane czasowe, które mogą pomóc Ci określić, która część interakcji wpływała na responsywność.

Jeśli Twoja witryna kwalifikuje się do uwzględnienia w Raporcie na temat użytkowania Chrome (CrUX), możesz szybko uzyskać dane z pól dotyczące INP za pomocą CrUX w PageSpeed Insights (i innych podstawowych wskaźników internetowych). Możesz uzyskać co najmniej ogólny obraz INP w swojej witrynie, ale w niektórych przypadkach możesz też uzyskać dane na poziomie adresu URL.

CrUX może jednak wskazać, czy występuje problem, ale nie może określić jego przyczyny. Rozwiązanie RUM może pomóc Ci odkryć więcej szczegółów o stronach, użytkownikach lub interakcjach użytkowników, w przypadku których występują problemy z szybkością reakcji. Możliwość przypisania INP do poszczególnych interakcji pozwala uniknąć zgadywania i marnowania czasu.

W laboratorium

Testowanie w laboratorium najlepiej rozpocząć, gdy dane z terenu wskazują, że strona ma powolne interakcje. Dane z terenu znacznie ułatwią odtwarzanie problematycznych interakcji w laboratorium.

Możliwe jednak, że nie masz danych o polach. Wartość INP można zmierzyć w niektórych narzędziach laboratoryjnych, ale wynikowa wartość INP strony podczas testów laboratoryjnych będzie zależeć od tego, jakie interakcje zostaną wykonane w okresie pomiaru. Zachowania użytkowników mogą być nieprzewidywalne i bardzo zmienne, co oznacza, że testy w laboratorium mogą nie ujawniać problematycznych interakcji w taki sam sposób jak dane z terenu. Niektóre narzędzia laboratoryjne nie podają też wartości INP strony, ponieważ obserwują tylko jej wczytywanie bez żadnych interakcji. W takich przypadkach całkowity czas blokowania (TBT) może być rozsądną wartością zastępczą dla INP, ale sam w sobie nie zastępuje INP.

Narzędzia laboratoryjne mają pewne ograniczenia, jeśli chodzi o ocenę INP strony, ale istnieją strategie, które pozwalają odtworzyć w laboratorium powolne interakcje. Strategie obejmują śledzenie typowych ścieżek użytkowników i testowanie interakcji na każdym etapie, a także interakcje ze stroną podczas jej wczytywania – gdy główny wątek jest często najbardziej obciążony – w celu zidentyfikowania powolnych interakcji w tym kluczowym momencie korzystania z witryny.

Pomiar INP w JavaScript

Aby mierzyć INP w JavaScript, musisz mierzyć czasy zdarzeń dla wszystkich interakcji, a następnie obliczyć 98 percentyl dla wszystkich tych interakcji podczas zwalniania strony. Możesz zapoznać się z web vitalskodem źródłowym biblioteki JavaScript, który zawiera przykładową implementację obliczania INP.

W większości przypadków bieżąca wartość INP w momencie zwalniania strony jest ostateczną wartością INP dla tej strony, ale istnieją pewne ważne wyjątki, o których piszemy w następnej sekcji. Biblioteka JavaScript web vitals w miarę możliwości uwzględnia te kwestie w ramach ograniczeń interfejsów Web API.

Różnice między danymi a interfejsem API

• event Wpisy poniżej 104 milisekund nie są domyślnie raportowane przy użyciu obserwatorów wydajności. Wartość domyślną można zmienić, gdy obserwator wydajności jest rejestrowany za pomocą parametru durationThreshold, ale nawet w tym przypadku minimalna wartość wynosi 16 milisekund. Z tego powodu zalecamy też obserwowanie wpisu first-input, który również jest wpisem dotyczącym czasu trwania zdarzenia, ale jest gwarantowany nawet wtedy, gdy jego czas trwania jest krótszy niż durationThreshold. Dzięki temu strony z interakcjami zawsze będą raportować jakąś wartość INP.
• Obliczanie percentyli w sposób idealny technicznie wymaga przechowywania w pamięci wszystkich próbek, co może być kosztowne. Możesz jednak przybliżyć wartości procentowe, zwłaszcza te bardzo wysokie, takie jak p98, po prostu przechowując krótką listę N najgorszych interakcji. 10 to popularny wybór.
• Jeśli strona zostanie przywrócona z pamięci podręcznej stanu strony internetowej, jej wartość INP powinna zostać zresetowana do zera, ponieważ użytkownicy traktują to jako osobną wizytę na stronie.
• Interfejs API nie raportuje wpisów event w przypadku interakcji, które występują w elementach iframe, ale dane te są uwzględniane w tych danych, ponieważ są częścią wrażeń użytkownika związanych ze stroną. Może to powodować różnice między danymi CrUX i RUM. Aby prawidłowo mierzyć INP, musisz je uwzględnić. Ramki podrzędne mogą używać interfejsu API do zgłaszania swoich wpisów event-timing do ramki nadrzędnej.

Oprócz tych wyjątków wskaźnik INP jest bardziej złożony, ponieważ mierzy cały okres istnienia strony:

• Użytkownicy mogą pozostawić kartę otwartą na bardzo długo – na dni, tygodnie lub miesiące. Użytkownik może nigdy nie zamknąć karty.
• W systemach operacyjnych na urządzenia mobilne przeglądarki zwykle nie uruchamiają wywołań zwrotnych zwalniania strony w przypadku kart działających w tle, co utrudnia raportowanie „końcowej” wartości.

Aby sobie z tym poradzić, INP należy zgłaszać za każdym razem, gdy strona jest w tle, a także za każdym razem, gdy jest zwalniana (zdarzenie visibilitychange obejmuje oba te scenariusze). Systemy analityczne otrzymujące te dane będą musiały obliczyć ostateczną wartość INP na backendzie.

Zamiast samodzielnie zapamiętywać i rozwiązywać wszystkie te przypadki, deweloperzy mogą używać web-vitalsbiblioteki JavaScript do pomiaru INP, która uwzględnia wszystkie wymienione wcześniej kwestie z wyjątkiem elementów iframe:

import {onINP} from 'web-vitals';

// Measure and log INP in all situations
// where it needs to be reported.
onINP(console.log);

Jak poprawić INP

Dostępny jest zbiór przewodników dotyczących optymalizacji INP, które pomogą Ci zidentyfikować powolne interakcje w terenie i użyć danych laboratoryjnych do określenia przyczyn i ich optymalizacji.

Historia zmian

Czasami w interfejsach API używanych do pomiaru danych lub w samych definicjach danych wykrywane są błędy. W związku z tym czasami musimy wprowadzać zmiany, które mogą być widoczne w raportach i panelach wewnętrznych jako ulepszenia lub regresje.

Aby ułatwić Ci zarządzanie tymi zmianami, wszystkie zmiany w implementacji lub definicji tych danych będą publikowane w tym dzienniku zmian.

Jeśli masz opinię na temat tych danych, podziel się nią w grupie dyskusyjnej Google web-vitals-feedback.

Sprawdź swoją wiedzę