Od interakcji do kolejnego wyrenderowania (INP)

Jeremy Wagner

Obsługa przeglądarek

  • 96
  • 96
  • x
  • x

Źródło

Od interakcji do następnego wyrenderowania (INP) to stabilne podstawowe dane internetowe, które pozwalają ocenić czas reakcji stron na podstawie danych z interfejsu Event Timing API. INP monitoruje opóźnienie wszystkich kliknięć, dotknięć i interakcji z klawiaturą w całym okresie jej życia i zgłasza najdłuższy czas trwania, ignorując wartości odstające. Niski wartość INP oznacza, że strona jest w stanie szybko reagować na większość interakcji użytkowników.

Dobra responsywność oznacza, że strona szybko reaguje na interakcje. Gdy strona reaguje na interakcję, w następnej renderowanej ramce przeglądarka przesyła wizualną opinię informującą o tym, że interakcja się udała. Może na przykład przekazać opinię na te tematy:

  • Czy produkt, który dodajesz do koszyka na zakupy online, jest rzeczywiście dodawany.
  • Określa, czy zostało otwarte menu nawigacyjne na urządzeniu mobilnym.
  • Wskazuje, czy zawartość danych logowania jest uwierzytelniana przez serwer.

Niektóre interakcje w naturalny sposób trwają dłużej niż inne, ale w przypadku szczególnie złożonych interakcji warto szybko przedstawić wstępne informacje wizualne informujące użytkownika o problemie. Czas do kolejnego wyrenderowania to najwcześniejsza okazja, by to zrobić. Dlatego celem INP jest pomiar nie wszystkich konkretnych skutków interakcji (takich jak pobrania sieci i aktualizacje interfejsu użytkownika w wyniku innych operacji asynchronicznych), ale czas, w którym wyrenderowanie next jest zablokowane. Opóźniając generowanie opinii wizualnych, możesz sprawić, że użytkownicy uznają, że strona nie reaguje na ich działania.

Celem INP jest skrócenie czasu od momentu inicjowania interakcji przez użytkownika do wyrenderowania następnej klatki w przypadku wszystkich lub większości interakcji zainicjowanych przez użytkownika.

Przykład niskiej i dobrej reakcji. Długie zadania po lewej stronie uniemożliwiają otwarcie akordeonu. Użytkownik klika kilka razy, uznając, że nie działa. Gdy wątek główny nadąża, przetwarza opóźnione dane wejściowe, co powoduje nieoczekiwane otwieranie i zamykanie akordeonu. Bardziej elastyczna strona po prawej stronie otwiera się szybko i bez incydentu.
Uwaga na temat obliczania wartości INP

INP oblicza się przez obserwację wszystkich interakcji ze stroną. W przypadku większości witryn interakcja o najkrótszym czasie oczekiwania jest raportowana jako INP. W przypadku stron z dużą liczbą interakcji losowe przerwy w działaniu mogą jednak spowodować nadzwyczaj duże opóźnienie interakcji z witryną elastyczną. Im więcej interakcji, tym większe prawdopodobieństwo, że tak się stanie. Aby temu przeciwdziałać i mieć lepszy wgląd w rzeczywistą responsywność stron tego typu, ignorujemy 1 najwyższą interakcję na każde 50 interakcji. Większość interakcji ze stronami nie obejmuje ponad 50 interakcji, dlatego przeglądarka prawie zawsze zgłasza najgorszą z nich. Raportowany jest następnie 75 centyl wszystkich wyświetleń strony, co pozwala wyeliminować wartości odstające, aby uzyskać bardziej reprezentatywną dla ogółu użytkowników wartość.

Interakcja to grupa modułów obsługi zdarzeń, które są uruchamiane podczas tego samego logicznego gestu 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ć zależna od JavaScriptu, CSS, wbudowanych elementów przeglądarki (np. elementów formularza) lub kombinacji tych elementów.

