Interaction to Next Paint (INP)

Jeremy Wagner

I dati sull'utilizzo di Chrome mostrano che il 90% del tempo dell'utente su una pagina viene trascorso dopo il caricamento. Pertanto, è importante misurare attentamente l'adattabilità durante il ciclo di vita della pagina. Questo è ciò che viene valutato dalla metrica INP.

Una buona adattabilità significa che una pagina risponde rapidamente alle interazioni. Quando una pagina risponde a un'interazione, il browser visualizza un feedback visivo nel frame successivo visualizzato. Il feedback visivo ti indica, ad esempio, se un articolo che aggiungi a un carrello degli acquisti online viene effettivamente aggiunto, se si è aperto un menu di navigazione mobile, 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 presentare rapidamente un feedback visivo iniziale per comunicare all'utente che sta succedendo qualcosa. Il frame successivo che il browser dipingerà è la prima opportunità per farlo.

Pertanto, lo scopo di INP non è misurare tutti gli effetti eventuali 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 prossimo paint. Ritardando il feedback visivo, gli utenti potrebbero avere l'impressione che la pagina non risponda abbastanza rapidamente e INP è stato sviluppato per aiutare gli sviluppatori a misurare questa parte dell'esperienza utente.

Nel video seguente, l'esempio a destra fornisce un feedback visivo immediato sull'apertura di una sezione a scomparsa. L'esempio a sinistra mostra una scarsa reattività e come può creare esperienze utente negative.

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, i tocchi e le 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 si attivano 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 generata da JavaScript, CSS, controlli del browser integrati (ad esempio gli elementi del modulo) o una combinazione di questi.

La latenza di un'interazione è la singola durata più lunga di un gruppo di gestori di eventi che generano l'interazione, dal momento in cui l'utente inizia l'interazione a quello in cui il browser è in grado di visualizzare un frame.

Che cos'è un buon punteggio INP?

È difficile applicare etichette come "buono" o "scarso" a una metrica di adattabilità. Da un lato, vuoi incoraggiare pratiche di sviluppo che diano la priorità a una buona reattività. D'altra parte, occorre tenere conto del fatto che le capacità dei dispositivi che le persone utilizzano per stabilire aspettative realizzabili in termini di sviluppo sono molto variabili.

Per assicurarti di offrire esperienze utente con una buona reattività, una buona soglia da misurare è il 75° percentile dei caricamenti di pagine registrati sul campo, segmentati in base ai dispositivi mobili e ai computer:

• Un valore INP inferiore o pari a 200 millisecondi indica che una pagina ha una buona adattabilità.
• Un INP superiore a 200 millisecondi e inferiore o pari a 500 millisecondi indica che l'adattabilità di una pagina deve essere migliorata.
• Un INP superiore a 500 millisecondi indica che una pagina ha una scarsa adattabilità.

Che cos'è un'interazione?

Il principale fattore di 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 di INP, vengono osservati solo i seguenti tipi di interazione:

• Fare clic con un mouse.
• Toccare un dispositivo con un 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 sul pulsante di riproduzione in un video incorporato. Gli utenti finali non sono consapevoli di cosa contiene o meno un iframe, pertanto è necessario utilizzare 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 mostrarsi come una differenza tra CrUX e RUM

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

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

Qual è la differenza tra INP e il First Input Delay (FID)?

INP è la metrica che sostituisce First Input Delay (FID). Sebbene entrambe siano metriche di adattabilità, FID misurava solo il tempo di risposta della prima interazione in una pagina. INP migliora il 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 esegue il paint del frame successivo.

Queste differenze indicano che sia INP che FID sono tipi diversi di metriche di reattività. Mentre il FID era una metrica di adattabilità al caricamento progettata per valutare la prima impressione della pagina sull'utente, l'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 che non vengono misurati, ad esempio lo scorrimento o il passaggio del mouse sopra gli elementi.
• Un bot, ad esempio un crawler di ricerca o un browser headless, che non è stato sottoposto a script per interagire con la pagina, sta accedendo alla pagina.

Come misurare l'INP

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

Sul campo

Idealmente, il tuo percorso di ottimizzazione dell'INP inizierà con i dati sul campo. Nella migliore delle ipotesi, i dati dei campi forniti da Real User Monitoring (RUM) forniranno non solo il valore INP di una pagina, ma anche dati contestuali che evidenziano quale interazione specifica è stata responsabile del valore INP stesso, se l'interazione si è verificata durante o dopo il caricamento della pagina, il tipo di interazione (clic, pressione di un tasto o tocco) e altre tempistiche importanti che possono aiutarti a identificare quale parte dell'interazione ha influito 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 Core Web Vitals). 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, CrUX è in grado di indicare se esiste un problema, ma non è in grado di indicarti la causa. Una soluzione RUM può aiutarti a scoprire ulteriori dettagli su pagine, utenti o interazioni utente che presentano problemi di adattabilità. Riuscire ad attribuire l'INP alle interazioni individuali evita supposizioni e sprechi di sforzi.

Nel laboratorio

Idealmente, ti consigliamo di iniziare a eseguire i test nel lab quando disponi di dati sul campo che suggeriscono che le interazioni con una pagina sono lente. I dati sul campo semplificano notevolmente la riproduzione di interazioni problematiche in laboratorio.

Tuttavia, è del tutto possibile che tu non disponga di dati sul campo. Anche se l'INP può 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 altamente variabili, il che significa che i test in laboratorio potrebbero non mostrare le interazioni con problemi nello stesso modo in cui possono farlo i dati sul campo. Inoltre, alcuni strumenti di laboratorio non registrano l'INP di una pagina perché osservano solo il caricamento di una pagina senza interazioni. In questi casi, il tempo di blocco totale (TBT) può essere una metrica proxy ragionevole per INP, ma di per sé non sostituisce l'INP.

Anche se gli strumenti del lab presentano delle limitazioni quando si tratta di valutare l'INP di una pagina, ci sono alcune strategie per riprodurre le interazioni lente nel lab. Le strategie includono seguire i flussi utente comuni e testare le interazioni lungo il percorso, nonché interagire con la pagina durante il caricamento (quando il thread principale è spesso più intenso) per identificare le interazioni lente durante quella parte cruciale dell'esperienza utente.

Come migliorare INP

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

Log delle modifiche

A volte 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 nelle dashboard e nei report interni.

Per aiutarti a gestire questo aspetto, tutte le modifiche all'implementazione o alla definizione di queste metriche verranno visualizzate in questo log delle modifiche.

Se hai un feedback per queste metriche, forniscilo nel gruppo Google web-vitals-feedback.

Verifica le tue conoscenze