Esperimento di First Input Delay nel report UX di Chrome

Rick Viscomi
Rick Viscomi

L'obiettivo del report sull'esperienza utente di Chrome è aiutare la community web a comprendere la distribuzione e l'evoluzione delle prestazioni reali degli utenti. Finora, ci siamo concentrati su metriche di visualizzazione e caricamento delle pagine, come First Contentful Paint (FCP) e Onload (OL), che ci hanno aiutato a comprendere le prestazioni visiva dei siti web per gli utenti. A partire dalla release di giugno 2018, sperimenteremo una nuova metrica incentrata sull'utente incentrata sull'interattività delle pagine web: First Input Delay (FID). Questa nuova metrica ci consentirà di capire meglio in che modo i siti web adattabili sono in relazione all'input degli utenti.

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

Come viene misurato il FID

Che cos'è esattamente il FID? Ecco come viene definito nel post del blog dell'annuncio First Input Delay:

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) al 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 utente.

È come misurare il tempo tra il suono del campanello e la risposta alla porta. Se ci vuole molto tempo, i motivi potrebbero essere diversi. Ad esempio, può darsi che la persona sia lontana dalla porta o che non si muova rapidamente. Analogamente, le pagine web potrebbero essere occupate a svolgere altre operazioni o il dispositivo dell'utente potrebbe essere lento.

Esplorazione di FID nel report sull'esperienza utente di Chrome

Con un mese di dati FID provenienti da milioni di origini, è già possibile scoprire una vasta gamma di informazioni interessanti. Diamo un'occhiata ad alcune query che mostrano come estrarre queste informazioni dal report sull'esperienza utente di Chrome in BigQuery.

Iniziamo con una query sulla percentuale di esperienze FID veloci per developers.google.com. Possiamo definire un'esperienza rapida come un'esperienza FID inferiore a 100 ms. Per i consigli FID, se il ritardo è pari o superiore a 100 ms, l'utente dovrebbe apparire immediato.

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 viene percepito come istantaneo. Sembra interessante, ma come si rapporta a 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 sono inferiori a 100 ms. Pertanto, developers.google.com è sopra la media.

Ora proviamo a suddividere questi dati per vedere se c'è una differenza tra la percentuale di FID veloce su computer e quella su dispositivo mobile. Un'ipotesi è che i dispositivi mobili abbiano valori FID più lenti, probabilmente a causa di un hardware più lento rispetto ai computer desktop. Se la CPU è meno potente, potrebbe essere più occupata 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 desktop hanno una densità cumulativa maggiore di esperienze FID rapide rispetto ai fattori di forma di telefoni e tablet. Capire il motivo per cui esistono queste differenze, ad esempio le prestazioni della CPU, richiederebbe i test A/B che esulano dall'ambito del report sull'esperienza utente di Chrome.

Ora che abbiamo visto come identificare se un'origine presenta esperienze FID veloci, diamo un'occhiata a un paio di origini che funzionano davvero bene.

Esempio 1: http://secretlycanadian.com

Pellicola WebPageTest di secretlycanadian.com

Questa origine ha il 98% di esperienze FID inferiori a 100 ms. Come fanno? Analizzando come è integrato in WebPageTest, possiamo vedere che è una pagina WordPress con molte immagini, ma ha 168 kB di JavaScript che viene eseguito in circa 500 ms sulla nostra macchina del laboratorio. Secondo l'archivio HTTP, questo non è molto JavaScript, che posiziona questa pagina al 28° percentile.

Struttura a cascata AWebPageTest di secretlycanadian.com

La barra rosa che copre da 2,7 a 3 secondi è la fase di analisi dell'HTML. Durante questo periodo la pagina non è interattiva e appare visivamente incompleta (vedi "3.0 s" nella sequenza in alto). 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 lavoro JavaScript viene distribuito in burst veloci.

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

Pellicola WebPageTest di wtfast.com

Questa origine ha il 96% di esperienze FID istantanee. Carica 267 kB di JavaScript (38° percentile in HTTP Archive) e lo elabora per 900 ms sulla macchina del lab. La sequenza mostra che la pagina impiega circa 5 secondi per colorare lo sfondo e circa 2 secondi in più per il colore dei contenuti.

Struttura a cascata WebPageTest di wtfast.com

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

Inizia a esplorare

Puoi scoprire di più sul FID nell'episodio di questa settimana di The State of the Web:

La disponibilità di FID nel report sull'esperienza utente di Chrome ci consente di stabilire una base di esperienze di interattività. Utilizzando questa base di riferimento, possiamo osservare i cambiamenti nelle release future o confrontare le singole origini. Se vuoi iniziare a raccogliere il FID nelle misurazioni sul campo del tuo sito, registrati alla prova dell'origine da bit.ly/event-timing-ot e seleziona la funzionalità Tempi eventi. Ovviamente inizia a esplorare il set di dati per ottenere informazioni interessanti sullo stato dell'interattività sul web. Questa è ancora una metrica sperimentale, pertanto ti invitiamo a darci il tuo feedback e a condividere la tua analisi nel gruppo di discussione del report sull'esperienza utente di Chrome o in @ChromeUXReport su Twitter.