Czas oczekiwania na interakcję składa się z jednego najdłuższego czasu trwania grupy modułów obsługi zdarzeń, które odpowiadają za interakcję – od momentu rozpoczęcia interakcji przez użytkownika do momentu, gdy następna klatka wyświetli się w formie wizualnej informacji zwrotnych.

Co ważne, więcej informacji o pomiarze INP znajdziesz w artykule Co to jest w interakcji?.

Jaki jest dobry wynik INP?

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

  • Wartość INP równa lub mniejsza niż 200 milisekund oznacza, że strona ma dobrą responsywność.
  • Wartość INP w przedziale od 200 milisekund do 500 milisekund oznacza, że strona wymaga poprawy reakcji.
  • Wartość INP większa niż 500 milisekund oznacza, że strona ma słabe czasy reagowania.
Dobre wartości INP to 200 milisekund lub mniej, niskie – więcej niż 500 milisekund, a wszystkie pozostałe wymagają poprawy.
Dobre wartości INP nie przekraczają 200 ms. Niskie wartości przekraczają 500 ms.

Co obejmuje interakcja?

Diagram przedstawiający interakcję w wątku głównym. Podczas blokowania działania zadań użytkownik wprowadza dane wejściowe. Dane wejściowe są opóźnione do czasu zakończenia tych zadań. Po zakończeniu tego procesu wskaźniki, wskaźnik myszy i moduły obsługi zdarzeń kliknięcia są uruchamiane, a następnie renderowanie i malowanie jest kontynuowane do momentu wyświetlenia następnej klatki.
Czas życia interakcji. Opóźnienie danych wejściowych utrzymuje się do momentu uruchomienia modułów obsługi zdarzeń. Może to być spowodowane takimi czynnikami jak długie zadania w wątku głównym. Moduły obsługi zdarzeń interakcji są uruchamiane, a kolejne opóźnienie następuje przed wyświetleniem następnej ramki.

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.

W przypadku INP obserwujemy tylko te typy interakcji:

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

Co ważne: najeżdżanie kursorem i przewijanie nie ma wpływu na wartość INP. Jednak przewijanie za pomocą klawiatury (spacja, Page Up, Page Down itd.) wymaga naciśnięcia klawisza, który może wywołać inne zdarzenia mierzone przez INP. Skutki przewijania nie są uwzględniane przy obliczaniu INP.

Interakcje mają miejsce w głównym dokumencie lub w elementach iframe umieszczonych w dokumencie, np. po kliknięciu przycisku odtwarzania umieszczonego filmu. Ponieważ użytkownicy nie wiedzą, które części strony znajdują się w elementach iframe, trzeba zmierzyć wartość INP w elementach iframe, aby dokładnie zmierzyć wartość dla całej strony. Jednak interfejsy API języka JavaScript nie mają dostępu do zawartości elementów iframe i mogą nie być w stanie zmierzyć INP w tym elemencie. To różnica między CrUX i RUM.

Interakcje mogą się składać z wielu zdarzeń. Na przykład naciśnięcia klawiszy obejmują zdarzenia keydown, keypress i keyup, a interakcje polegające na dotknięciu obejmują zdarzenia pointerup i pointerdown. Jako czas oczekiwania interakcji wybiera się zdarzenie o najdłuższym czasie trwania interakcji.

Bardziej złożone przedstawienie interakcji obejmującej 2 interakcje. Pierwszym z nich jest zdarzenie najechania kursorem myszy, które powoduje utworzenie klatki, zanim zostanie wypuszczony przycisk myszy, co inicjuje dalszą pracę aż do pojawienia się kolejnej klatki.
Gdy użytkownik naciśnie przycisk myszy, aby kliknąć, przeglądarka obsługuje interakcję i wyświetla ramkę wizualną reakcji. Gdy użytkownik zwolni przycisk myszy, przed przeglądarką pojawi się kolejna seria modułów obsługi zdarzeń.

