Interaction to Next Paint (INP) to nowy wskaźnik Core Web Vitals. Czym dokładnie jest? Czym różni się od FID (First Input Delay)? Jak go mierzyć i optymalizować? Tego i więcej dowiesz się w naszym artykule.
Czym jest Interaction to Next Paint (INP)?
Wskaźnik Interaction to Next Paint (tłumaczony jako „interakcja do kolejnego wyrenderowania”) to metryka Core Web Vitals, która ma zastąpić First Input Delay. Oto główne daty w historii rozwoju wskaźnika:
- maj 2022 – w Google Chrome ogłoszono wdrożenie eksperymentalnego wsparcia dla INP,
- maj 2023 – w Google Chrome wskaźnik INP staje się metryką Core Web Vitals,
- marzec 2024 – wskaźnik INP stanie się stabilną wartością Core Web Vitals i w pełni zastąpi FID.
Przeczytaj także:
Page Experience - jakość strony czynnikiem rankingowym GoogleCzym jest nowy podstawowy wskaźnik internetowy? Jak opisuje to jeden z pracowników Google:
„INP ocenia responsywność przy użyciu danych z Event Timing API. Gdy interakcja sprawia, że strona przestaje odpowiadać, świadczy to o niskiej jakości doświadczenia użytkownika. INP obserwuje opóźnienia wszystkich interakcji użytkownika ze stroną i zgłasza pojedynczą wartość, poniżej której znajdowały się wszystkie (lub prawie wszystkie) interakcje.
Niski INP oznacza, że strona była w stanie szybko reagować na wszystkie (lub zdecydowaną większość) interakcji użytkownika”.
Jak dokładnie działa wskaźnik INP i jak jest mierzony?
Metryka INP została zaprojektowana tak, aby stanowiła reprezentację ogólnego opóźnienia interakcji strony.
Jakie działania są interpretowane jako interakcje? INP skupia się na 3 z nich:
- Kliknięcia – każde kliknięcie interaktywnego elementu.
- Stuknięcia – każde dotknięcie elementu interaktywnego na urządzeniach z ekranami dotykowymi.
- Naciśnięcia klawiszy – naciśnięcia zarówno na klawiaturze fizycznej, jak i ekranowej.
INP obserwuje wszystkie kliknięcia, stuknięcia i naciśnięcia klawiszy, które zachodzą podczas całej wizyty użytkownika na stronie. Ostateczna wartość to najdłuższa zaobserwowana interakcja z pominięciem skrajnych wyników.
Dlaczego wprowadzono takie podejście? Otóż gdy na stronie ma miejsce wiele interakcji, istnieje większe ryzyko losowych „zacięć”. Często powodują one szczególnie wysokie opóźnienia, które nie są dobrą reprezentacją ogólnego stanu witryny. Aby temu przeciwdziałać, Google na 50 wybranych interakcji ignoruje jedną najwyższą.
Czym INP różni się od wskaźnika FID?
Google wskazuje na następujące cechy charakterystyczne FID:
„FID raportuje jedynie responsywność pierwszej interakcji użytkownika ze stroną. Choć pierwsze wrażenie jest ważne, taka interakcja niekoniecznie jest reprezentatywna dla wszystkich interakcji zachodzących na przestrzeni czasu działania strony.
Co więcej, FID mierzy tylko część opóźnienia pierwszej interakcji. Jest to inaczej czas, który przeglądarka musiała odczekać (z powodu zajętego głównego wątku), zanim w ogóle zaczęła obsługiwać interakcję”.
Jak nowy wskaźnik INP wypada w porównaniu z FID? W dalszej części artykułu czytamy:
„Zamiast jedynie mierzyć tylko pierwszą interakcję, INP bierze pod uwagę wszystkie z nich, raportując jedną z najwolniejszych, zachodzących na przestrzeni czasu działania strony. Zamiast mierzyć tylko część opóźnienia, INP uwzględnia cały przedział czasowy – od początku interakcji, poprzez obsługę zdarzenia, aż do momentu, gdy przeglądarka jest w stanie wyrenderować następną klatkę.
Te detale dotyczące implementacji sprawiają, że INP w porównaniu do FID jest znacznie wszechstronniejszą miarą postrzeganej przez użytkownika responsywności”.
Optymalizacja Interaction to Next Paint
Podstawy dotyczące tego, czym jest i jak działa INP, już omówiliśmy. Jak więc optymalizować interakcję do kolejnego wyrenderowania? Jaką wartość można uznać za dobrą? Google podaje następujące zalecenia:
- dobrze – 200 milisekund lub mniej. Taka wartość sprawia, że z punktu widzenia użytkownika strona reaguje natychmiastowo na wszelkie interakcje;
- wymaga poprawy – 200 milisekund do 500 milisekund. Taki czas nie jest szczególnie problematyczny, ale powinieneś mieć swiadomość, że użytkownik dostrzega małe opóźnienia;
- źle – powyżej 500 milisekund. Przy tak dużej wartości dla użytkownika opóźnienia stają się wyraźnie widoczne i przez to irytujące.
Google sugeruje, że jeśli chcesz naprawdę zaspokoić potrzeby większości użytkowników, powinieneś dążyć do spełnienia lub przekroczenia tych standardów dla co najmniej 75% załadowywanych stron. Pod uwagę należy oczywiście brać zwykle nieco odmienne doświadczenia osób korzystających z urządzeń mobilnych i desktopów.
Jak optymalizować wskaźnik INP? Google w swoim artykule zaleca następujące podejście:
- Wykorzystaj dane rzeczywiste (np. z Chrome User Experience Report), aby przeanalizować aktualny stan INP.
- Zdiagnozuj najwolniejsze interakcje, zwłaszcza podczas ładowania strony.
- Podziel interakcje na trzy fazy – opóźnienie wejścia, czas przetwarzania i opóźnienie prezentacji. Skoncentruj się na optymalizacji wszystkich z nich.
- Zadbaj o to, aby główny wątek nie był obciążony intensywnymi zadaniami jak ładowanie skryptów.
- Zoptymalizuj wywoływanie zdarzeń. Zachowaj ostrożność podczas renderowania HTML przy użyciu JavaScript.
- Zachowaj rozsądny rozmiar DOM-u i weź pod uwagę właściwość CSS content-visibility, aby zadbać o wydajne renderowanie.
- Regularnie monitoruj INP zwłaszcza wtedy, gdy wprowadzasz na stronie nowe funkcje.
Sposoby analizy i monitorowania INP
Jeśli chcesz monitorować INP, do dyspozycji masz następujące sposoby:
- dane rzeczywiste – np. z narzędzi Google Analytics 4, Google Search Console itpp. To najlepsza metoda, choć wymaga odpowiedniej konfiguracji;
- PageSpeed Insights – wprowadź adres strony i dokonaj analizy. Wartość INP znajduje się w sekcji „Core Web Vitals Assessment”;
- darmowe narzędzie DebugBear – wprowadź adres URL i rozpocznij test. Wynik INP znajduje się w sekcji „Web Vitals”;
- rozszerzenie Chrome SiteSpeed by DebugBear – rozszerzenie automatycznie będzie mierzyć INP na odwiedzanych stronach;
- The Web Vitals Library – zainstaluj bibliotekę w aplikacji i użyj funkcji getINP, aby monitorować interakcję do kolejnego wyrenderowania.
Podsumowanie
Przypomnijmy pokrótce najważniejsze informacje z artykułu:
INP to metryka Core Web Vitals, która reprezentuje ogólną wartość opóźnienia, do jakiego dochodzi przez cały czas interakcji ze stroną.
