Od interakcji do kolejnego wyrenderowania (INP)

Jeremy Wagner

Dane o korzystaniu z Chrome wskazują, że 90% czasu użytkownika na stronie spędza po jej wczytaniu, dlatego warto dokładnie mierzyć czas reagowania w trakcie cyklu życia strony. Na podstawie tej wartości ocenia wartość INP.

Dobra responsywność oznacza, że strona szybko reaguje na interakcje. Gdy strona reaguje na interakcję, przeglądarka przedstawia wizualną opinię w następnej ramce. Wizualne informacje informują, czy na przykład produkt, który dodajesz do koszyka na zakupy online, rzeczywiście został dodany, czy zostało otwarte menu nawigacyjne na urządzeniu mobilnym, czy treść formularza logowania jest uwierzytelniana przez serwer itd.

Niektóre interakcje naturalnie trwają dłużej niż inne, ale w przypadku szczególnie złożonych interakcji należy szybko przedstawić wstępne informacje wizualne informujące użytkownika o konkretnej sytuacji. Najwcześniejszym możliwym rozwiązaniem, aby to zrobić, jest kolejna ramka, którą wyrenderuje przeglądarka.

Dlatego intencją INP nie jest pomiar wszystkich konkretnych skutków interakcji, takich jak pobrania sieci i aktualizacje interfejsu użytkownika w wyniku innych operacji asynchronicznych, ale czas zablokowania następnego wyrenderowania. Opóźnienia w otrzymywaniu informacji wizualnych mogą spowodować, że użytkownicy odczują wrażenie, że strona nie odpowiada wystarczająco szybko. Opracowaliśmy wtedy INP, aby pomóc deweloperom mierzyć tę część wygody użytkowników.

W poniższym filmie przykład po prawej stronie od razu pokazuje, że akordeon jest otwierany. Słaba responsywność została przedstawiona na przykładzie po lewej stronie i w jaki sposób może to negatywnie wpływać na wygodę użytkowników.

Ten przewodnik wyjaśnia, jak działa wskaźnik INP i jak go mierzyć, oraz wskazuje materiały, które pomogą go ulepszyć.

Co to jest INP?

INP to wskaźnik służący do oceny ogólnej responsywności strony w odniesieniu do interakcji użytkownika poprzez obserwację opóźnienia wszystkich kliknięć, dotknięć oraz interakcji z klawiaturą w całym okresie aktywności użytkownika na danej 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ą uruchamiane podczas tego samego logicznego gestu użytkownika. Na przykład interakcje polegające na „dotknięciu” na urządzeniu z ekranem dotykowym obejmują kilka zdarzeń, np. pointerup, pointerdown i click. Interakcja może być zależna od JavaScriptu, CSS, wbudowanych elementów przeglądarki (takich jak elementy formularza) lub ich kombinacji.

Czas oczekiwania na interakcję składa się z jednego najdłuższego czasu trwania grupy modułów obsługi zdarzeń, które powodują interakcję – od momentu rozpoczęcia interakcji przez użytkownika do momentu, gdy przeglądarka wyświetli następną klatkę.

Jaki jest dobry wynik INP?

Przypinanie etykiet takich jak „dobra” lub „słabe” do wskaźnika reagowania jest trudne. Z jednej strony warto promować działanie aplikacji, które traktują priorytetowo dobry czas reagowania. Z drugiej strony trzeba wziąć pod uwagę fakt, że możliwości urządzeń, z których korzystają użytkownicy, są bardzo zróżnicowane.

Aby zadbać o wygodę użytkowników i szybko reagować, dobrym progiem jest 75 centyl wczytań strony zarejestrowanych w polu, podzielony na urządzenia mobilne i komputery:

• Wartość INP mniejsza niż 200 milisekund oznacza, że strona ma dobrą responsywność.
• Wartość INP powyżej 200 milisekund i poniżej lub 500 milisekund oznacza, że responsywność strony wymaga poprawy.
• Wartość INP większa niż 500 milisekund oznacza, że strona ma słabą responsywność.

Co obejmuje interakcja?

Głównym czynnikiem zwiększającym interaktywność jest często JavaScript, chociaż przeglądarki umożliwiają interakcję za pomocą elementów sterujących nie wykorzystujących JavaScript, takich jak pola wyboru, przyciski i elementy sterujące oparte na CSS.

Na potrzeby INP obserwujemy tylko te typy interakcji:

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

Interakcje mają miejsce w głównym dokumencie lub w elementach iframe umieszczonych w dokumencie, na przykład po kliknięciu przycisku odtwarzania umieszczonego filmu. Użytkownicy nie będą wiedzieć, co znajduje się w elemencie iframe, więc do pomiaru wrażeń użytkowników na stronie najwyższego poziomu potrzebny jest kod INP w elementach iframe. Internetowe interfejsy API JavaScript nie mają dostępu do zawartości elementów iframe, więc może to wykazywać różnicę między CrUX i RUM.

