Od interakcji do kolejnego wyrenderowania (INP)

Jeremy Wagner

Dane o korzystaniu z Chrome pokazują, że użytkownik spędza 90% czasu na stronie po jej wczytaniu. Dlatego należy dokładnie mierzyć czas reagowania w całym cyklu ż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 w następnej ramce informację wizualną. Wizualne informacje zwrotne informują, czy na przykład produkt dodany przez Ciebie do koszyka na zakupy online rzeczywiście został dodany, czy otworzyło się mobilne menu nawigacyjne, czy zawartość formularza logowania jest uwierzytelniana przez serwer itd.

Niektóre interakcje trwają dłużej niż inne. Jednak w przypadku bardziej złożonych interakcji trzeba szybko przedstawić użytkownikowi wstępne informacje wizualne, informujące o tym, że coś się dzieje. Następna ramka, którą przeglądarka wyrenderuje, to najwcześniejsza okazja do zrobienia tego.

Dlatego też celem INP nie jest mierzenie wszystkich końcowych skutków interakcji, takich jak pobrania sieci i aktualizacje interfejsu użytkownika wynikające z innych operacji asynchronicznych), ale czas zablokowania następnego renderowania. Opóźniając komunikaty wizualne, użytkownicy mogą mieć wrażenie, że strona nie odpowiada wystarczająco szybko, i opracowano wskaźnik INP, który pomaga deweloperom mierzyć tę część wygody użytkownika.

W kolejnym filmie po prawej stronie widać natychmiastowy komunikat wizualny informujący o włączaniu akordeonu. Słaby czas reakcji jest pokazany na przykład po lewej stronie i pokazuje, jak może on pogorszyć wrażenia użytkowników.

Z tego przewodnika dowiesz się, jak działa INP i jak go mierzyć. Znajdziesz w nim też zasoby, które pozwolą Ci go ulepszyć.

Co to jest INP?

INP to wskaźnik oceniający ogólną responsywność strony w odniesieniu do interakcji użytkowników przez obserwację czasu oczekiwania na wszystkie kliknięcia, dotknięcia i klawiatury, które występują w całym okresie trwania 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 uruchamiają się podczas tego samego logicznego gestu użytkownika. Na przykład „dotknij” interakcje na urządzeniu z ekranem dotykowym obejmują wiele zdarzeń, np. 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ę.

Czas oczekiwania na interakcję obejmuje najdłuższy czas trwania grupy modułów obsługi zdarzeń, które powodują interakcję – od momentu rozpoczęcia interakcji przez użytkownika do momentu wyrenderowania następnej klatki przez przeglądarkę.

Jaki jest dobry wynik INP?

przypinanie etykiet, np. „dobre”; lub „słabe” w przypadku wskaźnika responsywności. 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ń używanych przez użytkowników 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:

• INP poniżej lub 200 milisekund oznacza, że strona ma dobrą responsywność.
• Wartość INP powyżej 200 milisekund i poniżej lub 500 milisekund oznacza, że czas reagowania strony wymaga poprawy.
• INP powyżej 500 milisekund oznacza, że strona słabo reaguje.

Co to jest interakcja?

Głównym czynnikiem wpływającym na interaktywność jest często JavaScript, chociaż przeglądarki zapewniają interaktywność dzięki elementom sterującym niepochodzącym z JavaScriptu, takim jak pola wyboru, przyciski i elementy sterujące oparte na CSS.

Do celów INP zaobserwowane są tylko te typy interakcji:

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

Interakcje mają miejsce w dokumencie głównym lub w elementach iframe osadzonych w dokumencie, np. przez kliknięcie przycisku odtwarzania umieszczonego filmu. Użytkownicy nie będą wiedzieć, co znajduje się w elemencie iframe, dlatego INP w elementach iframe jest niezbędny do pomiaru wygody użytkowników na stronie najwyższego poziomu. Ponieważ internetowe interfejsy API JavaScript nie mają dostępu do zawartości elementów iframe, może to wyróżniać się jako różnica między CrUX a RUM.

