Od interakcji 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 mierzy 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. 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 zajmują więcej czasu niż inne, ale w przypadku szczególnie złożonych 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 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 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 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, gdy przeglądarka będzie w stanie wyrenderować ramkę.

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ń, 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.
• INP powyżej 500 milisekund oznacza, że strona słabo reaguje.

Co zawiera 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.

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

• Klikanie myszką.
• 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ą składać się z kilku 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 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 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 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ę.

Różnice te oznaczają, że INP i FID to różne rodzaje wskaźników responsywności. 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 różnych powodów. Oto niektóre z nich:

• Strona została załadowana, 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 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.

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ść przypisywania INP do poszczególnych interakcji pozwala uniknąć zgadywania i niepotrzebnego wysiłku.

W laboratorium

Testowanie najlepiej zacząć w laboratorium, gdy zbierzesz dane, które sugerują, że strona ma wolne interakcje. 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. 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ć odpowiednim wskaźnikiem INP, ale nie zastępuje go w pełni.

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 w interfejsach API służących do pomiaru danych i czasami w definicjach samych danych pojawiają się błędy. 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 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, prześlij ją w grupie dyskusyjnej Google z uprawnieniami do Web-vitals-feedback.

Sprawdź swoją wiedzę