Ta strona została przetłumaczona przez Cloud Translation API.

Od interakcji do kolejnego wyrenderowania (INP)

Jeremy Wagner

Obsługa przeglądarek

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 celem INP nie jest mierzenie wszystkich końcowych efektó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 wyświetlenie informacji wizualnych, 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.

Przykład niskiej i dobrej reakcji. Po lewej stronie długie zadania blokują akordeon. Sprawia to, że użytkownik klika wiele razy, sądząc, że nie działa. W takim przypadku przetwarza opóźnione dane wejściowe, w wyniku czego akordeon otwiera się i zamyka w nieoczekiwany sposób. Bardziej elastyczna strona po prawej otwiera akordeon szybko i bez incydentów.

Z tego przewodnika dowiesz się, jak działa INP, jak go mierzyć i wskazywać zasoby, które umożliwiają jego poprawę.

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.

Szczegółowe informacje o sposobie obliczania wartości INP

Wartość INP jest obliczana przez obserwację wszystkich interakcji ze stroną. W przypadku większości witryn interakcja o największym czasie oczekiwania jest podawana jako INP.

Jednak w przypadku stron z dużą liczbą interakcji losowe czkawki mogą prowadzić do interakcji z bardzo długimi czasem oczekiwania na stronie, która reaguje na bardzo długo. Im więcej interakcji na stronie, tym większe prawdopodobieństwo.

Aby dokładniej zmierzyć rzeczywistą responsywność stron z dużą liczbą interakcji, ignorujemy jedną 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. Następnie raportowany jest 75 centyl wszystkich wyświetleń strony, co pozwala usunąć wartości odstające, aby ustalić wartość, która jest lub jest korzystna dla większości użytkowników.

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.

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 nie przekraczają 200 milisekund. Nieprawidłowe wartości przekraczają 500 milisekund.

Co to jest interakcja?

Schemat przedstawiający interakcję w wątku głównym. Użytkownik wprowadza dane wejściowe, blokując wykonywanie zadań. 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 danych wejściowych występuje przed uruchomieniem modułów obsługi zdarzeń. Może to być spowodowane takimi czynnikami jak długie zadania w wątku głównym. Następnie są uruchamiane wywołania zwrotne zdarzenia obsługi zdarzeń i występuje opóźnienie przed wyświetleniem następnej klatki.

Głównym czynnikiem wpływającym na interaktywność jest często JavaScript, chociaż przeglądarki zapewniają interaktywność dzięki elementom sterującym, które nie korzystają z JavaScriptu, takich 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 wrażeń 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 wpływa na całkowity czas oczekiwania na interakcję.

Ilustracja bardziej złożonej interakcji obejmującej 2 interakcje. Pierwszy z nich to zdarzenie myszy na ekranie, które powoduje wyświetlenie klatki przed zwolnieniem przycisku myszy i rozpoczęcie dalszych działań aż do wyświetlenia kolejnej klatki. — Ilustracja 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 zwolni przycisk myszy, przed wyświetleniem następnej klatki musi zostać uruchomiona inna seria modułów obsługi zdarzeń.

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 została wczytana, ale użytkownik wszedł z nią w interakcję za pomocą gestów, które nie są mierzone, np. przewijania lub najeżdżania 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 mierzyć 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ę

Jaki jest główny cel danych INP?

Do pomiaru czasu potrzebnego na wyświetlenie pierwszej zawartości strony.

Nieprawidłowo – opisuje pierwsze wyrenderowanie treści

Umożliwia pomiar stabilności wizualnej strony i zminimalizowanie nieoczekiwanych zmian układu.

Nieprawidłowo – opisuje skumulowane przesunięcie układu

Umożliwia ocenę czasu, po którym strona staje się w pełni interaktywna.

Źle – wartość jest związana z czasem do interakcji, ale INP skupia się na reagowaniu na dane wejściowe użytkownika

Aby zminimalizować czas od momentu zainicjowania przez użytkownika interakcji do wyrenderowania następnej klatki, w przypadku wszystkich lub większości interakcji inicjowanych przez użytkownika.

Dobrze!

Które z tych typów interakcji są obserwowane przy obliczaniu wartości INP? Zaznacz wszystkie pasujące odpowiedzi.

