Interakcja do kolejnego wyrenderowania (INP)

Jeremy Wagner

Dane dotyczące korzystania z Chrome wskazują, że 90% czasu spędzanego przez użytkownika na stronie przypada na okres po jej załadowaniu. Dlatego ważne jest dokładne pomiarowanie szybkości działania przez cały cykl życia strony. To właśnie ocenia wskaźnik INP.

Dobra responsywność oznacza, że strona szybko reaguje na interakcje. Gdy strona reaguje na interakcję, przeglądarka wyświetla wizualne informacje zwrotne w następnym klatce. Informacje zwrotne wizualne mówią na przykład, czy element dodany do koszyka na zakupy online został rzeczywiście dodany, czy zostało otwarte menu nawigacyjne na urządzeniu mobilnym, czy serwer uwierzytelnia zawartość formularza logowania itd.

Niektóre interakcje zajmują więcej czasu niż inne, ale w przypadku szczególnie skomplikowanych interakcji ważne jest, aby szybko wyświetlić użytkownikowi początkowe informacje wizualne, które poinformują go, że coś się dzieje. Następna ramka, którą przeglądarka ma namalować, jest najlepszą okazją do tego.

Celem INP nie jest więc zmierzenie wszystkich efektów interakcji (takich jak pobieranie danych z sieci i aktualizacje interfejsu użytkownika z innych operacji asynchronicznych), ale czas blokowania następnego wyrenderowania. Opóźnienie informacji zwrotnej może sprawić, że użytkownicy będą mieli wrażenie, że strona nie reaguje wystarczająco szybko. INP zostało opracowane, aby pomóc deweloperom mierzyć tę część wrażeń użytkownika.

W tym filmie przykład po prawej stronie pokazuje natychmiastową informację wizualną o otwarciu harmonijki. Po lewej stronie widać przykład słabej reakcji, która może powodować nieprzyjemne wrażenia użytkowników.

W tym przewodniku wyjaśniamy, jak działa INP, jak go mierzyć i podpowiadamy, jak go poprawiać.

Co to jest INP?

INP to dane, które oceniają ogólną responsywność strony na interakcje użytkowników na podstawie obserwacji czasu, jakiego strona potrzebuje, aby reagować na wszystkie kliknięcia, dotknięcia czy interakcje 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 modułów obsługi zdarzeń, które są wywoływane podczas tego samego logicznego działania użytkownika. Na przykład interakcje „dotknij” 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 modułów obsługi zdarzeń, które inicjują interakcję, od momentu rozpoczęcia interakcji przez użytkownika do momentu, gdy przeglądarka może narysować kolejny kadr.

Jaki jest dobry wynik INP?

Przypinanie etykiet takich jak „dobry” lub „zły” do danych dotyczących responsywności jest trudne. Z jednej strony chcesz zachęcać do stosowania metod programowania, które kładą nacisk na szybkie reagowanie. Z drugiej strony musisz wziąć pod uwagę fakt, że możliwości urządzeń, których używają użytkownicy do określania osiągalnych oczekiwań dotyczących rozwoju, są bardzo zróżnicowane.

Aby zapewnić użytkownikom dobrą responsywność, warto mierzyć 50. percentyl wczytywania stron zarejestrowany w polu, podzielony na urządzenia mobilne i komputery:

• Wartość INP poniżej lub równa 200 milisekund oznacza, że strona reaguje szybko.
• INP powyżej 200 milisekund lub poniżej 500 milisekund oznacza, że responsywność strony wymaga poprawy.
• Wartość INP powyżej 500 milisekund oznacza, że strona reaguje wolno.

Co zawiera interakcja?

Głównym czynnikiem interakcji jest często JavaScript, ale przeglądarki zapewniają interaktywność dzięki elementom sterującym nie korzystającym z JavaScriptu, takim jak pola wyboru, opcje i elementy sterujące korzystające z CSS.

W ramach INP uwzględnia się tylko te typy interakcji:

• Klikanie myszką.
• Kliknięcie na urządzeniu z ekranem dotykowym.
• naciśnięcie klawisza na klawiaturze fizycznej lub ekranowej;

Interakcje mogą występować w dokumencie głównym lub w ramkach iframe umieszczonych w dokumencie, np. kliknięcie przycisku odtwarzania w ramce iframe. Użytkownicy nie wiedzą, co znajduje się w ramce iframe, dlatego INP w ramkach iframe są potrzebne do pomiaru wrażeń użytkowników na stronie najwyższego poziomu. Interfejsy API JavaScript Web nie mają dostępu do zawartości ramek iframe, co może wydawać się różnicą między CrUX a RUM.

Interakcje mogą składać się z kilku zdarzeń. Na przykład zdarzenie wciśnięcie klawisza obejmuje zdarzenia keydown, keypress i keyup. Interakcje z kliknięciem zawierają zdarzenia pointerup i pointerdown. Zdarzenie o najdłuższym czasie trwania w ramach interakcji przyczynia się do łącznego opóźnienia interakcji.

INP strony jest obliczany, gdy użytkownik ją opuszcza. Wynikiem jest pojedyncza wartość, która odzwierciedla ogólną responsywność strony w całym jej cyklu życia. Niski INP oznacza, że strona prawidłowo reagowała na działania użytkownika.

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

