Interaction to Next Paint (INP)

Cosa controlla questo check

Legge l’INP da PageSpeed Insights. INP misura l’interazione (clic, tocco, pressione di tasto) più lenta al 98° percentile durante una sessione di pagina, in millisecondi. Da marzo 2024, INP ha sostituito First Input Delay (FID) come terzo Core Web Vital.

Valore INP	Verdetto
≤ 200 ms	Buono
200–500 ms	Da migliorare
> 500 ms	Scarso

Perché è importante

INP è la metrica di performance più vicina a “questo sito si sente veloce?” A differenza di LCP (che misura il caricamento) o CLS (che misura la stabilità), INP misura l’interattività in tutta la sessione, non solo al caricamento.

Un INP scarso è quasi sempre un problema di JavaScript. Il main thread è occupato a eseguire i tuoi script, quindi quando l’utente clicca, il gestore del clic si mette in coda dietro qualunque cosa stia girando e lo schermo va in ritardo.

Come risolvere

1. Trova le interazioni peggiori. Nei DevTools di Chrome, apri il tab Performance, registra una sessione che includa l’interazione lenta. Cerca i task lunghi (>50 ms) subito dopo l’evento di clic.

2. Spezza i task lunghi. Qualsiasi JavaScript sincrono che gira per più di 50 ms blocca l’input utente. Spezzalo in pezzi compatibili con await:

async function processItems(items) {
  for (const item of items) {
    await yieldToMain();
    process(item);
  }
}

function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

I browser moderni hanno anche scheduler.yield() (Chromium 129+), più pulito.

3. Rinvia gli script non critici. Sposta analytics, ad, snippet A/B test, widget di chat al caricamento dopo la prima interazione (o usa requestIdleCallback).

4. Usa content-visibility: auto sulle sezioni fuori schermo. Il browser salta layout e paint per i contenuti nascosti finché non scrollano in vista.

5. Alleggerisci i re-render di React/Vue/Svelte. Killer comune dell’INP: un gestore di clic scatena un aggiornamento di stato che fa re-renderizzare 500 componenti. Usa la memoization (React.memo, useMemo), la virtualizzazione per liste lunghe e slice di stato più granulari.

Domande frequenti

PageSpeed Insights mostra l’INP?

Sì — sia lab sia campo. L’INP di campo viene dal Chrome User Experience Report (CrUX) per i siti con abbastanza traffico; i siti più piccoli vedono solo l’INP simulato in lab.

INP è uguale a FID?

No. FID misurava solo il ritardo della prima interazione. INP misura il caso peggiore lungo tutta la sessione, includendo il tempo del gestore del clic e il prossimo paint. INP è circa 5 volte più difficile da ottimizzare di quanto fosse FID.

Il mio sito è quasi statico. Perché l’INP è scarso?

Anche un sito statico spesso ha pesanti script di terze parti (analytics, chat, banner di consenso) che occupano il main thread. Controlla i tuoi tag <script> e rinvia tutto ciò che non serve al primo paint.