Od interakcji do kolejnego wyrenderowania (INP)

Jeremy Wagner

Dane o użytkowaniu 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. Tę wartość 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 dodany do koszyka produkt 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ątkową informację wizualną, która poinformuje go, że coś się dzieje. Następna ramka, którą przeglądarka ma namalować, to najbliższa okazja do tego.

Celem INP nie jest więc pomiar 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żytkowników.

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, jaki upływa od kliknięcia, dotknięcia czy interakcji z klawiaturą do kolejnego wyrenderowania w całym okresie wizyty użytkownika na stronie. 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 obsługi interakcji, 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 warto promować praktyki programistyczne, w których najważniejsza jest prawidłowa responsywność. 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 zadbać o wygodę użytkowników i dobrze reagować, warto zmierzyć 75 centyl przypadków wczytania strony zarejestrowanych w terenie z podziałem na urządzenia mobilne i komputery:

• Wartość INP poniżej lub na poziomie 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 myszą.
• Kliknięcie na urządzeniu z ekranem dotykowym.
• naciśnięcie klawisza na klawiaturze fizycznej lub ekranowej;

Interakcje występują w dokumencie głównym lub w ramkach iframe umieszczonych w dokumencie, np. kliknięcie przycisku odtwarzania w ramce iframe. Użytkownicy nie będą wiedzieć, co znajduje się w elemencie iframe, dlatego INP w elementach iframe jest niezbędny 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 spowodować różnice 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 opuszcza stronę. 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 wartość, która następuje po opóźnieniu przy pierwszym działaniu (FID). Oba są danymi o responsywności, ale FID mierzy tylko opóźnienie danych wejściowych 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 reakcji. 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 cyklu życia 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 wczytana, 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.
• Dostęp do strony uzyskuje bot, np. robot wyszukujący lub przeglądarka bez interfejsu graficznego, która nie została skonfigurowana pod kątem interakcji 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

Najlepiej rozpocząć drogę do optymalizacji INP od danych terenowych. 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ść przypisania wartości INP do poszczególnych interakcji pozwala uniknąć zgadywania i marnowanego wysiłku.

W laboratorium

Najlepiej zacząć testowanie w laboratorium, gdy masz już dane z pola, które wskazują, że na stronie występują powolne interakcje. Dane z pola ułatwią odtworzenie problematycznych interakcji w laboratorium.

Możliwe jednak, że nie masz danych z pola. Choć INP można zmierzyć w niektórych narzędziach laboratoryjnych, wynikowa wartość INP strony podczas testów laboratoryjnych zależy od interakcji wykonywanych w okresie pomiaru. 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 stroną podczas jej wczytywania (gdy główny wątek jest często najbardziej obciążony), aby wykryć powolne interakcje w tym kluczowym momencie ścieżki użytkownika.

Jak poprawić INP

Dostępny jest zestaw przewodników na temat optymalizacji wartości INP, z których dowiesz się, jak identyfikować powolne interakcje w terenie i wykorzystywać dane laboratoryjne do identyfikowania przyczyn i ich optymalizacji.

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 to zadanie, wszystkie zmiany w implementacji lub definicji tych danych będą widoczne w tym dzienniku zmian.

Jeśli chcesz podzielić się opinią na temat tych danych, wskaż ją w grupie Google nt. opinii na temat funkcji web-vitals.

Sprawdź swoją wiedzę