Guide

L'INP, abbreviazione di Interaction to Next Paint, è uno dei Core Web Vitals di Google, le metriche che Google usa per valutare quanto è piacevole usare una pagina. L'INP misura la reattività: quando fai clic, tocchi o premi un tasto, quanto tempo impiega la pagina a rispondere in modo visibile? È diventato un Core Web Vital ufficiale il 12 March 2024, sostituendo il precedente First Input Delay (FID).

Il nome descrive esattamente ciò che misura. Dal momento in cui interagisci, l'INP cronometra quanto tempo passa fino a quando viene disegnato il fotogramma successivo, cioè finché non vedi effettivamente qualcosa cambiare sullo schermo. Un INP basso significa che la pagina reagisce quasi all'istante; un INP alto significa che tocchi un pulsante e sembra bloccato per un attimo prima che accada qualcosa.

Le soglie di Google, misurate al 75th percentile delle interazioni reali degli utenti, sono semplici. Un INP di 200 milliseconds o meno è Good. Tra 200 e 500 milliseconds è Needs improvement. Oltre 500 milliseconds è Poor. La parte del 75th percentile conta: la tua pagina deve essere reattiva per la maggior parte delle interazioni, non solo in media.

Il FID, la metrica che l'INP ha sostituito, misurava soltanto il ritardo prima che il browser potesse iniziare a elaborare la tua prima interazione, il ritardo di input, e solo per quella prima. Questo rendeva facile superarla mentre una pagina risultava ancora lenta. L'INP è più severo perché osserva le interazioni per l'intera visita e misura la durata completa: il ritardo di input, il tempo di esecuzione dei tuoi gestori di eventi e il tempo per presentare il fotogramma successivo.

In altre parole, il FID chiedeva quanto velocemente la pagina potesse iniziare a rispondere, una volta. L'INP chiede quanto velocemente la pagina risponde davvero, ogni volta. Questo corrisponde molto più da vicino a come la reattività viene realmente percepita da un utente.

Quasi tutti i problemi di INP derivano dal main thread che è occupato. JavaScript viene eseguito su un unico main thread, e mentre un task lungo è in esecuzione, il browser non può rispondere a un clic né disegnare un nuovo fotogramma. I soliti responsabili sono i task JavaScript di lunga durata, i gestori di eventi pesanti che fanno troppo lavoro in una volta, gli aggiornamenti del DOM grandi o complessi, e i framework che eseguono il re-rendering più del necessario.

Correggere l'INP consiste soprattutto nel non bloccare il main thread. Suddividi i task lunghi in parti più piccole e restituisci il controllo al browser tra l'una e l'altra affinché possa gestire l'input. Sposta il lavoro pesante e non urgente fuori dall'interazione, per esempio con requestIdleCallback o un web worker. Mantieni leggeri i gestori di eventi, applica il debounce agli eventi rumorosi come input e scroll, ed evita di forzare lavoro di layout o di re-rendering sincrono e voluminoso in risposta diretta a un tocco.

L'INP si valuta meglio sui dati sul campo, utenti reali su dispositivi reali, che puoi vedere nel Chrome User Experience Report e nel report Core Web Vitals di Google Search Console. Per il debug in laboratorio, la libreria JavaScript web-vitals, il pannello Performance in Chrome DevTools e Lighthouse ti aiutano tutti a individuare le interazioni lente. Su questo sito, il nostro verificatore di web vitals ti permette di inserire i valori misurati e vedere all'istante se superano le soglie di Google.

Vale la pena chiarire l'ambito. L'INP riguarda solo la reattività. È uno dei tre Core Web Vitals, insieme a Largest Contentful Paint (caricamento) e Cumulative Layout Shift (stabilità visiva). Una pagina può caricarsi velocemente e avere comunque un INP scadente se il suo JavaScript blocca il main thread quando le persone iniziano a interagire.

In conclusione: l'INP premia le pagine che restano reattive per tutta la visita, non solo al primo tocco. Se il tuo sito distribuisce molto JavaScript, l'INP è il Core Web Vital che con maggiore probabilità richiederà attenzione, e la soluzione è quasi sempre la stessa disciplina: fare meno lavoro sul main thread, e farlo in parti più piccole.