Co to jest INP?

INP (Interaction to Next Paint) to metryka wydajności z zestawu Core Web Vitals, która mierzy ogólną responsywność strony na działania użytkownika. Określa, jak długo użytkownik czeka od chwili interakcji (np. kliknięcia, stuknięcia, naciśnięcia klawisza) do momentu następnego wyrenderowania widocznej zmiany w interfejsie.

• Progi oceny Google: dobrze ≤ 200 ms, wymaga poprawy 200–500 ms, słabo > 500 ms.
• Od marca 2024 r. INP zastąpiło FID jako oficjalną metrykę Core Web Vitals dla responsywności.

Jak działa INP w praktyce?

INP zbiera czasy wszystkich interakcji na stronie i raportuje ich 98. percentyl (czyli prawie najgorsze, ale bez skrajnych wyjątków). Dzięki temu metryka odzwierciedla realne odczucia użytkownika w trakcie całej wizyty, a nie tylko pierwszą interakcję.

Co jest mierzone:

• Interakcje z dyskretnym początkiem: kliknięcia, tapnięcia, działania klawiaturą.
• Czas od „startu” interakcji do „next paint”, obejmujący: opóźnienie wejścia (czekanie na główny wątek), czas obsługi zdarzenia (kod JS, aktualizacja DOM) oraz opóźnienie prezentacji (stylowanie, layout, paint).

Co zwykle nie wchodzi do INP:

• Interakcje ciągłe, jak przewijanie czy pinch-zoom (mają inną charakterystykę).

Dlaczego INP może być wysokie:

• „Długie zadania” JavaScript blokujące główny wątek.
• Kosztowny layout/paint po zmianach w DOM.
• Ciężkie skrypty zewnętrzne i analytics.
• Hydratacja/wczytywanie dużych bibliotek UI przy pierwszej interakcji.

Znaczenie INP dla SEO i biznesu

• Sygnał rankingowy: Core Web Vitals są elementem oceny „Page Experience”. Choć to czynnik pomocniczy, zły INP może osłabiać widoczność.
• UX i konwersja: słaba responsywność zwiększa frustrację, odrzucenia i obniża konwersję, zwłaszcza mobilnie.
• Wskaźnik zdrowia frontendu: stabilnie niski INP wskazuje na dobrą architekturę kodu, priorytetyzację interakcji i efektywne renderowanie.

Jak mierzyć INP

• Google Search Console → Core Web Vitals: dane terenowe (field) z Chrome UX Report dla Twojej domeny.
• PageSpeed Insights: łączy dane terenowe (CrUX) i laboratoryjne; pokazuje INP z realnych użytkowników, o ile dostępne.
• Biblioteka web-vitals (JS): własny RUM – pomiar INP w produkcji na żywych użytkownikach.
• Chrome DevTools (Performance): nagranie interakcji, identyfikacja długich zadań i kosztownych reflow/paint.
• Rozszerzenie Web Vitals / narzędzia APM: szybki podgląd na żywo.

Warto opierać decyzje optymalizacyjne o dane „field”. Pomiar laboratoryjny bywa zaniżony lub zawyżony względem realiów.

Dobre praktyki poprawy INP

1. Skracaj zadania JS

• Dziel długie zadania na mniejsze (<50 ms), stosuj „chunking”.
• Wykorzystuj code-splitting i dynamic import dla rzadkich widoków.
• Przenoś ciężkie obliczenia do Web Workers.

1. Priorytetyzuj ścieżki interakcji

• Minimalizuj pracę w handlerach zdarzeń – tylko to, co konieczne do natychmiastowej zmiany UI.
• Operacje niekrytyczne odkładaj na „po malowaniu” (setTimeout 0, requestIdleCallback, scheduler.postTask z niskim priorytetem).
• Debounce/throttle dla często wywoływanych akcji.

1. Oszczędzaj renderowanie

• Grupuj zmiany DOM, unikaj wymuszania synchronicznego layoutu (read–write batching).
• Preferuj transform/opacity i CSS transitions zamiast kosztownego manipulowania layoutem.
• Unikaj niepotrzebnych reflow (np. poprzez ograniczenie zagnieżdżenia i złożoności selektorów).

1. Optymalizuj frameworki i hydratację

• SSR + częściowa hydratacja/wyspy (islands), opóźniona hydratacja widżetów niewidocznych.
• Usuwaj nieużywany kod (treeshaking), redukuj polifille.

1. Ogranicz skrypty zewnętrzne

• Ładuj asynchronicznie/defer, ustaw priorytety, rozważ self-hosting.
• Usuwaj zbędne tagi marketingowe, konfiguruj CMP i tag managera pod minimalną latencję.

1. Szybkie dane i sieć

• Prefetch/prioritize zasoby krytyczne dla pierwszych interakcji.
• Cache’owanie odpowiedzi i optymalizacja API, by UI mógł reagować „optymistycznie”.

Przykład wdrożenia

Klik „Dodaj do koszyka”:

• Zamiast wykonywać walidację, kalkulacje i wywołanie API synchronicznie w handlerze, najpierw:
• natychmiast pokaż zmianę stanu (np. badge +1, spinner),
• cięższe operacje wyślij asynchronicznie,
• ewentualne korekty pokaż po odpowiedzi (optymistyczny UI).
  Efekt: szybki „next paint” po interakcji, niższy INP bez pogorszenia logiki biznesowej.

INP to realnie odczuwalna miara responsywności. Skupienie prac na krótkich zadaniach JS, priorytetyzacji ścieżek użytkownika i oszczędnym renderowaniu zwykle przynosi największe zyski. Regularny monitoring danych terenowych i iteracyjne usprawnienia pozwalają utrzymać wyniki w zielonej strefie, co wspiera zarówno SEO, jak i doświadczenie użytkownika.

Agata

Dzięki wieloletniemu doświadczeniu, zdobytemu przy współpracy z różnymi branżami, potrafię dostosowywać podejście do indywidualnych potrzeb każdego klienta. Na stronie Biznesuj.pl dzielę się wiedzą oraz praktycznymi poradami na temat prowadzenia biznesu, aby inspirować i wspierać przedsiębiorców w ich codziennych wyzwaniach. Zapraszam do lektury moich artykułów, które mogą stać się drogowskazem w dążeniu do sukcesu.”