Interaction to Next Paint (INP)

Supporto dei browser

  • Chrome: 96.
  • Edge: 96.
  • Firefox: non supportato.
  • Safari: non supportato.

Origine

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 il ciclo di vita della pagina. È questo 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 presenta un feedback visivo nel frame successivo che viene 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 verrà visualizzato dal browser è 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 rendering. Se il feedback visivo viene ritardato, 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 video seguente, l'esempio a destra fornisce un feedback visivo immediato sull'apertura di una sezione a scomparsa. Nell'esempio a sinistra viene mostrata una scarsa reattività e come può creare esperienze utente scadenti.

Un esempio di reattività scarsa rispetto a una buona. A sinistra, le attività lunghe impediscono l'apertura dell'accordion. Di conseguenza, l'utente fa clic più volte, pensando che l'esperienza non funzioni. Quando il thread principale si aggiorna, elabora gli input in ritardo, con la conseguente apertura e chiusura imprevista dell'accordion. A destra, una pagina più adattabile apre la sezione a scomparsa rapidamente e senza problemi.

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 tutte le interazioni di clic, tocco e tastiera che si verificano durante la durata della visita di un utente a una pagina. Il valore INP finale corrisponde all'interazione più lunga osservata, ignorando i valori anomali.

L'INP viene calcolato osservando tutte le interazioni effettuate con una pagina. Per la maggior parte dei siti, l'interazione con la latenza peggiore viene registrata come INP.

Tuttavia, per le pagine con un numero elevato di interazioni, problemi casuali possono comportare un'interazione con una latenza insolitamente elevata su una pagina altrimenti adattabile. Più interazioni si verificano in una determinata pagina, più è probabile che ciò accada.

Per fornire una misura migliore della reattività effettiva per le pagine con un numero elevato di interazioni, ignoriamo un'interazione massima ogni 50 interazioni. La maggior parte delle esperienze di pagina non ha più di 50 interazioni, pertanto l'interazione peggiore viene registrata più spesso. Il 75° percentile di tutte le visualizzazioni di pagina viene poi registrato come di consueto, il che rimuove ulteriormente gli outlier per fornire un valore uguale o migliore a quello sperimentato dalla stragrande maggioranza degli utenti.

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 basata su JavaScript, CSS, controlli del browser integrati (ad esempio elementi di modulo) o una combinazione di questi.

La latenza di un'interazione è costituita dalla 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 nuovamente 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 scadente adattabilità.
I valori INP buoni sono pari o inferiori a 200 millisecondi, quelli bassi sono superiori a 500 millisecondi e qualsiasi intervallo intermedio deve essere migliorato.
I valori INP buoni sono pari o inferiori a 200 millisecondi. I valori scadenti sono superiori a 500 millisecondi.

Che cosa contiene un'interazione?

Un diagramma che mostra un'interazione sul thread principale. L'utente inserisce un input durante l'esecuzione delle attività di blocco. L'input viene ritardato fino al completamento di queste attività, dopodiché vengono eseguiti i gestori degli eventi pointerup, mouseup e click, quindi vengono avviati i lavori di rendering e di disegno fino alla visualizzazione del frame successivo.
Il ciclo di vita di un'interazione. Si verifica un ritardo di input fino all'avvio dell'esecuzione dei gestori degli eventi, probabilmente causato da fattori quali attività lunghe nel thread principale. Vengono quindi eseguiti i callback del gestore degli eventi dell'interazione e si verifica un ritardo prima che venga visualizzato il fotogramma successivo.

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 su Riproduci su un video incorporato. Gli utenti finali non sanno cosa si trova all'interno di un iframe, pertanto sono necessari 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 mostrare 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. Le interazioni con tocco contengono eventi pointerup e pointerdown. L'evento con la durata più lunga all'interno dell'interazione contribuisce alla latenza totale dell'interazione.

Una rappresentazione di un'interazione più complessa contenente due interazioni. Il primo è un evento mousedown, che produce un frame prima che il tasto del mouse venga rilasciato, il che avvia un'altra operazione fino a quando non viene visualizzato un altro frame come risultato.
Una rappresentazione di un'interazione con più gestori di eventi. La prima parte dell'interazione riceve un input quando l'utente fa clic sul pulsante del mouse. Tuttavia, prima di rilasciare il tasto del mouse, viene visualizzato un frame. Quando l'utente rilascia il pulsante del mouse, deve essere eseguita un'altra serie di gestori di eventi prima che venga visualizzato il frame successivo.

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 ha risposto in modo affidabile all'input 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 FID osservando tutte le interazioni su una pagina, dal ritardo di input al tempo necessario per eseguire i gestori degli eventi e infine fino a quando il browser non ha visualizzato il frame successivo.

Queste differenze indicano che sia INP che FID sono tipi diversi di metriche di adattabilità. 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.

Che cosa succede se non viene registrato 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, come lo scorrimento o il passaggio del mouse sugli elementi.
  • La pagina è stata visitata da un bot, ad esempio un crawler di ricerca o un browser headless, per il quale non è stato creato uno script per interagire con la pagina.

