INP – co określa wskaźnik Core Web Vitals?

Wyobraź sobie, że wchodzisz do luksusowej restauracji. Kelner sadza Cię przy stoliku błyskawicznie (to był Twój stary znajomy, wskaźnik FID). Czujesz się dopieszczony… do momentu, gdy próbujesz zamówić wodę. Machasz ręką, prosisz, naciskasz dzwonek na stole, a kelner niby Cię widzi, ale woda pojawia się dopiero po pięciu minutach. Twoja irytacja rośnie… Dokładnie tym dla Twojej strony jest INP. To nie jest tylko pierwsze wrażenie przy wejściu do lokalu. To test cierpliwości użytkownika podczas całej wizyty. Jeśli Twoja strona reaguje na kliknięcia z gracją zardzewiałego robota, Google może wystawić Ci rachunek, którego nie chcesz płacić. Sprawdźmy, jak sprawić, by Twoja witryna przestała „zamulać” i zaczęła realnie współpracować z użytkownikiem.

Co to jest wskaźnik INP (Interaction to Next Paint)?

INP (Interaction to Next Paint) 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ęć, a nie tylko pierwszego, jak w przypadku FID. INP mierzy dotknięcia oraz interakcję z klawiaturą w całym okresie aktywności użytkownika na danej stronie. Ostateczna wartość INP to reprezentatywna najgorsza interakcja użytkownika – Google analizuje wszystkie interakcje, pomija skrajne wartości odstające i wybiera jedną z najwolniejszych (najczęściej zbliżoną do 98. percentyla).

Jaki związek ma INP z FID?

FID mierzył czas od momentu pierwszej interakcji użytkownika (np. kliknięcia) do chwili, gdy przeglądarka była w stanie rozpocząć jej obsługę. FID skupiał się na zmierzeniu czasu, który niezbędny jest, aby pierwsza interakcja ze stroną mogła zostać podjęta. A zatem FID mierzył tylko opóźnienie pierwszej interakcji i to tylko czas do momentu, gdy przeglądarka zaczęła go przetwarzać. Był zbyt łaskawy – łatwo było go „oszukać”, optymalizując tylko start strony.

12 marca 2024 r. INP oficjalnie zastąpił FID jako jeden z trzech głównych wskaźników Core Web Vitals.

INP jest znacznie bardziej rygorystyczny. Mierzy czas od interakcji do momentu, gdy użytkownik faktycznie zobaczy zmianę na ekranie (np. otwarte menu, spinner, komunikat). Co ważne, INP bierze pod uwagę wszystkie interakcje podczas sesji i wyciąga jedną z najwolniejszych interakcji, reprezentującą realne „worst-case experience” (zwykle zbliżoną do wysokiego percentyla, np. okolic 98%).

Jaki wynik INP można uznać za dobry?

Dobrym progiem jest 75 centyl wczytań strony zarejestrowanych w polu, podzielony na urządzenia mobilne i komputery, bazując na konkretnych parametrach:

• Wartość INP mniejsza niż 200 milisekund oznacza, że strona ma dobrą responsywność.
• Wartość INP powyżej 200 milisekund i poniżej lub równe 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?

• kliknięcie przyciskiem myszy,
• „dotknięcie ekranu” na urządzeniu z ekranem dotykowym,
• naciśnięcie klawisza na klawiaturze fizycznej lub ekranowej.

Google mierzy czas od interakcji użytkownika do momentu pełnego wyrenderowania efektu tej interakcji, uwzględniając opóźnienie wejścia, przetwarzanie oraz renderowanie.

Jakie są etapy działania INP (Interaction to Next Paint )?

Każda interakcja składa się z trzech części, a optymalizacja INP polega na skracaniu każdej z nich:

1. Input Delay (opóźnienie wejściowe) – czas oczekiwania na wolne moce przerobowe procesora. Jeśli główny wątek (main thread) jest zajęty mieleniem ciężkiego JavaScriptu, interakcja musi „stać w kolejce”.
2. Processing Time (czas przetwarzania) – czas potrzebny na wykonanie kodu JavaScript przypisanego do danego zdarzenia (np. obliczenia po kliknięciu „dodaj do koszyka”).
3. Presentation Delay (opóźnienie prezentacji) – czas, który przeglądarka potrzebuje na przeliczenie stylów (recalculate styles), układu (layout) i fizyczne namalowanie nowych pikseli na ekranie.

