Interaction to Next Paint, czyli wskaźnik inp, mierzy opóźnienia kliknięć, tapnięć i naciśnięć klawiszy podczas wizyty. To stabilny miernik w zestawie core web vitals, który wybiera zwykle najdłuższą interakcję, ignorując pojedyncze odstające zdarzenia.
W tym krótkim wprowadzeniu wyjaśnimy, dlaczego interaction next paint ma znaczenie dla doświadczenia użytkownika. Pokażemy, jakie wartości uznaje się za dobre, a które wymagają optymalizacji.
Ten przewodnik to praktyczne kroki dla zespołów technicznych i SEO. Nauczysz się diagnozować wolne interakcje na stronie, przeczytać dane terenowe i labowe oraz zamienić je w plan poprawy. Skupimy się także na taktykach: rozbijaniu długich zadań JS i szybkim feedbacku dla użytkownika.
Kluczowe wnioski
- Zrozumiesz, czym jest wskaźnik inp i jak wpływa na stronę.
- Nauczysz się mierzyć interaction next paint w praktyce.
- Otrzymasz konkretne kroki do skrócenia opóźnień interakcji.
- Poznasz narzędzia do monitoringu i utrzymania poprawy.
- Zrozumiesz, jak szybka strona przekłada się na konwersję.
Dlaczego INP zastąpił FID i co to oznacza dla interaktywności stron w 2025
12 marca 2024 r. przez google ogłoszono zmianę w podstawowe wskaźniki: wskaźnik fid został zastąpiony nowym podejściem. first input delay mierzył tylko pierwsze kliknięcie. To dawało obraz jedynie startu sesji.
Nowy wskaźnik ocenia wszystkie interakcje podczas życia strony — od opóźnienia wejścia, przez wykonanie handlerów, aż po prezentację następnej ramki. Dzięki temu lepiej oddaje realne zachowania użytkowników, którzy spędzają większość czasu po załadowaniu strony.
Zmiana wpływa na raporty i priorytety w google search. Zespół produktowy powinien przesunąć uwagę: mniej optymalizacji wyłącznie pod start, więcej pracy nad ciągłą responsywnością.
- Audytuj wskaźnika inp w krytycznych ścieżkach konwersji, nie tylko na ekranie startowym.
- Przenieś metryki i dashboardy z wskaźnik fid na nowe SLO dla responsywności.
- Marki, które wcześnie wdrożyły poprawki, zauważyły mniejsze porzucenia i lepsze interakcje.
Core Web Vitals INP — definicja, progi i różnice względem FID
Metryka mierzy opóźnienia wszystkich kliknięć, tapnięć i naciśnięć klawiszy podczas sesji. Końcowa wartość to zwykle najdłuższa interakcja. Przy bardzo wielu zdarzeniach jedna najgorsza interakcja jest pomijana na każde 50.
Jak Google ocenia opóźnienia
- ≤ 200 milisekund — dobry wynik: szybka responsywność dla użytkownika.
- >200–≤500 milisekund — wymaga poprawy: zauważalne opóźnienia.
- >500 milisekund — słaby wynik: ryzyko utraty zaangażowania.
Różnice względem first input
First input delay mierzył tylko pierwszą interakcję. Nowy wskaźnik łączy input delay, czas wykonywania callbacków i prezentację do next paint.
„Metryka odzwierciedla rzeczywiste doświadczenia użytkownika, nie tylko pierwszy klik.”
| Element | Co mierzy | Wpływ na wynik |
|---|---|---|
| Input delay | Opóźnienie od akcji do rozpoczęcia obsługi | Bezpośrednio zwiększa czas interakcji |
| Processing (callback) | Czas wykonywania handlerów JS | Może dominować, jeśli zadanie jest długie |
| Presentation (next paint) | Czekanie na wyrenderowanie nowej klatki | Końcowy krok, który zamyka pomiar |
Jak działa INP pod maską: interakcje, opóźnienia i następna ramka
Skupmy się na tym, co dokładnie przeglądarka traktuje jako interakcję i jak poszczególne etapy składają się na ostateczny wynik. To ułatwi wykrycie, gdzie warto zacząć optymalizację.
Co liczy się jako interakcja
Liczą się kliknięcia, tapnięcia i naciśnięcia klawiszy. Scrollowanie, hover czy zoom nie wpływają na pomiar.
To właśnie te zdarzenia determinują, które interakcji zostaną policzone i wpłyną na odbiór czasu reakcji przez użytkownika.
Składowe opóźnienia
Pełna latencja to suma trzech etapów: input delay, wykonywanie handlerów (processing) i czekanie na next paint.
Input delay to czas oczekiwania, zanim handler zacznie działać — często winne są długie zadania JS blokujące główny wątek.
| Składnik | Co mierzy | Wpływ na czas |
|---|---|---|
| Input delay | Opóźnienie do uruchomienia handlera | Bezpośrednio wydłuża reakcję |
| Processing | Wykonanie callbacków JS | Może dominować przy długich zadaniach |
| Presentation / next paint | Rysowanie nowej klatki | Zamyka pomiar, decyduje o finalnym czasie |
Kiedy wskaźnik nie zostanie zarejestrowany
Brak danych pojawi się, gdy nie ma mierzonych interakcji, gdy ruch to boty lub gdy użytkownik wykona tylko scroll/hover.
Pamiętaj, że podczas intensywnego page load główny wątek jest obciążony, więc opóźnienia rosną — nawet natywne kontrolki pokażą wolną reakcję.
Pomiar INP w praktyce: dane terenowe (RUM/CrUX) i testy labowe
Zanim zaczniesz testy laboratoryjne, zacznij od analizy rzeczywistych sesji użytkowników. CrUX w PageSpeed Insights daje szybki obraz wartości inp dla domeny lub pojedynczego URL, jeśli próbki są dostępne.
CrUX i PageSpeed Insights
Użyj CrUX, by sprawdzić, czy twoja strona mieści się w 200 milisekund dla większości użytkowników. To dobry punkt startowy do priorytetyzacji.
Real User Monitoring
Real user monitoring (RUM) z biblioteką web-vitals pozwala przypisać wskaźnik inp do konkretnej interakcji użytkownika. Raportuj zdarzenia przy visibilitychange i zapisuj typ akcji, czasy składowe i kontekst sesji.
Lab i jego ograniczenia
W labie metryka pojawi się tylko, jeśli odtworzysz interakcje. TBT może służyć jako częściowy proxy, ale nie zastąpi danych z pola.
Różnice metric vs API
Pamiętaj o durationThreshold — zdarzenia
| Źródło | Co pokazuje | Uwagi praktyczne |
|---|---|---|
| CrUX / Pagespeed Insights | Dane polowe dla domeny/URL | Dobry start — sprawdź mobilne i desktopowe wartości |
| RUM (web-vitals) | Kontekst interakcji użytkownika | Rejestruj typ akcji, p98 i visibilitychange |
| Lab (DevTools) | Symulacje interakcji, TBT | Użyteczne do debugowania, nie zastępuje pola |
Diagnoza krok po kroku: od Google Search Console do konsoli Chrome
Rozpocznij diagnostykę od danych, aby znaleźć grupy stron z problemami i przygotować listę priorytetów.
W Google Search Console otwórz raport Podstawowe wskaźniki internetowe → Urządzenie mobilne. Tam zobaczysz grupy URL, które mają podwyższony wskaźnik inp.
Następnie weź listę adresów i sprawdź każdy w PageSpeed Insights. Potwierdź wartości inp dla konkretnej strony i segmentu urządzeń.
Ręczne testy i narzędzia w przeglądarce
Zainstaluj rozszerzenie web vitals w Google Chrome. Włącz HUD i Console logging, a potem klikaj elementy na stronie.
Testuj przyciski, formularze i menu element po elemencie. W tym momencie wykonaj nagranie w DevTools Performance, aby wyłapać długie zadania i blokady głównego wątku.
| Krok | Cel | Co sprawdzić |
|---|---|---|
| Search Console | Identyfikacja grup URL | Problematyczne strony mobilne |
| PageSpeed Insights | Weryfikacja wartości | Wartości inp na poziomie strony |
| Chrome + nagranie | Diagnostyka elementów | Długie zadania, blokady, konkretne elementy |
Jak poprawić INP: taktyki redukcji opóźnień i szybkiej informacji zwrotnej
Skoncentruj się na praktycznych zmianach, które natychmiast skrócą czas reakcji użytkownika.
Rozbijaj długie zadania JS na krótsze porcje. Użyj schedulerów, requestIdleCallback i Web Workers, by przenieść ciężką pracę poza główny wątek.
Podczas ładowania strony ładuj tylko niezbędne skrypty do pierwszych interakcji. Resztę inicjalizuj po idle, stosując code-splitting i dynamic import.
Szybkie sprzężenie zwrotne do next paint
Zapewnij wizualny feedback do następnego malowania: skeletony, shimmery i stany disabled dają użytkownikowi natychmiastową odpowiedź.
Optymalizacja UI i fetch
Ogranicz reflow i repaint — utrzymuj lekki DOM, batchuj zmiany stylów i używaj transform zamiast top/left.
Fetchuj dane asynchronicznie, cachuj wyniki i unikaj serializacji, która blokuje wątek.
Monitorowanie i budżety
Wdrażaj ciągły RUM z alertami przy skokach wskaźnik inp. Celuj w 75. centyl dla mobile i desktop.
Ustal budżety wydajnościowe na komponenty, aby zapobiegać regresjom przy każdej iteracji produktu.
| Taktyka | Co robi | Oczekiwany efekt |
|---|---|---|
| Scheduler / Web Workers | Przenosi pracę poza główny wątek | Niższy input delay, płynniejsze interakcje |
| Lazy init / code-splitting | Ładuje tylko krytyczne elementy | Szybsze pierwsze interakcje na stronie |
| Skeletony i disabled stany | Natychmiastowy feedback wizualny | Zredukowane odczucie opóźnienia do next paint |
| Debounce / throttle | Ogranicza zbędne eventy | Mniej reflow, krótszy czas obsługi zdarzeń |
Narzędzia i workflow dla zespołów: od “problem” do “dobry wynik”
Skuteczny proces zaczyna się od zestawienia danych polowych i szybkich testów laboratoryjnych. Najpierw wytypuj grupy stron z problemami w google search console i CrUX.
Potwierdź trendy w PageSpeed Insights dla pojedynczych URL. To pozwoli oszacować zakres wpływu na ruch i konwersję.
Diagnostyka i nagrania
Przejdź do nagrań w google chrome DevTools Performance. Szukaj długich zadań, wąskich gardeł w Main Thread i elementów powodujących repaint.
Użyj HUD web vitals i console logging, aby odtwarzać interakcje i mierzyć wpływ poprawek na next paint.
- Start: search console + CrUX — lista adresów do weryfikacji.
- Deep-dive: nagrania w DevTools — waterfall i profile.
- Szybka pętla: HUD, odtworzenia i natychmiastowa weryfikacja.
- Zespół: wspólny backlog, SLA i gotowe przepisy refaktoryzacji.
- Integracja: real user / user monitoring — widok per komponent/flow.
| Etap | Narzędzie | Efekt |
|---|---|---|
| Identyfikacja | Search Console / CrUX | Wytypowanie grup URL z problemem |
| Weryfikacja | PageSpeed Insights | Potwierdzenie zakresu wpływu |
| Analiza | DevTools + HUD | Lokacja długich zadań i szybkie iteracje |
Uwaga na edge cases: iframes i subframes mogą maskować źródła opóźnień. Dodaj raportowanie subframe do parenta, by nie tracić krytycznych sygnałów.
Wniosek
Podsumowanie skupi się na tym, co należy zrobić, aby realnie obniżyć czas reakcji elementów. 12 marca 2024 metryka zastąpiła first input delay, bo mierzy opóźnienie aż do next paint.
Cel operacyjny jest prosty: dąż do ≤ 200 milisekund w 75. centylu. Wszystko powyżej 500 milisekund traktuj jako pilny problem.
Praktyka: szybko daj feedback wizualny, rozbijaj długie zadania i zamknij pętlę GSC/CrUX → RUM → DevTools → wdrożenie → monitoring. To zapewni stały dobry wynik strony.
Pamiętaj, że wskaźnika inp to teraz wspólny język zespołu. Komunikacja i edukacja pozwolą uniknąć regresji i poprawić czas reakcji użytkownika.
