Interaction to Next Paint (INP)

Interaction to Next Paint (INP) to oczekująca metryka Core Web Vital, która zastąpi Opóźnienie Pierwszego Wejścia (FID) w marcu 2024 roku. INP ocenia responsywność, korzystając z danych z API Event Timing. Kiedy interakcja powoduje, że strona staje się nieresponsywna, jest to złe doświadczenie dla użytkownika. INP obserwuje opóźnienie wszystkich interakcji, które użytkownik miał ze stroną, i raportuje jedną wartość, poniżej której były wszystkie (lub prawie wszystkie) interakcje. Niski INP oznacza, że strona była w stanie konsekwentnie szybko reagować na wszystkie – lub zdecydowaną większość – interakcji użytkownika.

Dane o użyciu Chrome pokazują, że 90% czasu użytkownika na stronie jest spędzane po jej załadowaniu. Dlatego staranne pomiar responsywności na przestrzeni całego cyklu życia strony jest ważne. To właśnie ocenia metryka INP.

Dobra responsywność oznacza, że strona szybko reaguje na interakcje z nią. Kiedy strona reaguje na interakcję, wynikiem jest wizualna informacja zwrotna, która jest prezentowana przez przeglądarkę w następnej ramce, którą przeglądarka prezentuje. Wizualna informacja zwrotna mówi Ci, czy na przykład przedmiot, który dodajesz do koszyka online, jest rzeczywiście dodawany, czy menu nawigacji mobilnej jest otwarte, czy treści formularza logowania są autentykowane przez serwer, i tak dalej.

Niektóre interakcje naturalnie zajmą więcej czasu niż inne, ale dla szczególnie skomplikowanych interakcji ważne jest, aby szybko przedstawić jakąś początkową wizualną informację zwrotną jako sygnał dla użytkownika, że coś się dzieje. Czas do następnego malowania to najwcześniejsza możliwość zrobienia tego. Dlatego celem INP nie jest mierzenie wszystkich ostatecznych efektów interakcji (takich jak pobieranie z sieci i aktualizacje interfejsu użytkownika z innych operacji asynchronicznych), ale czas, w którym następne malowanie jest blokowane. Opóźniając wizualną informację zwrotną, możesz dawać użytkownikom wrażenie, że strona nie reaguje na ich działania.

Celem INP jest zapewnienie, że czas od momentu inicjacji interakcji przez użytkownika do momentu namalowania następnej ramki jest jak najkrótszy, dla wszystkich lub większości interakcji, które użytkownik wykonuje.

W poniższym filmie, przykład po prawej stronie daje natychmiastową wizualną informację zwrotną, że akordeon się otwiera. Pokazuje również, jak słaba responsywność może powodować wiele niezamierzonych reakcji na wejście, ponieważ użytkownik myśli, że doświadczenie jest zepsute.

Przykład słabej i dobrej responsywności. Po lewej stronie, długie zadania blokują otwarcie akordeonu. Powoduje to, że użytkownik klika wiele razy, myśląc, że doświadczenie jest zepsute. Kiedy główny wątek nadąża, przetwarza opóźnione wejścia, co skutkuje nieoczekiwanym otwarciem i zamknięciem akordeonu. Ten artykuł wyjaśnia, jak działa INP, jak go mierzyć i wskazuje na zasoby, które pomogą go poprawić.

Co to jest INP?

INP to metryka, która ocenia ogólną responsywność strony na interakcje użytkownika, obserwując opóźnienie wszystkich interakcji kliknięć, dotknięć i klawiatury, które występują w trakcie całego czasu trwania wizyty użytkownika na stronie. Końcowa wartość INP to najdłuższa zaobserwowana interakcja, ignorując wartości odstające.

INP to nowa metryka Core Web Vitals zaprojektowana w celu zapewnienia reprezentacji ogólnego opóźnienia interakcji na stronie.

Robi to, pracując na podstawie próbki najdłuższych interakcji, które zachodzą podczas wizyty użytkownika na stronie.

Jeśli strona ma mniej niż 50 całkowitych interakcji, INP bierze pod uwagę interakcję, która ma absolutnie najgorsze opóźnienie.

Pomiar INP jest reprezentacją tego, jak długo użytkownik musi poświęcić na interakcję z całą stroną.

Jest to bezpośrednie przeciwieństwo FID (First Input Delay).

FID po prostu mierzy tylko pierwszą reakcję na interakcję przez konkretnego użytkownika.

Jak oblicza się INP

Jak wspomniano powyżej, INP jest obliczany poprzez obserwację wszystkich interakcji z daną stroną. Dla większości stron interakcja o najgorszym opóźnieniu jest raportowana jako INP. Jednak dla stron z dużą liczbą interakcji, losowe zakłócenia mogą skutkować niezwykle wysoką interakcją na inaczej responsywnej stronie. Im więcej interakcji, tym większe prawdopodobieństwo, że to się stanie. Aby temu przeciwdziałać i lepiej mierzyć rzeczywistą responsywność tego typu stron, ignorujemy jedną najwyższą interakcję na każde 50 interakcji. Zdecydowana większość doświadczeń na stronach nie ma ponad 50 interakcji, więc raportuje najgorszą interakcję. 75. percentyl wszystkich wyświetleń stron jest następnie raportowany jak zwykle, co dodatkowo eliminuje wartości odstające, dając wartość, którą doświadcza zdecydowana większość użytkowników lub lepszą.