Jak podejść do optymalizacji INP?

Kluczowe dla Google jest jak najszybsze wykonanie interakcji – np. rozwinięcie sekcji FAQ po kliknięciu w tą sekcję. Oznacza to, że interakcje, które działają wolno lub są celowo opóźniane, będą negatywnie oceniane przez Google. Kluczowe jest, aby 75. percentyl wartości INP dla danej grupy adresów URL był poniżej 200 ms.

Gdzie znajdę INP dla strony?

Pierwszym z narzędzi jest Google Search Console, wskaźniki INP dla poszczególnych grup adresów URL znajdziemy w: Podstawowe wskaźniki internetowe > Urządzenie mobilne.

A konkretne:

Dostaniemy tutaj problematyczne grupy adresów URL, którymi warto się zająć.

DevTools i Page Speed Insights

Pojedyncze adresy URL testować możemy w Chrome DevTools. Wystarczy wejść na dany adres, kliknąć prawym przyciskiem myszy, wybrać opcję Zbadaj, a następnie przejść do „Performance”, czyli „Wydajność”. Następnie możemy testować poszczególne akcje na stronie i sprawdzać od razu ich wskaźnik INP.

Można też całościowo dany adres URL przetestować w narzędziu Page Speed Insights.

Jak pracować z INP?

Wyróżniamy kilka metod pracy z badaniem wskaźnika INP:

1. Dane Crux z wykorzystaniem Page Speed Insights – https://web.dev/articles/find-slow-interactions-in-the-field#get_field_data_quickly_with_crux. Jest to szybka i prosta metoda na uzyskanie ogólnej wartości wskaźnika INP dla badanej podstrony.
2. RUM (Real User Monitoring) – w tej metodzie wykorzystujemy faktyczne wskazania elementów interaktywnych, badając czas ich reakacji z punktu widzenia użytkownika. Możemy zrobić to ręcznie lub za pomocą odpowiednich skryptów, co szerzej opisane zostało tutaj.

Kompleksowe zbadanie wskaźnika INP wymaga zazwyczaj połączenia obu tych metod. Analizę INP rozpocząć jest najlepiej od narzędzia Google Search Console, gdzie znajdziesz przykładowe adresy URL, które według Google posiadają problem z INP.

Posiadając listę problematycznych adresów URL, możesz przystąpić do ich bardziej pogłębionej analizy.

Skuteczne pozycjonowanie

Poznaj ofertę kompleksowego SEO dla Twojej strony

Zobacz więcej

Testy dla pojedynczego adresu URL wykonasz w Chrome DevTools za pomocą funkcji Lighthouse. W ten sposób uzyskasz ogólne dane dotyczące INP dla badanego adresu URL. Lighthouse wspiera już metrykę INP w danych laboratoryjnych, jednak należy pamiętać, że dane te mogą różnić się od rzeczywistych (field data), ponieważ testy odbywają się w kontrolowanym środowisku.

W przypadku kiedy powyżej omówione narzędzia wskażą, że dany adres URL posiada problemy z interaktywnością, konieczne jest wykonanie testów każdego elementu interaktywnego. Testy te wykonać można z pomocą konsoli dewelopera Google Chrome (prawym i zbadaj).

W momencie, gdy klikniesz w dowolny element interaktywny – np. przycisk, pole wyszukiwarki i każdy inny, w konsoli deweloperskiej otrzymasz wskaźnik INP. Poniżej przykład, gdzie zalecana jest poprawa:

Poniżej przykład akcji (kliknięcia), dla której narzędzie wskazuje bardzo dobry wskaźnik INP:

Warto pamiętać o tym, że kiedy mierzysz INP w DevTools, robisz to w idealnych (lub symulowanych) warunkach. Masz szybki internet, mocny procesor i klikasz w konkretny sposób. Z kolei uruchamiając funkcję Field Metrics, pozyskujesz dane z Chrome UX Report (CrUX). Google zbiera je anonimowo od prawdziwych ludzi używających Chrome na różnych telefonach (często starych i wolnych) i przy różnych połączeniach (np. w metrze).

Dlaczego jest to tak ważne? Możesz u siebie naprawić INP i widzieć wynik 50 ms (super!). Ale jeśli Field Metrics nadal pokazują 450 ms (źle), to znak, że problem występuje na słabszych urządzeniach, których nie przetestowałeś, albo przy specyficznych interakcjach, których nie wykonałeś.

