Interaction to Next Paint (INP) to Core Web Vital Google mierzacy responsywnosc strony. Rejestruje najdluzsze opoznienie miedzy interakcja uzytkownika (klikniecie, dotkniecie, klawisz) a nastepnym wizualnym odswiezeniem podczas calej wizyty i raportuje 75. percentyl ze wszystkich realnych sesji. INP stalo sie oficjalnym Core Web Vital 12 marca 2024, zastepujac First Input Delay (FID). Dobry INP: 200 ms lub mniej. Mierzony u prawdziwych uzytkownikow Chrome przez CrUX, widoczny w Search Console, PageSpeed Insights, Chrome DevTools i bibliotece web-vitals.
Jak mierzony jest INP
- Input delay.
- Processing time.
- Presentation delay.
Progi
| Kategoria | Wartosc | Wrazenie |
|---|---|---|
| Dobry | 200 ms lub mniej | Natychmiastowy. |
| Do poprawy | 200 do 500 ms | Lekkie opoznienie. |
| Zly | Powyzej 500 ms | Wyraznie wolny. |
W lutym 2025 okolo 65 procent mobilnych URLi w CrUX zalicza prog, w porownaniu z 55 procent przy starcie w marcu 2024.
Dlaczego zastapilo FID
- FID mierzyl tylko pierwsza interakcje.
- FID pomijal przetwarzanie i render.
Przyczyny zlego INP
- Long tasks w main thread.
- Synchroniczne skrypty zewnetrzne.
- Ciezkie handlery.
- Layout thrashing.
- Wolne rerendery frameworkow.
- Animacje JS zamiast CSS.
- Recalc CSS na duzych DOMach.
Pomiar
- PageSpeed Insights.
- Search Console.
- Chrome DevTools (od Chrome 121).
- web-vitals (
npm install web-vitals). - Cloudflare Web Analytics, Vercel Speed Insights, SpeedCurve, DebugBear.
- CrUX na BigQuery.
import { onINP } from 'web-vitals';
onINP(metric => {
fetch('/api/vitals', { method: 'POST', body: JSON.stringify(metric), keepalive: true });
});Optymalizacja
- Dzielenie long tasks przez
scheduler.yield()(Chrome 129, pazdziernik 2024). - Odroczenie niekluczowego JS.
- Czesciowa hydratacja (Astro, RSC, Qwik).
- Memoizacja komponentow React.
- Animacje CSS.
- Debounce handlerow.
- Web Workers do ciezkiego parsowania.
- Mniejszy DOM.
content-visibility: auto.- Audyt skryptow zewnetrznych.
INP w WordPressie
- Wylaczyc jQuery we frontendzie.
- Lekki motyw (GeneratePress, Astra, Kadence).
- Unikac ciezkich page builderow.
- Opozniac GTM i analytics.
- Cache.
- WooCommerce lub headless.
- Ograniczyc widgety chatu.
- Mierzyc Site Kit by Google.
Mity
- Lighthouse 100 nie gwarantuje dobrego realnego INP.
- Mniej JS pomaga tylko jesli blokowalo.
- INP liczony oddzielnie mobile i desktop.
- INP to nie TBT.
Jak InspectWP pomaga?
InspectWP wykrywa jQuery, blokujace skrypty i wolne page buildery.