Interakcja to grupa procedur obsługi zdarzeń, które są wywoływane podczas tego samego logicznego gestu użytkownika. Na przykład interakcje „tap” na urządzeniu z ekranem dotykowym obejmują wiele zdarzeń, takich jak pointerup, pointerdown i click. Interakcja może być sterowana przez JavaScript, CSS, wbudowane kontrole przeglądarki (takie jak elementy formularza) lub kombinację tych elementów.

Opóźnienie interakcji składa się z pojedynczego najdłuższego czasu trwania grupy procedur obsługi zdarzeń, które sterują interakcją, od momentu rozpoczęcia interakcji przez użytkownika do momentu prezentacji następnej ramki z wizualną informacją zwrotną.

Jaki jest dobry wynik INP?

Przypisywanie etykiet takich jak „dobry” czy „słaby” metryce responsywności jest trudne. Z jednej strony chcesz zachęcać do praktyk programistycznych, które priorytetowo traktują dobrą responsywność. Z drugiej strony musisz uwzględnić fakt, że istnieje znaczna zmienność w możliwościach urządzeń, których ludzie używają, aby ustawić realne oczekiwania programistyczne.

Aby zapewnić, że dostarczasz doświadczenia użytkownikom o dobrej responsywności, dobrym progiem do pomiaru jest 75. percentyl załadowań stron zarejestrowanych w terenie, podzielony na urządzenia mobilne i stacjonarne:

INP poniżej lub równy 200 milisekund oznacza, że twoja strona ma dobrą responsywność. INP powyżej 200 milisekund i poniżej lub równy 500 milisekund oznacza, że responsywność twojej strony wymaga poprawy. INP powyżej 500 milisekund oznacza, że twoja strona ma słabą responsywność.

Życie interakcji. Opóźnienie wejścia występuje do momentu rozpoczęcia działania procedur obsługi zdarzeń, co może być spowodowane czynnikami takimi jak długie zadania na głównym wątku. Następnie uruchamiane są procedury obsługi zdarzeń interakcji, a przed prezentacją następnej ramki występuje opóźnienie.

Głównym motorem interaktywności jest często JavaScript, chociaż przeglądarki zapewniają interaktywność za pomocą kontrolek niezasilanych przez JavaScript, takich jak pola wyboru, przyciski radiowe i kontrolki zasilane przez CSS.

Jeśli chodzi o INP, obserwowane są tylko następujące typy interakcji:

• Kliknięcie myszą.
• Dotknięcie na urządzeniu z ekranem dotykowym.
• Naciśnięcie klawisza na fizycznej lub ekranowej klawiaturze.

Ważne: Najechanie kursorem i przewijanie nie wpływają na INP. Jednak przewijanie za pomocą klawiatury (spacja, strona w górę, strona w dół itp.) obejmuje naciśnięcie klawisza, które może wywołać inne zdarzenia, które INP mierzy.

Wynikowe przewijanie nie jest uwzględniane w obliczaniu INP. Interakcje zachodzą w głównym dokumencie lub w ramkach osadzonych w dokumencie – na przykład kliknięcie play na osadzonym filmie. Użytkownicy końcowi nie będą świadomi, co jest w ramce, a co nie. Dlatego INP w ramkach jest potrzebne do pomiaru doświadczenia użytkownika na stronie najwyższego poziomu. Zauważ, że JavaScript Web APIs nie będą miały dostępu do zawartości ramki, więc mogą nie być w stanie mierzyć INP w ramce, a to pokaże się jako różnica między CrUX a RUM.^[1]https://web.dev/crux-and-rum-differences/#iframes

Interakcje mogą składać się z dwóch części, z których każda zawiera wiele zdarzeń. Na przykład naciśnięcie klawisza składa się z zdarzeń keydown, keypress i keyup. Interakcje dotykowe zawierają zdarzenia pointerup i pointerdown. Zdarzenie o najdłuższym czasie trwania w ramach interakcji jest wybierane jako opóźnienie interakcji.

Przedstawienie interakcji z wieloma procedurami obsługi zdarzeń. Pierwsza część interakcji otrzymuje wejście, gdy użytkownik naciska przycisk myszy. Jednak zanim zwolnią przycisk myszy, prezentowana jest ramka.

Kiedy użytkownik zwalnia przycisk myszy, kolejna seria procedur obsługi zdarzeń musi działać przed prezentacją następnej ramki. INP jest obliczany, gdy użytkownik opuszcza stronę, co skutkuje pojedynczą wartością, która jest reprezentatywna dla ogólnej responsywności strony na przestrzeni całego cyklu życia strony. Niski INP oznacza, że strona jest niezawodnie responsywna na wejście użytkownika.

Czym INP różni się od First Input Delay (FID)?

