Cos'è l'Interaction to Next Paint (INP)?

Interaction to Next Paint è la metrica di reattività che ha sostituito il First Input Delay nei Core Web Vitals. Misura quanto tempo impiega una pagina a reagire visibilmente dopo un input dell'utente, per tutta la sessione, non solo al primo tap. Per gli storefront densi di filtri, selettori di varianti e pulsanti di aggiunta al carrello, l'INP mette in luce il costo reale del JavaScript lato client.

Definizione

L'INP campiona ogni interazione discreta, come clic, tap e pressione di tasto, e registra il tempo che passa dall'input al successivo paint. Il punteggio riportato corrisponde grosso modo all'interazione peggiore della sessione, oppure al 98° percentile sulle pagine lunghe, espresso in millisecondi. Google considera buono un valore fino a 200 ms e scarso un valore superiore a 500 ms. L'INP è dominato da task lunghi sul thread principale, gestori di eventi costosi, layout thrashing e lavoro di hydration eseguito da React, Vue o Svelte dopo il rendering lato server. Gli script pesanti di terze parti caricati tramite un tag content-management-system-cms sono spesso una causa frequente.

Perché è importante

L'INP cattura ciò che gli acquirenti percepiscono realmente: filtri lenti su una PLP, un selettore di quantità ritardato o un mega-menu lento. Un INP scarso si ripercuote sul bounce rate e sui carrelli abbandonati, ed è più difficile da correggere rispetto all'LCP perché dipende dall'architettura applicativa piuttosto che dalla distribuzione degli asset. Per gli stack composable-commerce, l'INP è il singolo indicatore migliore del costo dell'hydration e della qualità dei bundle. In quanto Vital, alimenta anche il search-engine-optimization-seo tramite il segnale di page experience.

Casi d'uso

Gli ingegneri su Next.js, Remix o Nuxt mitigano l'INP suddividendo i bundle React per rotta tramite code-splitting, differendo il first-party-JS non critico e spostando il lavoro pesante fuori dal thread principale con i Web Worker. Adottare React Server Components o l'Islands Architecture in Astro rimuove l'hydration da ampie parti della pagina, il che spesso dimezza l'INP sulle pagine di categoria. L'Edge Rendering su Vercel Edge, Cloudflare Workers o Netlify Edge mantiene il cache-layer vicino agli utenti, ma i vantaggi reali derivano da un JS client-side meno interattivo. I team monitorano l'INP per singola rotta tramite la libreria web-vitals e vincolano i rilasci a budget INP definiti.

Correlati

Scopri Performance and Core Web Vitals · Composable Headless Frontend.