L'interazione con Next Paint (INP) è una metrica di Core Web Vitals stabile che valuta la reattività della pagina utilizzando i dati dell'API Event Timing. INP osserva la latenza di tutte le interazioni di clic, tocco e tastiera con una pagina per tutta la sua durata e segnala la durata maggiore, ignorando i valori anomali. Un INP basso indica che la pagina è sempre in grado di rispondere rapidamente alla maggior parte delle interazioni degli utenti.
Una buona reattività indica che una pagina risponde rapidamente alle interazioni. Quando una pagina risponde a un'interazione, il browser fornisce un feedback visivo nel frame successivo di rendering per indicare che l'interazione è riuscita. Ad esempio, può fornire feedback su quanto segue:
- Se un articolo aggiunto al carrello degli acquisti online viene effettivamente aggiunto.
- Indica se un menu di navigazione mobile è stato aperto.
- Indica se i contenuti di un accesso vengono autenticati dal server.
Alcune interazioni richiedono naturalmente più tempo di altre, ma nel caso di interazioni particolarmente complesse è importante presentare rapidamente un feedback visivo iniziale per comunicare all'utente qualcosa che sta succedendo. Il tempo che manca alla prossima riproduzione è la prima occasione per farlo. Pertanto, lo scopo di INP è misurare non tutti gli eventuali effetti dell'interazione (come i recuperi della rete e gli aggiornamenti dell'interfaccia utente da altre operazioni asincrone), ma l'orario in cui la visualizzazione successiva è bloccata. Il ritardo del feedback visivo fa sì che gli utenti pensino che la pagina non risponda alle loro azioni.
L'obiettivo dell'INP è ridurre al minimo il tempo che intercorre tra l'avvio di un'interazione da parte dell'utente e il completamento del frame successivo, per tutte o la maggior parte delle interazioni avviate dall'utente.
L'INP viene calcolato osservando tutte le interazioni effettuate con una pagina. Per la maggior parte dei siti, l'interazione con la latenza peggiore è riportata come INP. Tuttavia, per le pagine con un numero elevato di interazioni, singhiozzi casuali possono determinare un'interazione con una latenza insolitamente elevata su un sito altrimenti reattivo. Maggiore è il numero di interazioni, maggiori sono le probabilità che ciò si verifichi. Per contrastare il problema e misurare meglio l'effettiva reattività di questi tipi di pagine, ignoriamo un'interazione più elevata ogni 50 interazioni. Poiché la maggior parte delle esperienze sulle pagine non ha più di 50 interazioni, il browser segnala quasi sempre l'interazione peggiore. Il 75° percentile di tutte le visualizzazioni di pagina viene quindi riportato come di consueto, il che rimuove ulteriormente i valori anomali per fornire un valore più rappresentativo dell'esperienza utente generale.
Un'interazione è un gruppo di gestori di eventi che si attivano durante lo stesso gesto logico dell'utente. Ad esempio, le interazioni di tipo "tocca" su un dispositivo touchscreen includono più eventi, come pointerup, pointerdown e click. Un'interazione
può essere generata da JavaScript, CSS, dai controlli integrati del browser come gli elementi del modulo
o da una combinazione di questi elementi.
La latenza di un'interazione è costituita dalla singola durata più lunga di un gruppo di gestori di eventi che guida l'interazione, dal momento in cui l'utente inizia l'interazione fino al momento in cui il frame successivo viene presentato con feedback visivo.
Punto chiave: per ulteriori dettagli su come viene misurato l'INP, consulta la sezione "Che cos'è un'interazione?".
Cos'è un buon punteggio INP?
Per garantire esperienze utente con una buona reattività, una buona soglia da misurare è il 75° percentile di caricamenti pagine registrati sul campo, segmentati su dispositivi mobili e computer:
- Un INP uguale o inferiore a 200 millisecondi indica che la pagina ha una reattività buona.
- Un valore INP compreso tra 200 millisecondi e 500 millisecondi indica che la reattività della pagina deve migliorare.
- Un INP superiore a 500 millisecondi indica che la pagina ha una reattività scarsa.
Che cos'è un'interazione?
Il fattore principale 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:
- Facendo clic con il mouse.
- Toccare un dispositivo con un touchscreen.
- Premere un tasto su una tastiera fisica o sullo schermo.
Punto chiave: il passaggio del mouse e lo scorrimento non vengono considerati nel calcolo dell'INP. Tuttavia, lo scorrimento con la tastiera (barra spaziatrice, pagina su, pagina giù e così via) prevede un tasto, che può attivare altri eventi misurati da INP. Eventuali scorrimenti risultanti non vengono considerati nel calcolo INP.
Le interazioni avvengono nel documento principale o negli iframe incorporati nel documento, ad esempio facendo clic su Riproduci in un video incorporato. Poiché gli utenti finali non sanno quali parti della pagina sono inserite negli iframe, devi misurare l'INP all'interno degli iframe per misurarlo con precisione per l'intera pagina. Tuttavia, le API web JavaScript non hanno accesso ai contenuti dell'iframe e potrebbero non essere in grado di misurare l'INP all'interno di un iframe. Questo valore viene mostrato come una differenza tra CrUX e RUM.
Le interazioni possono consistere di più eventi. Ad esempio, una sequenza di tasti include gli eventi keydown, keypress e keyup, mentre le interazioni di tocco includono gli eventi pointerup e pointerdown. L'evento con la durata più lunga all'interno
dell'interazione viene scelto come latenza dell'interazione.
L'INP viene calcolato quando l'utente esce dalla pagina, generando un singolo valore che rappresenta l'adattabilità complessiva della pagina durante il suo ciclo di vita. Un INP basso indica che una pagina risponde in modo affidabile all'input dell'utente.
Qual è la differenza tra INP e il FID (First Input Delay)?
INP è la metrica successiva al ritardo FID (First Input Delay). Sebbene entrambe siano metriche di reattività, FID ha misurato solo il ritardo di input della prima interazione su una pagina. INP migliora il FID prendendo in considerazione tutte le interazioni delle pagine, 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 dipinto il frame successivo.
Queste differenze indicano che sia INP che FID sono tipi diversi di metriche di reattività. Mentre FID era una metrica relativa all'adattabilità al caricamento progettata per valutare la prima impressione della pagina sull'utente, l'INP è un indicatore più affidabile della reattività complessiva, indipendentemente da quando si verificano le interazioni di una pagina.
Che cosa succede se non viene segnalato alcun valore INP?
È possibile che una pagina non restituisca valore INP. Ciò può accadere per una serie di motivi, tra cui:
- La pagina è stata caricata, ma l'utente non ha mai interagito con essa.
- La pagina è stata caricata, ma l'utente ha interagito con essa utilizzando gesti non misurati, come lo scorrimento o il passaggio del mouse sopra gli elementi.
- Un bot, ad esempio un crawler di ricerca o un browser headless, sta accedendo alla pagina e che non è stato creato per interagire con la pagina tramite script.
Come misurare l'INP
L'INP può essere misurato sul campo e nel laboratorio utilizzando una serie di strumenti.
Punto chiave: il modo migliore per misurare l'INP del tuo sito web è raccogliere le metriche degli utenti effettivi sul campo. Se sei abituato a fare affidamento sui dati di prova controllati per valutare le prestazioni, ti consigliamo di leggere l'articolo Perché i dati di prova controllati e di prova sul campo possono essere diversi (e cosa fare al riguardo).
Sul campo
Idealmente, il tuo percorso verso l'ottimizzazione dell'INP inizia con i dati sul campo. Nella migliore delle ipotesi, i dati di campo del monitoraggio degli utenti reali (RUM) forniscono non solo il valore INP di una pagina, ma anche dati contestuali che evidenziano quale interazione specifica era responsabile del valore INP stesso, se l'interazione si è verificata durante o dopo il caricamento pagina, il tipo di interazione (clic, pressione tasti o tocco) e altre informazioni preziose.
Se il tuo sito web è idoneo all'inclusione nel Report sull'esperienza utente di Chrome (CrUX), puoi ottenere rapidamente i dati dei campi INP tramite CrUX in PageSpeed Insights, insieme ai dati su 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 ottenere anche i dati a livello di pagina.
Tuttavia, sebbene CrUX possa indicare che esiste un problema ad alto livello, spesso non fornisce dettagli sufficienti per comprenderne appieno la natura. Una soluzione RUM può aiutarti a scoprire ulteriori dettagli su pagine, utenti o interazioni degli utenti che presentano interazioni lente. Essere in grado di attribuire l'INP alle interazioni individuali aiuta a evitare congetture e sprechi.
Nel laboratorio
In via ottimale, ti consigliamo di iniziare i test in laboratorio dopo aver raccolto dati sul campo che suggeriscono interazioni lente. In assenza di dati sul campo, tuttavia, esistono strategie per riprodurre le interazioni lente. Le strategie includono il monitoraggio di flussi utente comuni e la verifica delle interazioni durante il processo, nonché l'interazione con la pagina durante il caricamento, quando il thread principale è spesso più intenso, per esporre le interazioni lente durante quella parte cruciale dell'esperienza utente.
Come migliorare l'INP
Consulta la nostra raccolta di guide all'ottimizzazione dell'INP per informazioni su come identificare le interazioni lente sul campo e sull'utilizzo dei dati di laboratorio per ottimizzarle.
Log delle modifiche
Occasionalmente, vengono scoperti bug nelle API utilizzate per misurare le metriche e talvolta nelle definizioni delle metriche stesse. Di conseguenza, è necessario apportare talvolta 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 vengono mostrate in questo log delle modifiche.
Se hai feedback su queste metriche, forniscilo nel gruppo Google web-vitals-feedback.