Gdzie INP uwzględnia wszystkie interakcje na stronie, First Input Delay (FID)^[2]https://web.dev/fid/ uwzględnia tylko pierwszą interakcję. Mierzy również tylko opóźnienie pierwszej interakcji, a nie czas potrzebny na uruchomienie procedur obsługi zdarzeń, ani opóźnienie w prezentacji następnej ramki.

Biorąc pod uwagę, że FID jest również metryką responsywności ładowania^[3]https://web.dev/user-centric-performance-metrics/#types-of-metrics, jej założeniem jest, że jeśli pierwsza interakcja ze stroną w fazie ładowania ma małe lub niemal niezauważalne opóźnienie wejścia, strona zrobiła dobre pierwsze wrażenie.

INP to coś więcej niż tylko pierwsze wrażenia. Przez próbkowanie wszystkich interakcji, responsywność może być oceniana kompleksowo, co czyni INP bardziej wiarygodnym wskaźnikiem ogólnej responsywności niż FID.

Co jeśli nie zgłoszono wartości INP?

Możliwe, że strona może nie zwrócić wartości INP. Może się to zdarzyć z wielu powodów:

• Strona została załadowana, ale użytkownik nigdy nie kliknął, nie dotknął ani nie nacisnął klawisza na swojej klawiaturze.
• Strona została załadowana, ale użytkownik interaktywował ze stroną za pomocą gestów, które nie obejmowały kliknięcia, dotknięcia lub użycia klawiatury. Na przykład przewijanie lub najechanie na elementy nie wpływa na obliczanie INP.
• Stronę przegląda bot, taki jak crawler wyszukiwarki lub przeglądarka bezobsługowa, która nie została zaprogramowana do interakcji ze stroną.

Jak mierzyć INP

INP można mierzyć zarówno w „terenie”^[4]https://web.dev/lab-and-field-data-differences/#field-data, jak i w laboratorium^[5]https://web.dev/lab-and-field-data-differences/#lab-data za pomocą różnych narzędzi.

Ważne: Najlepszym sposobem na pomiar INP Twojej strony internetowej jest zebranie metryk od rzeczywistych użytkowników w terenie. Jeśli jesteś przyzwyczajony do polegania na danych z laboratorium do oceny wydajności, poświęć trochę czasu na przeczytanie, dlaczego dane z laboratorium i z terenu mogą się różnić (i co z tym zrobić). Więcej: https://web.dev/lab-and-field-data-differences/

W terenie

Idealnie, Twoja podróż w optymalizacji INP rozpocznie się od danych z terenu. W najlepszym przypadku, dane z terenu z Real User Monitoring (RUM) dadzą Ci nie tylko wartość INP strony, ale także dane kontekstowe, które podkreślają, która konkretna interakcja była odpowiedzialna za wartość INP, czy interakcja wystąpiła podczas czy po załadowaniu strony, typ interakcji (kliknięcie, naciśnięcie klawisza, dotknięcie) i inne cenne informacje.

Aby dowiedzieć się więcej zobacz: https://web.dev/find-slow-interactions-in-the-field/

Jeśli Twoja strona kwalifikuje się do włączenia do Raportu o Doświadczeniach Użytkowników Chrome (CrUX), możesz szybko uzyskać dane z terenu dla INP za pośrednictwem CrUX w PageSpeed Insights (i innych Core Web Vitals). W minimalnym zakresie możesz uzyskać obraz poziomu źródła dla INP Twojej strony, ale w niektórych przypadkach możesz również uzyskać dane na poziomie strony.

Jednak, chociaż CrUX jest przydatny do powiedzenia Ci, że na wysokim poziomie jest problem, często nie dostarcza wystarczająco dużo szczegółów, aby w pełni zrozumieć, jaki jest problem. Rozwiązanie RUM może pomóc Ci zagłębić się w więcej szczegółów co do stron, użytkowników lub interakcji użytkowników, które doświadczają wolnych interakcji. Możliwość przypisania INP do poszczególnych interakcji pozwala uniknąć zgadywania i marnowania wysiłku.

W laboratorium

Optymalnie, będziesz chciał zacząć testować w laboratorium, gdy masz dane z terenu sugerujące, że masz wolne interakcje. W przypadku braku danych z terenu, istnieją jednak pewne strategie reprodukowania wolnych interakcji w laboratorium.

Takie strategie obejmują śledzenie typowych ścieżek użytkowników i testowanie interakcji w trakcie, a także interakcję ze stroną podczas ładowania – kiedy główny wątek jest często najbardziej zajęty – w celu wydobycia wolnych interakcji podczas tego kluczowego elementu doświadczenia użytkownika.

Aby dowiedzieć się więcej zobacz: https://web.dev/diagnose-slow-interactions-in-the-lab/

Jak poprawić INP

Dostępna jest kolekcja przewodników po optymalizacji INP, które przeprowadzą Cię przez proces identyfikacji wolnych interakcji w terenie i wykorzystania danych z laboratorium do analizy i optymalizacji ich na różne sposoby. Podstawowy znajdziesz na stronie https://web.dev/optimize-inp/