Od interakcji do kolejnego wyrenderowania (INP)

Obsługa przeglądarek

  • Chrome: 96.
  • Edge: 96.
  • Firefox: nieobsługiwane.
  • Safari: nieobsługiwane.

Źródło

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.

Porównanie prawidłowej i nieprawidłowej reakcji. Po lewej stronie długie zadania blokują otwarcie harmonijki. Użytkownik musi wtedy klikać wielokrotnie, ponieważ myśli, że coś jest nie tak. Gdy wątek główny nadąży za wątkiem podrzędnym, przetwarza opóźnione dane wejściowe, co powoduje nieoczekiwane otwieranie i zamykanie harmonijki. Po prawej stronie strona o większej szybkości reakcji otwiera harmonijkę szybko i bez problemó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.

Wartość INP jest obliczana przez obserwację wszystkich interakcji ze stroną. W przypadku większości witryn interakcja o największym opóźnieniu jest raportowana jako INP.

Jednak w przypadku stron z dużą liczbą interakcji losowe problemy mogą powodować nietypowo długi czas oczekiwania na interakcję na stronie responsywnej. Im więcej interakcji występuje na danej stronie, tym większe jest prawdopodobieństwo, że użytkownik ją opuści.

Aby lepiej mierzyć rzeczywistą responsywność stron o dużej liczbie interakcji, ignorujemy 1 najwyższą interakcję na 50 interakcji. Zdecydowana większość przypadków jakości stron nie ma więcej niż 50 interakcji, więc najczęściej raportowana jest najgorsza interakcja. 75. percentyl wszystkich wyświetleń strony jest następnie raportowany w zwykły sposób, co pozwala wyeliminować wartości odstające, aby podać wartość, która jest wyższa od wartości uzyskanej przez większość użytkowników lub na tym poziomie.

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, pointerdownclick. 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.
Dobre wartości INP trwają maksymalnie 200 milisekund, słabe wartości dłuższe niż 500 milisekund, a niektóre z nich wymagają poprawy.
Dobre wartości INP to 200 milisekund lub mniej. Wartości poniżej 500 milisekund są dobre, a powyżej 500 milisekund – złe.

Co zawiera interakcja?

Schemat przedstawiający interakcję w wątku głównym. Użytkownik wprowadza dane podczas wykonywania zadań blokujących. Dane wejściowe są opóźnione do momentu ukończenia tych zadań. Następnie uruchamiają się moduły obsługi zdarzeń wskaźnika, myszy i kliknięcia, a następnie renderowanie i malowanie rozpoczynają się aż do wyświetlenia następnej klatki.
Czas trwania interakcji. Opóźnienie wprowadzania danych występuje do momentu uruchomienia metod obsługi zdarzeń, co może być spowodowane czynnikami takimi jak długie zadania w wątku głównym. Następnie są wywoływane funkcje zwrotne event handler interakcji, a przed wyświetleniem następnej klatki występuje opóźnienie.

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, keypresskeyup. Interakcje z kliknięciem zawierają zdarzenia pointeruppointerdown. Zdarzenie o najdłuższym czasie trwania w ramach interakcji przyczynia się do łącznego opóźnienia interakcji.

Ilustracja bardziej złożonej interakcji zawierającej 2 interakcje. Pierwszym jest zdarzenie mousedown, które tworzy ramkę przed zwolnieniem przycisku myszy. Spowoduje to wykonanie kolejnych działań, aż do wyświetlenia kolejnej ramki.
Przedstawienie interakcji z wieloma modułami obsługi zdarzeń. Pierwsza część interakcji otrzymuje dane wejściowe, gdy użytkownik kliknie przycisk myszy. Zanim jednak zwolnią przycisk myszy, wyświetlana będzie ramka. Gdy użytkownik puszcza przycisk myszy, przed wyświetleniem następnej klatki musi zostać wykonana kolejna seria obsługi zdarzeń.

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ę

Jaki jest główny cel danych INP?

Aby mierzyć czas potrzebny na wyświetlenie pierwszej treści na stronie.
Umożliwia pomiar stabilności wizualnej strony i zminimalizowanie nieoczekiwanych zmian układu.
Aby zminimalizować czas od momentu, gdy użytkownik rozpoczyna interakcję, do momentu wyświetlenia następnego klatki w przypadku wszystkich lub większości interakcji, które rozpoczyna użytkownik.
Aby ocenić czas, po którym strona staje się w pełni interaktywna.

Które z tych typów interakcji są uwzględniane na potrzeby obliczania INP? (Zaznacz wszystkie pasujące odpowiedzi).

naciśnięcie klawisza na klawiaturze,
Kliknięcie na ekranie dotykowym.
Klikanie myszą.
Najechanie kursorem myszy na elementy.
przewijanie strony za pomocą kółka myszy lub trackpada;
Powiększ lub pomniejsz widok strony.

Jak definiuje się „opóźnienie” interakcji w przypadku INP?

Czas, po którym przeglądarka zaczyna przetwarzać moduły obsługi zdarzeń powiązane z interakcją.
Czas od rozpoczęcia interakcji do momentu pełnego wyświetlenia następnej ramki.
Czas potrzebny przeglądarce na przetworzenie modułów obsługi zdarzeń interakcji.
Jest to średni czas potrzebny do wywołania reakcji wizualnej przez wszystkie interakcje na stronie.

Jaka jest różnica między INP a FID?

INP uwzględnia pełny czas trwania wszystkich interakcji, podczas gdy FID mierzy tylko opóźnienie po pierwszym wprowadzeniu danych.
Nie ma różnicy. INP i FID to 2 różne nazwy tych samych danych.
INP i FID mierzą różne sygnatury czasowe, w których strona staje się interaktywna.
INP mierzy czas potrzebny do wyświetlenia pierwszej treści strony, a FID – responsywność na dane wejściowe użytkownika.

W jakich okolicznościach dane INP mogą być niedostępne dla stron w narzędziach takich jak PageSpeed Insights?

Nie ma wystarczającej ilości danych o interakcjach użytkowników Chrome, aby obliczyć wiarygodną wartość INP w zbiorze danych CrUX.
Użytkownicy wchodzili w interakcję ze stroną tylko przez przewijanie i najeżdżanie kursorem, które nie są brane pod uwagę w przypadku INP.
Strona została utworzona za pomocą platformy, która automatycznie optymalizuje ją pod kątem INP, więc nie musisz jej zgłaszać.
Strona korzysta z niestandardowej biblioteki pomiaru skuteczności, która nie przekazuje danych INP.

Jaka jest najskuteczniejsza strategia odtwarzania powolnych interakcji w środowisku laboratoryjnym?

Interakcje ze stroną podczas wczytywania i postępowanie zgodnie z typowymi czynnościami użytkownika w celu wykrywania potencjalnych wąskich gardeł.
Symulowanie urządzenia wysokiej klasy z wolnym i niestabilnym połączeniem sieciowym, aby stworzyć trudne warunki.
testowanie interakcji dopiero po pełnym załadowaniu i zawieszeniu strony;
Skupienie się na złożonych, skrajnych interakcjach, na które większość użytkowników prawdopodobnie nie ma dostępu.

Ten quiz został wygenerowany przez Gemini 1.5 i sprawdzony przez ludzi. Prześlij opinię