I dati sull'utilizzo di Chrome indicano che il 90% del tempo di un utente su una pagina viene trascorso dopo il caricamento. Pertanto, un'attenta misurazione della reattività durante tutto il ciclo di vita della pagina è importante. Questo è quanto valuta la metrica INP.
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 visualizzato. Il feedback visivo indica se, ad esempio, un articolo che aggiungi a un carrello degli acquisti 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 nel caso di interazioni particolarmente complesse, è importante presentare rapidamente un feedback visivo iniziale per comunicare all'utente che sta succedendo qualcosa. Il frame successivo che il browser mostrerà la prima opportunità possibile per farlo.
Pertanto, lo scopo dell'INP non è misurare tutti gli effetti finali di un'interazione, come i recuperi della rete e gli aggiornamenti dell'interfaccia utente da altre operazioni asincrone, ma il tempo in cui la visualizzazione successiva viene bloccata. Ritardando il feedback visivo, gli utenti potrebbero avere l'impressione che la pagina non risponda abbastanza rapidamente. Inoltre, INP è stato sviluppato per aiutare gli sviluppatori a misurare questa parte dell'esperienza utente.
Nel video seguente, l'esempio riportato a destra fornisce un feedback visivo immediato che indica l'apertura di una fisarmonica. La scarsa reattività è dimostrata nell'esempio a sinistra e spiega come possa creare esperienze utente negative.
Questa guida spiega come funziona l'INP, come misurarlo e rimanda alle risorse per migliorarlo.
Che cos'è l'INP?
L'INP è una metrica che valuta l'adattabilità complessiva di una pagina alle interazioni degli utenti osservando la latenza di tutte le interazioni con 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 è riportata come INP.
Tuttavia, per le pagine con un numero elevato di interazioni, singhiozzi casuali possono comportare un'interazione insolitamente elevata per una pagina reattiva. Maggiore è il numero di interazioni che si verificano in una determinata pagina, maggiori sono le probabilità che ciò accada.
Per misurare meglio l'effettiva reattività delle pagine con un numero elevato di interazioni, ignoriamo un'interazione più elevata ogni 50 interazioni. La maggior parte delle esperienze sulle pagine non registra più di 50 interazioni, di conseguenza l'interazione peggiore viene riportata più spesso. 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 pari o migliore alla maggior parte degli utenti.
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, ad esempio pointerup, pointerdown e click. Un'interazione può essere generata da JavaScript, CSS, dai controlli integrati del browser (ad esempio gli elementi del modulo) o da una loro combinazione.
La latenza di un'interazione è formata dalla singola durata più lunga di un gruppo di gestori di eventi che gestiscono l'interazione, dal momento in cui l'utente inizia l'interazione a quello in cui il browser visualizza il frame successivo.
Cos'è un buon punteggio INP?
È difficile bloccare etichette come "buona" o "scarsa" su una metrica di reattività. Da un lato, devi incoraggiare pratiche di sviluppo che danno la priorità a una buona reattività. D'altra parte, è necessario tenere conto del fatto che esiste una notevole variabilità nelle capacità dei dispositivi utilizzati dagli utenti per definire aspettative di sviluppo realizzabili.
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 inferiore o pari a 200 millisecondi significa che una pagina ha una buona reattività.
- Un valore INP superiore a 200 millisecondi o inferiore o pari a 500 millisecondi indica che la reattività di una pagina deve migliorare.
- Un valore INP superiore a 500 millisecondi indica che una 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 con tecnologia 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.
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 saranno a conoscenza di cosa è contenuto in un iframe o meno, pertanto gli INP all'interno degli iframe sono necessari per misurare l'esperienza utente per la pagina di primo livello. Poiché le API web JavaScript non hanno accesso ai contenuti degli iframe, ciò potrebbe essere visualizzato come 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. Le interazioni tocco contengono eventi pointerup e pointerdown. L'evento con la durata più lunga all'interno dell'interazione è ciò che 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 ha risposto in modo affidabile all'input dell'utente.
Qual è la differenza tra INP e il FID (First Input Delay)?
INP è la metrica successiva a 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 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 dipinto il frame successivo.
Queste differenze significano 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 dell'adattabilità complessiva, indipendentemente da quando si verificano le interazioni con 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 fatto clic, toccato o premuto un tasto della tastiera.
- La pagina è stata caricata, ma l'utente ha interagito con essa utilizzando gesti non misurati, come lo scorrimento o il passaggio del mouse sopra 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 misurata sia sul campo che in laboratorio utilizzando una serie di strumenti.
Sul campo
Idealmente, il tuo percorso per ottimizzare l'INP inizierà con i dati sul campo. Nella migliore delle ipotesi, i dati dei campi del monitoraggio degli utenti reali (RUM) ti 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 dei tasti o tocco) e altri tempi importanti che possono aiutarti a identificare quale parte dell'interazione stava influenzando la reattività.
Se il tuo sito web è idoneo all'inclusione nel Report sull'esperienza utente di Chrome (CrUX), puoi ottenere rapidamente dati sul campo per INP tramite CrUX in PageSpeed Insights (e in 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ò indicare se c'è un problema, non può indicarti la causa. Una soluzione RUM può aiutarti a scoprire ulteriori dettagli su pagine, utenti o interazioni degli utenti con problemi di reattività. Essere in grado di attribuire l’INP alle interazioni individuali consente di evitare congetture e sprechi sforzi.
Nel laboratorio
In via ottimale, ti consigliamo di iniziare a eseguire test in laboratorio una volta che hai a disposizione dati sul campo che suggeriscano interazioni lente tra una pagina. Se non disponi di dati sul campo, tuttavia, esistono alcune strategie per riprodurre le interazioni lente nel lab. Le strategie includono il seguire i flussi utente comuni e verificare 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 l'INP
È disponibile una raccolta di guide all'ottimizzazione dell'INP per guidarti nel processo di identificazione delle interazioni lente sul campo e per utilizzare i dati di laboratorio per identificare le cause e ottimizzarle.
Log delle modifiche
Occasionalmente, i bug vengono scoperti nelle API utilizzate per misurare le metriche e talvolta nelle definizioni delle metriche stesse. Di conseguenza, è necessario apportare talvolta 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 visualizzate in questo log delle modifiche.
Se hai feedback su queste metriche, forniscilo nel gruppo Google web-vitals-feedback.