Interaction to Next Paint (INP)

Jeremy Wagner

Barry Pollard

Pubblicato: 6 maggio 2022, ultimo aggiornamento: 9 settembre 2025

I dati di utilizzo di Chrome mostrano che il 90% del tempo di un utente su una pagina viene trascorso dopo il caricamento. Pertanto, è importante misurare attentamente la reattività durante l'intero ciclo di vita della pagina. Questo è ciò che valuta la metrica INP.

Una buona reattività significa che una pagina risponde rapidamente alle interazioni. Quando una pagina risponde a un'interazione, il browser presenta un feedback visivo nel frame successivo che disegna. Il feedback visivo ti indica, ad esempio, se un articolo che aggiungi a un carrello della spesa online viene effettivamente aggiunto, se un menu di navigazione mobile è stato aperto, se i contenuti di un modulo di accesso vengono autenticati dal server e così via.

Alcune interazioni richiedono naturalmente più tempo di altre, ma per quelle particolarmente complesse è importante fornire rapidamente un feedback visivo iniziale per comunicare all'utente che qualcosa sta accadendo. Il frame successivo che il browser visualizzerà è la prima opportunità per farlo.

Pertanto, l'intento di INP non è misurare tutti gli effetti finali di un'interazione, come i recuperi di rete e gli aggiornamenti dell'interfaccia utente da altre operazioni asincrone, ma il tempo in cui viene bloccato il successivo rendering. Ritardando il feedback visivo, gli utenti potrebbero avere l'impressione che la pagina non risponda abbastanza rapidamente. L'INP è stato sviluppato per aiutare gli sviluppatori a misurare questa parte dell'esperienza utente.

Nel seguente video, l'esempio sulla destra fornisce un feedback visivo immediato che indica l'apertura di una sezione a fisarmonica. La scarsa reattività è illustrata nell'esempio a sinistra e mostra come può creare esperienze utente scadenti.

Questa guida spiega come funziona l'INP, come misurarlo e indica le risorse per migliorarlo.

Che cos'è INP?

L'INP è una metrica che valuta l'adattabilità complessiva di una pagina alle interazioni degli utenti osservando la latenza di tutti i clic, tocchi e interazioni da tastiera che si verificano durante la visita di un utente a una pagina. Il valore INP finale corrisponde all'interazione più lunga osservata, ignorando i valori anomali.

Un'interazione è un gruppo di gestori di eventi che vengono attivati durante lo stesso gesto logico dell'utente. Ad esempio, le interazioni "tocco" su un dispositivo touchscreen includono più eventi, come pointerup, pointerdown e click. Un'interazione può essere guidata da JavaScript, CSS, controlli del browser integrati (come gli elementi del modulo) o una combinazione di questi.

La latenza di un'interazione è costituita dalla durata più lunga di un gruppo di gestori di eventi che guidano l'interazione, dal momento in cui l'utente inizia l'interazione al momento in cui il browser è in grado di disegnare un frame. In rari casi, potrebbe non esserci alcun frame da disegnare, ma l'interazione termina quando il browser sarebbe in grado di disegnare un frame.

Qual è un buon punteggio INP?

È difficile assegnare etichette come "buono" o "scarso" a una metrica di reattività. Da un lato, vuoi incoraggiare pratiche di sviluppo che diano la priorità a una buona reattività. D'altra parte, devi tenere conto del fatto che esiste una notevole variabilità nelle funzionalità dei dispositivi utilizzati dagli utenti per stabilire aspettative di sviluppo raggiungibili.

Per garantire esperienze utente con una buona reattività, una buona soglia da misurare è il 75° percentile dei caricamenti di pagina registrati sul campo, segmentati su dispositivi mobili e computer:

• Un valore INP inferiore o pari a 200 millisecondi indica che una pagina ha una buona reattività.
• Un INP superiore a 200 millisecondi e inferiore o uguale a 500 millisecondi indica che la reattività di una pagina richiede miglioramenti.
• Un INP superiore a 500 millisecondi indica una scarsa reattività della pagina.

Che cosa contiene un'interazione?

Il principale motore dell'interattività è spesso JavaScript, anche se i browser forniscono interattività tramite controlli non basati su JavaScript, come caselle di controllo, pulsanti di opzione e controlli basati su CSS.

Ai fini dell'INP, vengono osservati solo i seguenti tipi di interazione:

• Fare clic con un mouse.
• Toccando un dispositivo con touchscreen.
• Premendo un tasto su una tastiera fisica o sullo schermo.

Le interazioni avvengono nel documento principale o negli iframe incorporati nel documento, ad esempio facendo clic su Riproduci in un video incorporato. Gli utenti finali non sapranno cosa si trova in un iframe o meno, pertanto è necessario l'INP all'interno degli iframe per misurare l'esperienza utente per la pagina di primo livello. Poiché le API web JavaScript non hanno accesso ai contenuti degli iframe, questo potrebbe essere visualizzato come una differenza tra CrUX e RUM.