Interakcje mogą się składać z wielu zdarzeń. Na przykład naciś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 interakcji jest uwzględniane w łącznym czasie oczekiwania na interakcję.

Wartość INP strony jest obliczana, gdy użytkownik ją opuszcza. Wynikiem jest pojedyncza wartość reprezentatywna dla ogólnej responsywności strony w całym cyklu jej życia. Niski wskaźnik INP oznacza, że strona dobrze reagowała na dane wejściowe użytkownika.

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

INP to dane, które zastąpią Opóźnienie 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 poprawia działanie FID przez obserwację wszystkich interakcji na stronie, począwszy od opóźnienia danych wejściowych do uruchomienia modułów obsługi zdarzeń, aż do wyrenderowania następnej klatki przez przeglądarkę.

Różnice te oznaczają, że INP i FID to różne rodzaje wskaźników responsywności. FID to wskaźnik responsywności wczytywania, który służy do oceny pierwszego wyświetlenia strony przez użytkownika. INP jest bardziej wiarygodnym wskaźnikiem ogólnej responsywności niezależnie od czasu interakcji ze stroną.

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

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

• Strona została wczytana, ale użytkownik nie kliknął ani nie nacisnął żadnego klawisza na klawiaturze.
• Strona się załadowała, 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 element.
• Dostęp do strony uzyskuje bot, np. robot wyszukiwarki 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 terenie, jak i w laboratorium, o ile symulują realistyczne interakcje użytkowników.

W terenie

Najlepiej rozpocząć drogę do optymalizacji wartości INP od danych terenowych. Dane pól z monitorowania użytkowników rzeczywistych (RUM) dają nie tylko wartość INP strony, ale też dane kontekstowe, które wskazują, która konkretnie interakcja była odpowiedzialna za samą wartość INP, czy miała miejsce podczas wczytywania strony czy po jej wczytaniu, jaki był typ interakcji (kliknięcie, naciśnięcie lub dotknięcie) i inne przydatne momenty, które pomogą Ci określić, która część interakcji wpływa na czas reakcji.

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

Chociaż panel CrUX może wskazać, czy istnieje problem, nie jest jednak w stanie określić jego przyczyny. Dzięki rozwiązaniu RUM możesz uzyskać więcej informacji o stronach, użytkownikach i interakcjach, w przypadku których występują problemy z responsywnością. Możliwość przypisania wartości INP do poszczególnych interakcji pozwala uniknąć zgadywania i marnowanego wysiłku.

W laboratorium

Testowanie najlepiej zacząć w laboratorium, gdy zbierzesz dane, które sugerują, że strona ma wolne interakcje. Dane terenowe znacznie ułatwiają odtwarzanie problematycznych interakcji w laboratorium.

Możliwe jednak, że nie masz danych terenowych. 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 w module mogą nie pokazywać interakcji z problemami w taki sam sposób jak dane terenowe. Poza tym niektóre narzędzia laboratoryjne nie zgłaszają wartości INP strony, ponieważ obserwują tylko wczytywanie strony bez żadnych interakcji. W takich przypadkach Całkowity czas blokowania (TBT) może być uzasadnionym wskaźnikiem INP, ale nie zastępuje samego INP.

Mimo że narzędzia laboratoryjne mają pewne ograniczenia w zakresie oceny INP strony, istnieją pewne strategie odtwarzania powolnych interakcji w laboratorium. Strategie te obejmują śledzenie typowych schematów działań użytkowników i testowanie interakcji w trakcie jej trwania, a także wchodzenie w interakcje ze stroną podczas jej wczytywania – gdy wątek główny jest często najbardziej obciążony – w celu zidentyfikowania wolniejszych interakcji w kluczowym i istotnym momencie procesu twórczego.

Jak poprawić wskaźnik 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 błędy wykrywane są w interfejsach API używanych do pomiaru danych, a czasem w definicjach samych wskaźników. Dlatego czasami konieczne jest wprowadzenie zmian, które mogą być widoczne jako ulepszenia lub regresje w wewnętrznych raportach i panelach.

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, prześlij ją w grupie dyskusyjnej Google z uprawnieniami do Web-vitals-feedback.

Sprawdź swoją wiedzę