Uruchamiamy zatem funkcję Field Metrics:

Teraz możemy porównać wynik lokalny z danymi od tysięcy użytkowników:

W tym widoku widzimy nasz lokalny wynik INP (40 ms) w porównaniu z danymi od tysięcy realnych użytkowników (122 ms). Wskaźnik 75. centyla mówi, że dla 75% odwiedzających interakcja trwa maksymalnie 122 ms, co jest wynikiem uznawanym przez Google za „dobry”. Dzięki procentowemu rozkładowi widzimy, że aż 91% sesji przebiega płynnie, ale u 1% użytkowników strona reaguje bardzo wolno (powyżej 500 ms). Informacja o okresie zbierania danych (ostatnie 28 dni) potwierdza, że analizujesz aktualną kondycję witryny, a nie błąd sprzed roku. Cały ten panel służy do szybkiej diagnozy, czy problem z responsywnością jest powszechny, czy dotyczy tylko wybranych, słabszych urządzeń.

Dlaczego warto optymalizować stronę pod INP?

Korzyści z optymalizacji INP jest kilka. Po pierwsze – wyższa konwersja.  Responsywne strony to mniejsza frustracja. Użytkownik, który „czuje” kliknięcie, chętniej dokończy zakup. Po drugie, pozytywny wpływ na SEO. Choć nie przeskoczysz dzięki niemu Wikipedii przy słabej treści, przy wyrównanej walce o TOP 3, lepsze wskaźniki CWV mogą być „tie-breakerem” (rozstrzygają remis). Wreszcie po trzecie – niższy bounce rate. Jeśli użytkownik klika w menu i nic się nie dzieje przez pół sekundy, często uznaje, że strona się zawiesiła i wychodzi.

Jak poprawić INP? Dobre praktyki

Poniżej prosta, przykładowa checklista zadań do realizacji, związanych z optymalizacją wskaźnika INP.

1. Rozbijaj „Długie zadania” – każdy proces JS trwający powyżej 50 ms blokuje główny wątek. Używaj setTimeout lub requestIdleCallback, aby dać przeglądarce odetchnąć.
2. Unikaj nadmiernego JavaScriptu – usuń nieużywane skrypty i opóźnij ładowanie tych, które nie są niezbędne do interakcji.
3. Zoptymalizuj strukturę DOM – zbyt głębokie drzewo DOM sprawia, że etap Presentation Delay trwa wieki, bo przeglądarka musi przeliczyć tysiące elementów.
4. Sprawdź event handlery – czy po kliknięciu nie wykonują się zbędne funkcje analityczne, które mogłyby poczekać?

FAQ

Co to jest INP (interakcja do kolejnego wyrenderowania)?

INP to wskaźnik mierzący responsywność strony. Określa czas, jaki upływa od interakcji użytkownika (np. kliknięcia w przycisk) do momentu wyświetlenia wizualnej zmiany na ekranie.

---

Jak mogę sprawdzić wynik INP dla mojej strony?

Najdokładniejsze dane znajdziesz w raporcie „Podstawowe wskaźniki internetowe” w Google Search Console oraz w narzędziu PageSpeed Insights w sekcji „Dane rzeczywiste”.

---

Jakie są najczęstsze przyczyny słabego wyniku INP?

Głównymi winowajcami są: zbyt ciężkie skrypty JavaScript blokujące główny wątek, skomplikowana struktura drzewa DOM oraz długi czas renderowania zmian graficznych po kliknięciu.

---

Czy INP ma wpływ na pozycjonowanie w Google?

Tak, od marca 2024 roku INP jest oficjalnym sygnałem rankingowym w ramach Core Web Vitals, co oznacza, że jego optymalizacja może pomagać w budowaniu lepszej widoczności strony.

---

Jak INP wpływa na konwersję w sklepie internetowym?

Niska responsywność frustruje klientów i budzi brak zaufania do witryny. Płynne działanie interakcji, takich jak dodawanie do koszyka czy filtrowanie, bezpośrednio przekłada się na wyższą finalną sprzedaż.

---

Czy INP mierzy dane z realnych wizyt czy testów laboratoryjnych?

INP opiera się przede wszystkim na danych z terenu (RUM), czyli rzeczywistych doświadczeniach użytkowników korzystających z przeglądarki Chrome (raport CruX).

---

Spodobał Ci się ten artykuł?

Zapisz się na newsletter - nie spamujemy!