Le interazioni possono essere costituite da più eventi. Ad esempio, una sequenza di tasti include gli eventi keydown, keypress e keyup. Gli eventi Tocca interazioni contengono gli eventi pointerup e pointerdown. L'evento con la durata più lunga all'interno dell'interazione è quello che contribuisce alla latenza totale dell'interazione.

Come mostrato nel diagramma, la durata dell'elaborazione di INP include tutti i callback del gestore di eventi all'interno di quel frame. In questo modo, il ritardo di input è il tempo che precede la gestione di qualsiasi callback per un'interazione, la durata dell'elaborazione è il tempo necessario per l'esecuzione di tutti i callback e il ritardo di presentazione è il tempo che intercorre tra l'esecuzione dei callback e la presentazione del frame sullo schermo dell'utente.

L'INP della pagina viene calcolato quando l'utente esce dalla pagina. Il risultato è un singolo valore rappresentativo della reattività complessiva della pagina durante il suo ciclo di vita. Un INP basso indica che una pagina ha risposto in modo affidabile all'input utente.

In che modo INP è diverso dal First Input Delay (FID)?

INP è la metrica successiva a First Input Delay (FID). Sebbene entrambe siano metriche di reattività, FID misurava solo il ritardo di input della prima interazione su una pagina. INP migliora la metrica FID osservando tutte le interazioni su una pagina, a partire dal ritardo di input, fino al tempo necessario per eseguire i gestori di eventi e infine fino a quando il browser non ha visualizzato il frame successivo.

Queste differenze fanno sì che INP e FID siano tipi diversi di metriche di reattività. Mentre FID era una metrica di reattività al caricamento progettata per valutare la prima impressione della pagina sull'utente, INP è un indicatore più affidabile dell'adattabilità complessiva, indipendentemente dal momento in cui si verificano le interazioni nella vita di una pagina.

Cosa succede se non viene segnalato alcun valore INP?

È possibile che una pagina non restituisca alcun valore INP. Ciò può accadere per una serie di motivi, tra cui:

• La pagina è stata caricata, ma l'utente non ha mai fatto clic, toccato o premuto un tasto sulla tastiera.
• La pagina è stata caricata, ma l'utente ha interagito con essa utilizzando gesti non misurati, ad esempio lo scorrimento o il passaggio del mouse sopra gli elementi.
• Si accede alla pagina tramite un bot, ad esempio un crawler di ricerca o un browser headless, per cui non è stato creato uno script per interagire con la pagina.

Come misurare l'INP

L'INP può essere misurato sia sul campo sia in laboratorio, nella misura in cui è possibile simulare interazioni utente realistiche.

Sul campo

Idealmente, il tuo percorso di ottimizzazione dell'INP inizierà con i dati sul campo. Nel migliore dei casi, i dati sul campo del monitoraggio utenti reali (RUM) ti forniranno non solo il valore INP di una pagina, ma anche dati contestuali che evidenziano quale interazione specifica è responsabile del valore INP stesso, se l'interazione si è verificata durante o dopo il caricamento della pagina, il tipo di interazione (clic, pressione di tasti o tocco) e altri tempi preziosi che possono aiutarti a identificare quale parte dell'interazione influiva sulla reattività.

Se il tuo sito web è idoneo per l'inclusione nel Report sull'esperienza utente di Chrome (CrUX), puoi ottenere rapidamente i dati sul campo per l'INP tramite CrUX in PageSpeed Insights (e altri Segnali web essenziali). Come minimo, puoi ottenere un'immagine a livello di origine dell'INP del tuo sito web, ma in alcuni casi puoi anche ottenere dati a livello di URL.

Tuttavia, anche se CrUX può dirti se esiste un problema, non può dirti qual è la causa. Una soluzione RUM può aiutarti a scoprire maggiori dettagli su pagine, utenti o interazioni utente che presentano problemi di reattività. La possibilità di attribuire l'INP a singole interazioni evita congetture e sprechi di energie.

Nel laboratorio

Idealmente, dovresti iniziare a eseguire i test nel lab una volta che i dati sul campo suggeriscono che una pagina ha interazioni lente. I dati sul campo renderanno molto più semplice il lavoro di riproduzione delle interazioni problematiche nel lab.

Tuttavia, è del tutto possibile che tu non disponga di dati concreti. Sebbene l'INP possa essere misurato in alcuni strumenti di laboratorio, il valore INP risultante per una pagina durante i test di laboratorio dipenderà dalle interazioni eseguite durante il periodo di misurazione. I comportamenti degli utenti possono essere imprevedibili e molto variabili, il che significa che i test in laboratorio potrebbero non rilevare le interazioni problematiche nello stesso modo in cui possono farlo i dati sul campo. Inoltre, alcuni strumenti di laboratorio non segnalano l'INP di una pagina perché osservano solo il caricamento di una pagina senza interazioni. In questi casi, il Total Blocking Time (TBT) potrebbe essere una metrica proxy ragionevole per INP, ma non è un sostituto di INP in sé.