INP to wskaźnik zastępujący opóźnienie przy pierwszym działaniu (FID). Oba wskaźniki mierzą responsywność, ale FID mierzy tylko opóźnienie po wprowadzeniu danych w przypadku pierwszej interakcji na stronie. INP ulepsza FID, obserwując wszystkie interakcje na stronie, począwszy od opóźnienia przy wprowadzaniu danych, przez czas potrzebny do uruchomienia modułów obsługi zdarzeń, aż do momentu, gdy przeglądarka wyświetli kolejną klatkę.

Te różnice oznaczają, że zarówno INP, jak i FID to różne typy danych dotyczących szybkości działania. O ile FID to wskaźnik szybkości wczytywania, który ma na celu ocenę pierwszego wrażenia użytkownika po wczytaniu strony, o tyle INP jest bardziej wiarygodnym wskaźnikiem ogólnej responsywności, niezależnie od tego, kiedy w trakcie korzystania ze strony występują interakcje.

Co zrobić, jeśli nie jest raportowana żadna wartość INP?

Strona może nie zwracać wartości INP. Może się tak zdarzyć z kilku powodów, w tym:

• Strona została załadowana, ale użytkownik nie kliknął ani nie nacisnął żadnego klawisza na klawiaturze.
• Strona została załadowana, ale użytkownik wchodził z nią w interakcję za pomocą gestów, które nie są mierzone, takich jak przewijanie czy najeżdżanie kursorem na elementy.
• strona jest dostępna dla bota, np. robota wyszukiwarki lub przeglądarki bez okna, który nie ma skryptu umożliwiającego interakcję ze stroną;

Jak mierzyć INP

INP można mierzyć zarówno w warunkach rzeczywistych, jak i w laboratorium, w takim zakresie, w jakim można symulować realistyczne interakcje z użytkownikiem.

W terenie

Optymalizacja INP powinna się zacząć od danych polowych. W najlepszym przypadku dane z pola pochodzące z monitorowania rzeczywistych użytkowników (RUM) będą zawierać nie tylko wartość INP strony, ale też dane kontekstowe, które wskazują, która konkretna interakcja odpowiada za wartość INP, czy interakcja nastąpiła podczas wczytywania strony czy po nim, typ interakcji (kliknięcie, naciśnięcie klawisza lub dotknięcie) oraz inne cenne informacje o czasie, które mogą pomóc w określeniu, 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 w raporcie CrUX w narzędziu PageSpeed Insights (i innych raportach Core Web Vitals). Minimalnie możesz uzyskać obraz INP witryny na poziomie pochodzenia, ale w niektórych przypadkach możesz też uzyskać dane na poziomie adresu URL.

Jednak chociaż CrUX może poinformować, czy wystąpił problem, nie podaje jego przyczyny. Rozwiązanie RUM może pomóc Ci uzyskać więcej informacji o stronach, użytkownikach lub interakcjach z użytkownikiem, które mają problemy z szybkością reakcji. Możliwość przypisywania INP do poszczególnych interakcji pozwala uniknąć zgadywania i zbędnych wysiłków.

W laboratorium

Najlepiej zacząć testowanie w laboratorium, gdy masz już dane z pola, które wskazują, że interakcje ze stroną są powolne. Dane z pola ułatwią odtworzenie problematycznych interakcji w laboratorium.

Możliwe jednak, że nie masz danych z pola. INP można mierzyć w niektórych narzędziach laboratoryjnych, ale uzyskana wartość INP strony podczas testów laboratoryjnych będzie zależeć od interakcji przeprowadzonych w okresie pomiarowym. Zachowania użytkowników mogą być nieprzewidywalne i bardzo zmienne, co oznacza, że testy laboratoryjne mogą nie wykryć interakcji powodujących problemy w taki sam sposób jak dane z pola. Ponadto niektóre narzędzia laboratoryjne nie raportują INP strony, ponieważ obserwują tylko wczytywanie strony bez żadnych interakcji. W takich przypadkach Całkowity czas blokowania (TBT) może być odpowiednim wskaźnikiem INP, ale nie zastępuje go w pełni.

Chociaż narzędzia laboratoryjne mają pewne ograniczenia w zakresie oceny INP strony, istnieją pewne strategie umożliwiające odtworzenie w laboratorium powolnych interakcji. Strategie te obejmują śledzenie typowych ścieżek użytkownika i testowanie interakcji na poszczególnych etapach, a także interakcję z ładującą się stroną (gdy główny wątek jest często najbardziej obciążony), aby wykryć wolne interakcje w tym kluczowym momencie ścieżki użytkownika.

Jak poprawić INP

Dostępna jest kolekcja przewodników dotyczących optymalizacji INP, które pomogą Ci w identyfikowaniu powolnych interakcji w warunkach rzeczywistych i w wykorzystywaniu danych z laboratorium do identyfikowania przyczyn tych interakcji i ich optymalizowania.

Historia zmian

Czasami w interfejsach API służących do pomiaru danych i czasami w definicjach samych danych występują błędy. W związku z tym czasami trzeba wprowadzić zmiany, które mogą się pojawiać w raportach i panelach wewnętrznych jako ulepszenia lub regresje.

Aby ułatwić Ci zarządzanie tymi danymi, wszystkie zmiany w ich implementacji lub definicji będą widoczne w historii zmian.

Jeśli chcesz podzielić się opinią na temat tych danych, możesz to zrobić w grupie Google nt. opinii na temat danych o wydajności strony.

Sprawdź swoją wiedzę