Wartość INP jest obliczana, gdy użytkownik opuszcza stronę, i w ten sposób powstaje 1 wartość reprezentująca ogólną responsywność strony w całym jej cyklu życia. Niski wartość INP oznacza, że strona prawidłowo reaguje na dane wejściowe 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 rodzaje danych są wskaźnikami elastyczności, ale FID zmierzył tylko opóźnienie wejściowe pierwszej interakcji na stronie. INP polepsza wartość FID dzięki uwzględnieniu wszystkich interakcji ze stroną – od opóźnienia danych wejściowych przez czas potrzebny na uruchomienie modułów obsługi zdarzeń aż po wyrenderowanie następnej klatki przez przeglądarkę.

Te różnice oznaczają, że INP i FID to różne rodzaje wskaźników elastycznoś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 cyklu interakcji ze stroną miała miejsce interakcja.

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

Strona może nie zwrócić wartości INP. Powodów może być kilka, między innymi:

  • Strona została wczytana, ale użytkownik nie wchodził z nią w interakcję.
  • Strona się załadowała, ale użytkownik wchodził z nią w interakcję za pomocą niemierzonych gestów, takich jak przewijanie lub najeżdżanie na elementy.
  • Dostęp do strony ma robot (np. robot do wyszukiwania lub przeglądarka bez interfejsu graficznego), który nie został napisany w sposób umożliwiający interakcję ze stroną.

Jak mierzyć INP

INP można mierzyć zarówno w terenie, jak i w laboratorium za pomocą różnych narzędzi.

Co ważne, aby zmierzyć wartość INP witryny, najlepiej jest zbierać dane od rzeczywistych użytkowników w terenie. Jeśli jesteś przyzwyczajony do oceny skuteczności na podstawie danych z modułu, przeczytaj artykuł Dlaczego dane laboratoryjne mogą się różnić od danych w terenie (i co możesz z tym zrobić).

W terenie

Najlepiej jest 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 interakcja odpowiadała za samą wartość INP, np. w trakcie wczytywania strony czy po jej wczytaniu, rodzaj interakcji (kliknięcie, naciśnięcie lub kliknięcie) i inne cenne informacje.

Jeśli Twoja witryna kwalifikuje się do uwzględnienia w Raporcie na temat użytkowania Chrome (CrUX), możesz szybko uzyskać dane z pola INP za pomocą narzędzia CrUX w PageSpeed Insights wraz z danymi o 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 strony.

Mimo że raport CrUX może wskazać, że istnieje problem na poziomie ogólnym, często nie zawiera on wystarczająco szczegółowych informacji, które pozwoliłyby go w pełni zrozumieć. Rozwiązanie RUM może pomóc w uzyskaniu dodatkowych informacji o stronach, użytkownikach i interakcjach, które wykazują powolne interakcje. Możliwość przypisywania wartości INP poszczególnym interakcjom pozwala uniknąć zgadywania i marnowanego wysiłku.

W laboratorium

Najlepiej zacząć testy w module, gdy uzyskasz dane terenowe, które wskazują na powolne interakcje. Jednak ze względu na brak danych terenowych istnieją strategie odtwarzania powolnych interakcji w module. Strategie obejmują śledzenie typowych działań użytkowników i testowanie ich po drodze, a także interakcję ze stroną podczas jej wczytywania, gdy wątek główny jest często najbardziej intensywny, co pozwala ograniczyć powolne interakcje w tym kluczowym momencie.

Jak poprawić INP

Zapoznaj się z naszym zbiorem przewodników po optymalizacji INP, aby dowiedzieć się, jak identyfikować powolne interakcje w terenie i wykorzystywać dane laboratoryjne do 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 czasem trzeba wprowadzać zmiany, które mogą się pojawiać jako ulepszenia lub regresje w wewnętrznych raportach i panelach.

Aby Ci w tym pomóc, wszystkie zmiany w implementacji lub definicji tych danych są opisane w tej historii zmian.

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