Anche se gli strumenti di laboratorio presentano limitazioni per quanto riguarda la valutazione dell'INP di una pagina, esistono alcune strategie per riprodurre le interazioni lente in laboratorio. Le strategie includono il monitoraggio dei flussi utente comuni e il test delle interazioni durante il percorso, nonché l'interazione con la pagina durante il caricamento, quando il thread principale è spesso più occupato, per identificare le interazioni lente durante questa parte cruciale dell'esperienza utente.

Misurare l'INP in JavaScript

Per misurare l'INP in JavaScript, devi misurare i tempi degli eventi per tutte le interazioni e poi prendere il 98° percentile di tutte queste interazioni al momento dello scaricamento della pagina. Puoi fare riferimento al codice sorgente della libreria JavaScript web vitals, che contiene un'implementazione di riferimento su come viene calcolato l'INP.

Nella maggior parte dei casi, il valore INP corrente al momento dello scaricamento della pagina è il valore INP finale per quella pagina, ma esistono alcune importanti eccezioni, come indicato nella sezione successiva. La libreria JavaScript web vitals tiene conto di questi aspetti il più possibile, nei limiti delle API web.

Differenze tra la metrica e l'API

• Le voci event inferiori a 104 millisecondi non vengono segnalate per impostazione predefinita utilizzando gli osservatori delle prestazioni. Questo valore predefinito può essere modificato quando viene registrato un osservatore delle prestazioni utilizzando il parametro durationThreshold, ma anche questo ha un valore minimo di 16 millisecondi. Per questo motivo, è consigliabile osservare anche la voce first-input, che è anch'essa una voce di temporizzazione dell'evento, ma è garantito che sia osservabile anche quando la sua durata è inferiore a durationThreshold. In questo modo, le pagine con interazioni riportano sempre un valore INP.
• Il calcolo perfetto dei percentili richiede tecnicamente di conservare tutti i campioni in memoria, il che può essere costoso. Tuttavia, puoi approssimare i percentili, in particolare quelli molto elevati come il 98° percentile, mantenendo un piccolo elenco delle N interazioni peggiori. 10 è una scelta comune.
• Se una pagina viene ripristinata dalla cache back-forward, il relativo valore INP deve essere reimpostato su zero, poiché gli utenti lo percepiscono come una visita di pagina distinta.
• L'API non segnala le voci event per le interazioni che si verificano all'interno degli iframe, ma la metrica sì, in quanto fanno parte dell'esperienza utente della pagina. Ciò può essere visualizzato come una differenza tra CrUX e RUM. Per misurare correttamente l'INP, devi prenderli in considerazione. I subframe possono utilizzare l'API per segnalare le proprie voci event-timing al frame principale.

Oltre a queste eccezioni, l'INP presenta una maggiore complessità perché misura l'intero ciclo di vita di una pagina:

• Gli utenti potrebbero tenere aperta una scheda per un periodo di tempo molto lungo: giorni, settimane, mesi. Infatti, un utente potrebbe non chiudere mai una scheda.
• Sui sistemi operativi mobile, i browser in genere non eseguono callback di scaricamento della pagina per le schede in background, il che rende difficile segnalare il valore "finale".

Per gestire questi casi, l'INP deve essere segnalato ogni volta che una pagina è in background, oltre a ogni volta che viene scaricata (l'evento visibilitychange copre entrambi gli scenari). I sistemi di analisi che ricevono questi dati dovranno quindi calcolare il valore INP finale nel backend.

Anziché memorizzare e gestire autonomamente tutti questi casi, gli sviluppatori possono utilizzare la libreria JavaScript web-vitals per misurare l'INP, che tiene conto di tutto ciò che è stato menzionato in precedenza, ad eccezione del caso dell'iframe:

import {onINP} from 'web-vitals';

// Measure and log INP in all situations
// where it needs to be reported.
onINP(console.log);

Come migliorare l'INP

È disponibile una raccolta di guide sull'ottimizzazione dell'INP per guidarti nel processo di identificazione delle interazioni lente sul campo e nell'utilizzo dei dati di laboratorio per identificare le cause e ottimizzarle.

Log delle modifiche

Occasionalmente, vengono rilevati bug nelle API utilizzate per misurare le metriche e a volte nelle definizioni delle metriche stesse. Di conseguenza, a volte è necessario apportare modifiche, che possono essere visualizzate come miglioramenti o regressioni nei report e nelle dashboard interni.

Per aiutarti a gestire questa situazione, tutte le modifiche all'implementazione o alla definizione di queste metriche verranno visualizzate in questo changelog.

Se hai feedback su queste metriche, invialo nel gruppo Google web-vitals-feedback.

Verifica le tue conoscenze