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 con la pagina. Quando una pagina risponde a un'interazione, il risultato è un feedback visivo, che viene presentato dal browser nel frame successivo presentato. 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 più tempo di altre, ma nel caso di interazioni particolarmente complesse, è importante presentare rapidamente un feedback visivo iniziale per indicare all'utente che qualcosa sta succedendo. Il tempo che manca alla prossima visualizzazione è la prima opportunità per farlo. Pertanto, lo scopo dell'INP non è misurare tutti gli effetti finali dell'interazione (come i recuperi della rete e gli aggiornamenti dell'interfaccia utente da altre operazioni asincrone), ma il momento in cui la visualizzazione next viene bloccata. Il ritardo del feedback visivo potrebbe dare agli utenti l'impressione che la pagina non risponda alle loro azioni.
L'obiettivo dell'INP è garantire che il tempo che intercorre tra l'avvio di un'interazione da parte dell'utente e la visualizzazione del frame successivo sia il più breve possibile, per tutte o la maggior parte delle interazioni effettuate dall'utente.
Nel video seguente, l'esempio riportato a destra fornisce un feedback visivo immediato che indica l'apertura di una fisarmonica. Inoltre, dimostra come una scarsa reattività possa causare l'inserimento di più risposte involontarie perché l'utente ritiene che l'esperienza sia interrotta.
Questo articolo spiega come funziona l'INP, come misurarlo e indirizza 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.
Come indicato in precedenza, 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, interruzioni casuali possono determinare un'interazione insolitamente elevata su un sito altrimenti reattivo. Maggiore è il numero di interazioni, maggiori sono le probabilità che ciò accada. Per ovviare al problema e valutare meglio l'effettiva reattività di questi tipi di pagine, ignoriamo un'interazione più elevata ogni 50 interazioni. La maggior parte delle esperienze sulle pagine non ha più di 50 interazioni, quindi verrà registrata l'interazione peggiore. Viene quindi registrato il 75° percentile di tutte le visualizzazioni di pagina, il che rimuove ulteriormente i valori anomali per assegnare un valore pari o superiore alla stragrande maggioranza 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 è 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 a quello in cui il frame successivo viene presentato con feedback visivo.
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 indica che la pagina ha una buona reattività.
- Un valore INP superiore a 200 millisecondi o inferiore o pari a 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 con tecnologia CSS.
Per quanto riguarda l'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 del contenuto di un iframe o meno. Di conseguenza, gli INP all'interno degli iframe sono necessari per misurare l'esperienza utente per la pagina di primo livello. Nota: le API web JavaScript non avranno accesso ai contenuti dell'iframe, pertanto potrebbero non essere in grado di misurare INP all'interno di un iframe e questo verrà visualizzato come una differenza tra CrUX e RUM.
Le interazioni possono consistere di due parti, ognuna con più eventi. Ad esempio, una sequenza di tasti è composta dagli eventi keydown, keypress e keyup. Le interazioni tocco contengono 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 rappresentativo dell'adattabilità complessiva della pagina per tutto il ciclo di vita della pagina. 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)?
Se INP considera tutte le interazioni con la pagina, First Input Delay (FID) tiene conto solo della prima interazione. Inoltre, misura solo il ritardo di input della prima interazione, non il tempo necessario per eseguire i gestori di eventi o il ritardo nella presentazione del frame successivo.
Dato che FID è anche una metrica relativa all'adattabilità al caricamento, il motivo alla base è che se la prima interazione effettuata con una pagina nella fase di caricamento ha un ritardo di input percepibile minimo o nullo, la pagina ha fatto una buona prima impressione.
L'INP non riguarda solo le prime impressioni. Campionando tutte le interazioni, la reattività può essere valutata in modo completo, rendendo l'INP un indicatore più affidabile della reattività complessiva rispetto al FID.
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:
- 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 che non richiedevano clic, tocco o utilizzo della tastiera. Ad esempio, lo scorrimento o il passaggio del mouse sopra gli elementi non tiene conto del modo in cui viene calcolato l'INP.
- 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 altre informazioni importanti.
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 pagina.
Tuttavia, anche se CrUX è utile per indicare che esiste un problema ad alto livello, spesso non fornisce dettagli sufficienti per comprenderne appieno la causa. Una soluzione RUM può aiutarti ad approfondire il dettaglio delle pagine, degli utenti o delle interazioni degli utenti che riscontrano interazioni lente. 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 i test in laboratorio una volta che hai a disposizione dati sul campo che suggeriscano interazioni lente. In assenza di dati sul campo, tuttavia, esistono alcune strategie per riprodurre le interazioni lente in laboratorio. Queste strategie includono il monitoraggio dei flussi utente comuni e la verifica delle interazioni lungo il percorso, nonché l'interazione con la pagina durante il caricamento, ovvero quando il thread principale è spesso più intenso, per far emergere 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 utilizzare i dati di laboratorio per analizzarle e ottimizzarle in vari modi.
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, puoi fornirle nel gruppo Google web-vitals-feedback.