Interakcje mogą się składać z wielu zdarzeń. Na przykład naciśnięty klawisz zawiera zdarzenia keydown, keypress i keyup. Interakcje z kliknięciami obejmują zdarzenia pointerup i pointerdown. Łączny czas oczekiwania interakcji ma najdłuższy czas trwania zdarzenia.

Wartość INP strony jest obliczana, gdy użytkownik ją opuszcza. Rezultatem jest pojedyncza wartość, która odzwierciedla ogólną responsywność strony w całym jej cyklu życia. Niski wskaźnik 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ść zastępująca opóźnienie przy pierwszym działaniu (FID). Oba rodzaje danych są danymi responsywności, ale FID zmierzył tylko opóźnienie wejściowe pierwszej interakcji na stronie. INP poprawia FID przez obserwację wszystkich interakcji na stronie, począwszy od opóźnienia danych wejściowych, przez czas potrzebny na uruchomienie modułów obsługi zdarzeń aż do momentu wyrenderowania następnej klatki przez przeglądarkę.

Te różnice 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 wrażenia użytkownika na stronie, a INP jest bardziej wiarygodnym wskaźnikiem ogólnej responsywności niezależnie od tego, w którym momencie w trakcie działania strony miała miejsce interakcja użytkownika.

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

Strona może nie zwrócić wartości INP. Może się tak zdarzyć z różnych powodów, między innymi:

• Strona została wczytana, ale użytkownik nie kliknął żadnego klawisza ani nie naciśnie go na klawiaturze.
• Strona się załadowała, ale użytkownik wszedł z nią w interakcję za pomocą niemierzonych gestów, takich jak przewijanie lub najeżdżanie na elementy.
• Dostęp do strony uzyskuje robot (np. robot wyszukiwarki lub przeglądarka bez interfejsu graficznego), która nie została napisana w skrypcie umożliwiającym interakcję ze stroną.

Jak mierzyć INP

INP można mierzyć zarówno w terenie, jak i w laboratorium przy użyciu różnych narzędzi.

W terenie

Optymalizowanie INP najlepiej zacząć od danych terenowych. Dane pól z Real User Monitoring (RUM) to nie tylko wartość INP strony, ale też dane kontekstowe, które pokazują, która konkretna interakcja była odpowiedzialna za samą wartość INP, czy interakcja miała miejsce podczas wczytywania strony czy po jej wczytaniu, jaki jest rodzaj interakcji (kliknięcie, naciśnięcie lub dotknięcie) i inne cenne czasy, które pomagają określić, która część interakcji miała wpływ na responsywność.

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

Chociaż CrUX poinformuje Cię, czy istnieje problem, nie powie Ci, co go spowodowało. Rozwiązanie RUM może pomóc Ci uzyskać więcej szczegółów na temat stron, użytkowników lub interakcji użytkowników, w przypadku których występują problemy z czasem reakcji. Możliwość przypisania wartości INP poszczególnym interakcjom pozwala uniknąć zgadywania i marnowanego wysiłku.

W laboratorium

Najlepiej zacząć testować w tym module, gdy masz już dane pola, które wskazują na powolne interakcje na stronie. Jeśli nie masz takich danych, możesz zastosować pewne strategie odtwarzania powolnych interakcji w module. Strategie obejmują śledzenie typowych przepływów pracy użytkowników i testowanie ich interakcji podczas jej wczytywania, a także interakcję z witryną podczas jej wczytywania – gdy wątek główny jest często najbardziej intensywny – w celu identyfikacji powolnych interakcji w trakcie tego istotnego etapu korzystania z witryny.

Jak poprawić INP

Dostępny jest zbiór przewodników po optymalizacji INP, które pomogą Ci zidentyfikować powolne interakcje w terenie i wykorzystać dane laboratoryjne do zidentyfikowania przyczyn i zoptymalizowania ich.

Historia zmian

Czasami błędy wykrywane są w interfejsach API używanych do pomiaru danych, a czasem w definicjach samych danych. Dlatego czasem trzeba wprowadzać określone zmiany, które mogą być widoczne w wewnętrznych raportach i panelach jako ulepszenia lub regresje.

Aby Ci w tym pomóc, wszystkie zmiany w implementacji lub definicji tych danych będą pojawiać się w tej historii zmian.

Jeśli chcesz podzielić się opinią na temat tych danych, umieść ją w grupie dyskusyjnej Google web-vitals-feedback.

Sprawdź swoją wiedzę