Esperimento di First Input Delay nel report UX di Chrome

L'obiettivo del Report sull'esperienza utente di Chrome è aiutare la community web a comprendere la distribuzione e l'evoluzione del rendimento degli utenti reali. Finora, ci siamo concentrati sulle metriche di pittura e caricamento pagina come First Contentful Paint (FCP) e Onload (OL), che ci hanno aiutato a capire il rendimento visivo dei siti web per gli utenti. A partire dalla release di giugno 2018, stiamo sperimentando una nuova metrica incentrata sugli utenti che si concentra sull'interattività delle pagine web: il First Input Delay (FID). Questa nuova metrica ci consentirà di comprendere meglio la reattività dei siti web all'input degli utenti.

Di recente, FID è stato reso disponibile in Chrome come prova dell'origine, il che significa che i siti web possono attivare il sperimentazione di questa nuova funzionalità della piattaforma web. Allo stesso modo, il FID sarà disponibile nel Report sull'esperienza utente di Chrome come metrica sperimentale, il che significa che sarà disponibile per tutta la durata della prova dell'origine all'interno di uno spazio dei nomi "sperimentale" separato.

Come viene misurato l'ID utente

Che cos'è esattamente l'ID utente? Ecco come viene definito nel post del blog sull'annuncio del First Input Delay:

Il First Input Delay (FID) misura il tempo che intercorre tra la prima interazione di un utente con il tuo sito (ovvero quando fa clic su un link, tocca un pulsante o utilizza un controllo personalizzato basato su JavaScript) e il momento in cui il browser è effettivamente in grado di rispondere a tale interazione.

Animazione che mostra come un thread principale occupato ritarda la risposta a un'interazione dell'utente.

È come misurare il tempo che intercorre tra il suono del campanello di una casa e l'apertura della porta. Se il processo richiede molto tempo, i motivi potrebbero essere diversi. Ad esempio, la persona potrebbe essere lontana dalla porta o non riuscire a muoversi rapidamente. Analogamente, le pagine web potrebbero essere occupate da altri lavori o il dispositivo dell'utente potrebbe essere lento.

Esplorazione dell'ID utente nel Report sull'esperienza utente di Chrome

Con un mese di dati FID provenienti da milioni di origini, c'è già un'infinità di informazioni interessanti da scoprire. Diamo un'occhiata ad alcune query che mostrano come estrarre questi insight dal report sull'esperienza utente di Chrome su BigQuery.

Iniziamo chiedendo la percentuale di esperienze FID veloci per developers.google.com. Possiamo definire un'esperienza veloce come un'esperienza in cui il valore FID è inferiore a 100 ms. In base ai consigli RAIL, se il ritardo è pari o superiore a 100 ms, dovrebbe sembrare immediato per l'utente.

SELECT
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid
WHERE
  origin = 'https://developers.google.com'

I risultati mostrano che il 95% delle esperienze FID su questa origine è percepito come immediato. Sembra davvero un buon risultato, ma come si confronta con tutte le origini nel set di dati?

SELECT
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid

I risultati di questa query mostrano che l'84% delle esperienze FID è inferiore a 100 ms. Quindi, developers.google.com è sopra la media.

Ora proviamo a suddividere questi dati per vedere se c'è una differenza tra la percentuale di FID rapido su computer e su dispositivo mobile. Un'ipotesi è che i dispositivi mobili abbiano valori FID più lenti, probabilmente a causa di hardware più lento rispetto ai computer. Se la CPU è meno potente, potrebbe essere più impegnata per un periodo di tempo più lungo e comportare esperienze FID più lente.

SELECT
  form_factor.name AS form_factor,
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid
GROUP BY
  form_factor
form_factor fast_fid
desktop 96,02%
telefono 79,90%
tablet 76,48%

I risultati confermano la nostra ipotesi. I computer hanno una densità cumulativa più elevata di esperienze FID rapide rispetto ai fattori di forma di smartphone e tablet. Comprendere perché esistono queste differenze, ad esempio le prestazioni della CPU, richiederebbe un test A/B al di fuori dell'ambito del report sull'esperienza utente di Chrome.

Ora che abbiamo visto come identificare se un'origine offre esperienze FID rapide, vediamo un paio di origini che funzionano davvero bene.

Esempio 1: http://secretlycanadian.com

Sequenza di WebPageTest di secretlycanadian.com

Questa origine ha il 98% di esperienze FID inferiori a 100 ms. Come fa? Analizzando la sua struttura in WebPageTest, possiamo vedere che si tratta di una pagina WordPress con molte immagini, ma con 168 KB di JavaScript che viene eseguito in circa 500 ms sulla nostra macchina di laboratorio. Non si tratta di molto codice JavaScript secondo HTTP Archive, che posiziona questa pagina al 28° percentile.

Struttura a cascata di AWebPageTest di secretlycanadian.com

La barra rosa con un valore di 2,7-3 secondi è la fase dell'analisi HTML. Durante questo periodo di tempo, la pagina non è interattiva e appare visivamente incompleta (vedi "3,0 secondi" nella sequenza di immagini sopra). Dopodiché, tutte le attività lunghe che devono essere elaborate vengono suddivise per garantire che il thread principale rimanga inattivo. Le linee rosa nella riga 11 mostrano come il codice JavaScript viene distribuito in brevi intervalli.

Esempio 2: https://www.wtfast.com

Sequenza di WebPageTest di wtfast.com

Questa origine ha il 96% di esperienze FID istantanee. Carica 267 KB di codice JavaScript (38° percentile in HTTP Archive) e lo elabora per 900 ms sulla macchina di laboratorio. La sequenza mostra che la pagina impiega circa 5 secondi per dipingere lo sfondo e altri 2 secondi per dipingere i contenuti.

Struttura a cascata di WebPageTest di wtfast.com

La cosa più interessante dei risultati è che non è visibile nulla di interattivo mentre il thread principale è occupato tra 3 e 5 secondi. In realtà è la lentezza del valore FCP di questa pagina che migliora il valore FID. Questo è un buon esempio dell'importanza di utilizzare molte metriche per rappresentare l'esperienza utente.

Inizia a esplorare

Puoi scoprire di più sull'FID nella puntata di questa settimana di The State of the Web:

La disponibilità dell'ID utente nel Report sull'esperienza utente di Chrome ci consente di stabilire un valore di riferimento per le esperienze di interattività. Utilizzando questo valore di riferimento, possiamo osservarne la variazione nelle release future o fare il benchmarking delle singole origini. Se vuoi iniziare a raccogliere FID nelle misurazioni sul campo del tuo sito, registrati per la prova dell'origine all'indirizzo bit.ly/event-timing-ot e seleziona la funzionalità di temporizzazione degli eventi. E, naturalmente, inizia a esplorare il set di dati per ottenere informazioni interessanti sullo stato dell'interattività sul web. Si tratta ancora di una metrica sperimentale, quindi ti invitiamo a inviarci il tuo feedback e a condividere la tua analisi nel gruppo di discussione del Report sull'esperienza utente di Chrome o su @ChromeUXReport su Twitter.