Come misurare l'INP

L'INP può essere misurato sia sul campo che in laboratorio, in modo da simulare interazioni realistiche degli utenti.

Sul campo

Idealmente, il tuo percorso di ottimizzazione dell'INP inizierà con i dati sul campo. In condizioni ottimali, i dati sul campo del monitoraggio in tempo reale degli utenti (RUM) forniscono non solo il valore INP di una pagina, ma anche dati contestuali che mettono in evidenza l'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 dei tasti o tocco) e altri tempi utili che possono aiutarti a identificare la parte dell'interazione che influisce sull'adattabilità.

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, anche se CrUX può dirti se esiste un problema, non può dirti cosa lo ha causato. Una soluzione RUM può aiutarti a scoprire ulteriori dettagli su pagine, utenti o interazioni utente che presentano problemi di adattabilità. La possibilità di attribuire l'INP alle singole interazioni evita congetture e sprechi di energie.

Nel laboratorio

In modo ottimale, ti consigliamo di iniziare il test nel lab quando avrai a disposizione dati sul campo che suggeriscono che una pagina abbia interazioni lente. I dati sul campo semplificano notevolmente la riproduzione di interazioni problematiche in laboratorio.

Tuttavia, è del tutto possibile che tu non abbia dati sul campo. 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 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) potrebbe essere una metrica proxy ragionevole per l'INP, ma non sostituisce l'INP in sé.

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

Come migliorare l'INP

È disponibile una raccolta di guide sull'ottimizzazione dell'INP che ti guidano nella procedura di identificazione delle interazioni lente sul campo e nell'utilizzo dei dati di laboratorio per aiutarti a identificare le cause e ottimizzarle.

Log delle modifiche

A volte vengono scoperti bug nelle API utilizzate per misurare le metriche e talvolta nelle definizioni delle metriche stesse. Di conseguenza, a volte devono essere apportate delle modifiche che possono apparire 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 riportate in questo Log delle modifiche.

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

Verifica le tue conoscenze

Qual è l'obiettivo principale della metrica INP?

Per misurare il tempo necessario per la visualizzazione dei primi contenuti di una pagina.
Per valutare il tempo necessario affinché una pagina diventi completamente interattiva.
Per ridurre al minimo il tempo che intercorre tra l'avvio di un'interazione da parte dell'utente e la visualizzazione del frame successivo, per tutte o la maggior parte delle interazioni avviate dall'utente.
Per quantificare la stabilità visiva di una pagina e ridurre al minimo le variazioni di layout impreviste.

Quali dei seguenti tipi di interazione vengono osservati ai fini del calcolo dell'INP? (Seleziona tutte le opzioni pertinenti.)

Passare il cursore del mouse sopra gli elementi.
Toccare un touchscreen.
Aumentare o diminuire lo zoom nella pagina.
Scorrere la pagina con la rotellina del mouse o il trackpad.
Fare clic con un mouse.
Premere un tasto sulla tastiera.

Come viene definita la "latenza" di un'interazione per l'INP?

Il tempo che intercorre dall'inizio dell'interazione al momento in cui il frame successivo è completamente visualizzato.
Il tempo necessario al browser per elaborare i gestori di eventi di un'interazione.
Il tempo impiegato dal browser per iniziare a elaborare i gestori di eventi associati a un'interazione.
Il tempo medio necessario per produrre una risposta visiva per tutte le interazioni su una pagina.

Qual è la differenza tra INP e FID?

Non c'è differenza: INP e FID sono solo due nomi diversi per la stessa metrica.
INP e FID misurano timestamp diversi in cui una pagina diventa interattiva.
INP prende in considerazione la durata completa di tutte le interazioni, mentre FID misura solo il ritardo di input della prima interazione.
INP misura il tempo necessario per visualizzare i primi contenuti di una pagina, mentre FID misura la reattività all'input utente.

In quali circostanze i dati INP potrebbero non essere disponibili per una pagina in strumenti come PageSpeed Insights?

La pagina utilizza una libreria personalizzata per la misurazione del rendimento che non riporta i dati INP.
I dati sulle interazioni degli utenti di Chrome non sono sufficienti per calcolare un valore INP significativo nel set di dati CrUX.
Gli utenti hanno interagito con la pagina solo tramite scorrimento e passaggio del mouse, che non vengono considerati per l'INP.
La pagina è stata creata utilizzando un framework che ottimizza automaticamente per INP, quindi non è necessario segnalarlo.

Qual è la strategia più efficace per riprodurre interazioni lente in un ambiente di laboratorio?

Interagire con la pagina durante il caricamento e seguire i flussi utente comuni per identificare potenziali colli di bottiglia.
Concentrarsi su interazioni complesse e con casi limite che è improbabile che vengano riscontrate dalla maggior parte degli utenti.
Verificare le interazioni solo dopo che la pagina è stata completamente caricata e non è attiva.
Simulazione di un dispositivo di fascia alta con una connessione di rete lenta e inaffidabile per creare condizioni difficili.

Questo quiz è stato generato da Gemini 1.5 ed è stato rivisto da persone. Condividi il tuo feedback