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 z nią. Gdy strona odpowiada na interakcję, efektem jest wizualny komentarz, który przeglądarka przedstawia 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 zazwyczaj trwają dłużej niż inne, ale w przypadku szczególnie złożonych interakcji należy szybko przedstawić wstępne informacje wizualne, które będą sygnalizowały użytkownikowi, że coś się działa. Czas do kolejnego wyrenderowania to najwcześniejsza okazja, aby to zrobić. Dlatego zamierzeniem INP nie jest pomiar wszystkich ostatecznych efektó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 wizualne działania użytkowników, możesz mieć wrażenie, że strona nie reaguje na ich działania.
Celem INP jest zapewnienie jak najkrótszego czasu od momentu rozpoczęcia interakcji użytkownika do wyświetlenia kolejnej klatki, na wszystkie lub większość interakcji użytkownika.
W poniższym filmie przykład po prawej stronie od razu pokazuje, że akordeon jest otwierany. Pokazuje też, jak słabe reagowanie może spowodować wysyłanie wielu niezamierzonych odpowiedzi, ponieważ użytkownik uważa, że nie działa ona dobrze.
Z tego artykułu dowiesz się, jak działa wartość INP i jak ją mierzyć. Znajdziesz w nim też linki do materiałów, które pomogą Ci 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.
Jak już wspomnieliśmy, wartość 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. Jednak w przypadku stron z dużą liczbą interakcji losowe przerwy w ich działaniu mogą spowodować nietypowo dużą liczbę interakcji z witryną elastyczną. Im więcej interakcji, tym większe prawdopodobieństwo. Aby temu przeciwdziałać i mieć lepszy wgląd w rzeczywistość reagowania stron tego typu, ignorujemy jedną najwyższą interakcję na każde 50 interakcji. Zdecydowana większość elementów strony nie ma ponad 50 interakcji, więc w raporcie zostanie podana najgorsza z nich. Raportowany jest w zwykły sposób 75 centyl wszystkich wyświetleń strony, co pozwala wyeliminować wartości odstające i uzyskiwać większą wygodę u większości użytkowników.
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 generują interakcję – od momentu rozpoczęcia interakcji przez użytkownika do momentu, gdy następna klatka wyświetli się w formie wizualnej.
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 szybkość reagowania strony wymaga poprawy.
- Wartość INP większa niż 500 milisekund oznacza, że strona ma słabe czasy reagowania.
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.
Jeśli chodzi o INP, odnotowuje się 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, a co nie. Dlatego parametr INP w elementach iframe jest potrzebny do pomiaru wrażeń użytkowników na stronie najwyższego poziomu. Uwaga: internetowe interfejsy API JavaScript nie mają dostępu do zawartości elementu iframe, więc mogą nie być w stanie mierzyć wartości INP w tym elemencie. W takim przypadku pojawi się różnica między wartościami CrUX i RUM.
Interakcje mogą się składać z 2 części, z których każda może obejmować wiele zdarzeń. Na przykład naciśnięty klawisz składa się ze zdarzeń keydown, keypress i keyup. Interakcje z kliknięciami obejmują zdarzenia pointerup i pointerdown. Jako opóźnienie interakcji wybiera się zdarzenie o najdłuższym czasie trwania interakcji.
Wartość INP jest obliczana, gdy użytkownik opuszcza stronę, i otrzymuje jedną wartość, która jest reprezentatywna dla ogólnej responsywności strony w całym cyklu jej ż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)?
Gdzie INP uwzględnia wszystkie interakcje ze stroną, opóźnienie po pierwszej interakcji (FID) uwzględnia tylko pierwszą interakcję. Mierzy tylko opóźnienie wejściowe pierwszej interakcji, a nie czas potrzebny na uruchomienie modułów obsługi zdarzeń ani opóźnienie w wyświetleniu następnej klatki.
Biorąc pod uwagę, że FID jest również wskaźnikiem responsywności wczytywania, uzasadnia to fakt, że jeśli pierwsza interakcja ze stroną na etapie wczytywania ma niewielkie lub żadne widoczne opóźnienie wprowadzania, strona ta uzyskała dobre pierwsze wyświetlenie.
INP to coś więcej niż tylko pierwsze wrażenie. Próbkując wszystkie interakcje, można dokładnie ocenić responsywność, dzięki czemu INP jest bardziej wiarygodnym wskaźnikiem ogólnej reagowania niż FID.
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 kilku powodów:
- Strona została wczytana, ale użytkownik nie kliknął żadnego klawisza ani nie naciśnie go na klawiaturze.
- Strona została wczytana, ale użytkownik wchodził z nią w interakcję za pomocą gestów (nie było to kliknięcie, dotknięcie ani używanie klawiatury). Na przykład przewijanie elementów lub najeżdżanie na nie nie ma wpływu na sposób obliczania wartości INP.
- 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 interakcja odpowiadała za samą wartość INP, np. w trakcie wczytywania strony czy po jej wczytaniu, jaki jest rodzaj interakcji (kliknięcie, naciśnięcie lub dotknię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 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 strony.
Chociaż raport na temat użytkowania Chrome pomaga określić, że istnieje ogólny problem, 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 szczegółowym przeanalizowaniu stron, użytkowników i interakcji z użytkownikami, których interakcje przebiegają powoli. Możliwość przypisania wartości INP poszczególnym interakcjom pozwala uniknąć zgadywania i marnowanego wysiłku.
W laboratorium
Najlepiej zacząć testować w module, gdy masz już dane terenowe, które wskazują na powolne interakcje. W przypadku braku danych terenowych są jednak pewne strategie odtwarzania powolnych interakcji w module. Strategie te obejmują śledzenie typowych przepływów pracy użytkowników i testowanie ich interakcji podczas jej ładowania, a także interakcję z nią podczas wczytywania strony – gdy wątek główny jest często najbardziej intensywny – w celu wyeliminowania powolnych interakcji w trakcie tego istotnego etapu korzystania ze strony.
Jak poprawić INP
Opracowaliśmy zbiór przewodników po optymalizacji INP, które pomogą Ci w wykrywaniu powolnych interakcji w terenie i wykorzystywaniu danych laboratoryjnych do ich analizy i optymalizacji na różne sposoby.
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ę swoją opinią na temat tych danych, możesz ją przekazać w grupie dyskusyjnej Google web-vitals-feedback.