Klikanie myszą.

Dobrze!

Przewijanie strony za pomocą kółka myszy lub trackpada.

Źle – INP nie uwzględnia przewijania

Dotknięcie ekranu dotykowego.

Dobrze!

Najechanie kursorem myszy na elementy.

Źle – INP nie uwzględnia najechania kursorem

Naciśnięcie klawisza na klawiaturze.

Dobrze!

Powiększ lub pomniejsz widok strony.

Nieprawidłowe – INP nie uwzględnia powiększenia

Jaki jest „opóźnienie”? interakcji zdefiniowanej dla INP?

Czas, w którym przeglądarka przetwarza moduły obsługi zdarzeń interakcji.

Źle – uwzględnia tylko czas przetwarzania, bez opóźnienia wejściowego czy czasu wyświetlenia następnej klatki.

Jest to średni czas potrzebny do wywołania reakcji wizualnej przez wszystkie interakcje na stronie.

Źle – INP skupia się na najdłuższej interakcji, a nie na średniej

Czas, po którym przeglądarka zaczyna przetwarzać moduły obsługi zdarzeń powiązane z interakcją.

Źle – uwzględnia tylko opóźnienie danych wejściowych, a nie czas przetwarzania i renderowania.

Czas od początku interakcji do momentu pełnego wyświetlenia następnej klatki.

Dobrze!

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

INP mierzy czas potrzebny do wyświetlenia pierwszej treści strony, a FID – responsywność na dane wejściowe użytkownika.

Źle – opisuje pierwsze wyrenderowanie treści, a nie INP

INP uwzględnia pełny czas trwania wszystkich interakcji, a FID mierzy tylko opóźnienie wejściowe pierwszej interakcji.

Dobrze!

INP i FID mierzą różne sygnatury czasowe, w których strona staje się interaktywna.

Źle – wartości INP i FID określają, jak szybko strona reaguje na interakcje, niezależnie od tego, kiedy występują

Nie ma różnicy. INP i FID to po prostu 2 różne nazwy tego samego rodzaju danych.

Źle – mają różne definicje

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

Strona używa niestandardowej biblioteki pomiaru skuteczności, która nie raportuje danych INP.

Nieprawidłowa odpowiedź – wartość INP jest mierzona automatycznie za pomocą interfejsów API platformy internetowej i nie polega na tym, że strony samodzielnie zgłaszają swoją wydajność za pomocą bibliotek niestandardowych.

Nie ma wystarczającej ilości danych o interakcjach użytkowników Chrome, aby obliczyć istotną wartość INP w zbiorze danych CrUX.

Dobrze!

Użytkownicy wchodzili w interakcje ze stroną wyłącznie przez przewijanie i najeżdżanie kursorem. Nie jest to brane pod uwagę w przypadku INP.

Dobrze!

Strona została zbudowana przy użyciu platformy, która automatycznie optymalizuje się pod kątem INP, więc nie ma potrzeby jej raportowania.

Źle – zasady mogą pomóc w określaniu wartości INP, ale wskaźnik jest nadal ważny i raportowany, jeśli dostępne są dane

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

Symulowanie urządzenia wysokiej klasy z powolnym i niestabilnym połączeniem sieciowym w trudnych warunkach.

Źle – chociaż sieć może odegrać pewną rolę, możliwości urządzenia z większym prawdopodobieństwem będą narażać na powolne interakcje

Testowanie interakcji dopiero po całkowitym wczytaniu strony i po jej bezczynności.

Źle – w tym przypadku może brakować interakcji, które są powolne podczas wczytywania

Interakcje ze stroną podczas wczytywania i postępowanie zgodnie z typowymi czynnościami użytkownika w celu wykrywania potencjalnych wąskich gardeł.

Dobrze!

Skupienie się na złożonych, skrajnych interakcjach, na które większość użytkowników prawdopodobnie nie ma dostępu.

Źle – typowe schematy działań użytkowników są bardziej przydatne do identyfikowania typowych problemów z INP

✨ Ten test został wygenerowany przez Gemini 1.5 i sprawdzony przez ludzi. Podziel się opinią