Torniamo a dedicarci ai Core Web Vitals, o più semplicemente Web Vitals, il nuovo set di metriche delle prestazioni di un sito che aiutano a evidenziare gli aspetti dello sviluppo di pagine Web che influiscono sulla user experience, come caricamento della pagina, interattività e stabilità visiva. Google ha già anticipato che i Web Vitals saranno fattori di ranking come parte del Page Experience Update che ci attende nel 2021, quindi è più che mai opportuno capire bene come funzionano e come misurare questi parametri cruciali.

Come funzionano le metriche Web Vitals

Il primo aspetto da considerare è che tali metriche si concentrano sul completamento di determinati eventi – incluso ciò che è interessato in modo interattivo o visivo quando si verificano questi eventi – mentre le pagine vengono caricate fino a un punto di stabilità relativo all’esperienza dell’utente, come ci spiega Detlef Johnson su Search Engine Land.

Ciò significa che i valori del punteggio possono cambiare quando gli utenti interagiscono con la pagina, e in linea generale si ottengono punteggi migliori quando gli eventi si verificano più velocemente lungo gli intervalli di tempo del cronometro.

Le prime tre metriche Core Web Vitals

Opportuno è anche ricordare che Google prevede di aggiornare periodicamente l’elenco di queste metriche, anche se su cadenza annuale per evitare di modificare troppo frequentemente gli obiettivi da raggiungere per SEO e sviluppatori. Ad esempio, sembra che la prossima aggiunta misurerà le animazioni della pagina, per ora in fase di sviluppo.

Ad ogni modo, per ora sono tre le metriche che Google ha definito vitali per il web, ovvero:

  1. Largest Contentful Paint (LCP), che misura l’intervallo di tempo tra l’inizio del caricamento di una pagina e il rendering completo dell’immagine o del blocco di testo più grande nella visualizzazione di un utente. Il punteggio potrebbe cambiare durante il caricamento della pagina e quando il contenuto è visibile ma il nodo più grande resta nel backlog ancora da visualizzare; ciò diventa più evidente sulle velocità di connessione limitate.
  2. First Input Delay (FID), ovvero il tempo necessario affinché una pagina sia pronta per l’interattività dell’utente, ovvero quanto tempo impiega la pagina, mentre viene assemblata, a rispondere a clic, scroll o input da tastiera elaborando corrispondenti i gestori di eventi. L’interazione dell’utente può essere notevolmente ritardata dalle principali attività di script thread-blocking.
  3. Cumulative Layout Shift (CLS), che è la distanza misurata e la frazione del viewport che si sposta a causa della manipolazione del DOM o della mancanza di attributi di dimensione per i principali elementi multimediali. Quando non riusciamo a definire le dimensioni per le nostre hero images, ad esempio, il testo sulle pagine sembra inizialmente solo essere dislocato, causando uno “spostamento” distruttivo del layout dei contenuti per i nostri utenti.

I tre valori delle metriche

Le metriche delle prestazioni per ciascuna statistica Web Vital sono classificate in base a tre risultati:

  • Buono (che significa la promozione)
  • Miglioramenti necessari
  • Fallito

Gli utenti di lunga data di PageSpeed ​​Insights potrebbero avere familiarità con metriche simili, molte delle quali resteranno invariate, anche se forse non tutte. I Core Web Vitals rappresentano il culmine di queste altre metriche e con esse derivano dalla complessità della Developer Experience, semplificata per consentire a tutti gli utenti (proprietari siti, ma anche webmaster e sviluppatori) di contare su una gradita chiarezza e su meno metriche, ma più grandi, da seguire.

Come analizzare i Web Vitals Score per desktop e mobile

È possibile analizzare, misurare e ottenere score indipendenti per i Web Vitals tra dispositivi mobili (telefono) o desktop / laptop.

In alcuni strumenti è possibile specificare quale tipo di dispositivo vuoi testare o passare da un tipo all’altro quando entrambi sono disponibili. Ad esempio, PageSpeed ​​Insights utilizza per impostazione predefinita le statistiche per dispositivi mobili, quindi dovremo passare alla scheda del desktop per vedere la differenza nei punteggi tra le due versioni.

Google ha aggiunto le metriche Core Web Vitals ai rapporti di Search Console quando sono disponibili i dati di Chrome User Experience; in questo caso, nella dashboard del tool sono mostrare entrambe le categorie di dispositivi con punteggi negli URL coperti dall’indicizzazione, ed è possibile eseguire il drill down di gruppi di pagine che indicano problemi.

Come funziona il Chrome User Experience Report

Come parte del suo Chrome User Experience Report (CrUX), Google mostra i dati sul campo di oltre 18 milioni di siti web che hanno raccolto statistiche sufficienti per riportare i Web Vitals. I dati sono conservati nel servizio BigQuery di Google, dove è possibile eseguire query su statistiche da questi siti Web risalenti a diversi anni fa; gli aggiornamenti sono in corso e disponibili il secondo martedì di ogni mese, a seguito dell’accumulazione, informa l’articolo.

Per vedere i punteggi di dispositivi mobili e desktop utilizzando il nuovo rapporto CrUX, avremo bisogno di “telefono” o “desktop” come fattori di forma del dispositivo nelle nostre istruzioni SQL. È interessante notare che “mobile” non funziona in quanto non è una colonna e “tablet” funziona solo raramente a causa della scarsità dei dati specificati. I dati dei tablet possono essere visualizzati nelle query per l’origine (dominio) di Google, ad esempio, ma non li vedrai per i siti più tranquilli.

La differenza tra lab data e field data

Per comprendere davvero le metriche e i punteggi bisogna però prima familiarizzare con i concetti di dati di laboratorio e dati di campo, ovvero lab data e field data, topic sul quale Detlef Johnson apre un’utile parentesi.

I dati di “laboratorio” di Web Vitals vengono raccolti tramite API del browser come parte dei timer degli eventi di caricamento della pagina e delle approssimazioni matematiche che simulano l’interattività dell’utente. Invece, i dati sul “campo” sono costituiti dalle stesse metriche raccolte dalle esperienze utente effettive di navigazione sulle nostre pagine con i valori di timer dell’evento risultante trasmessi a un repository.

Le condizioni di utilizzo possono comportare punteggi estremamente variabili e gli score stessi possono letteralmente cambiare durante la navigazione delle pagine, motivo per cui dobbiamo capire come viene tabulato ogni punteggio rispetto un determinato ambiente e interpretare veramente i risultati solo dopo aver determinato per la prima volta se stiamo esaminando i dati di laboratorio o sul campo.

Le informazioni sugli strumenti

Possiamo accedere ai dati di laboratorio in tempo reale utilizzando PageSpeed Insights, WebPageTest , Chrome Dev Tools e tramite una nuova estensione del browser Chrome, “Web Vitals”. PSI e WebPageTest calcolano i punteggi dagli eventi di caricamento della pagina e approssimano i ritardi di interattività della pagina, contando i tempi delle attività di script di blocco dei thread.

Gli strumenti di lab data sono incredibilmente utili nel flusso di lavoro per la creazione di report e il miglioramento dei punteggi e “dovrebbero costituire parte del tuo arsenale di SEO tecnica”, consiglia l’autore.

È possibile introdurre la libreria Web Vitals JavaScript nel flusso di lavoro e nella pipeline di test; disponibile tramite CDN, la libreria può essere inclusa nell’HTML di produzione e scritta per trasmettere i dati dei campi raccolti in modo indipendente nel punto in cui desideriamo confrontarli per i report.

Lighthouse fornisce vari punti di accesso che possono essere utili nel workflow di sviluppo e include numerosi test aggiuntivi che possono aiutare a garantire la conformità ai moderni standard Web, e può aiutarci a eseguire il debug di situazioni in cui stiamo riscontrando e risolvendo problemi con i Web Vitals.

Il confronto tra risultati di laboratorio e i dati sul campo

I browser moderni, a cominciare da Chrome, misurano come gli utenti sperimentano effettivamente il nostro sito Web in natura tramite un’API JavaScript incorporato. Possiamo accedervi con qualsiasi JavaScript o scegliere una delle librerie di Google modificate in base alle nostre esigenze. Google raccoglie e, come detto, mostra i dati sul campo dagli utenti di Chrome per il suo rapporto CrUX e, a volte, utilizza le stesse API del browser.

Esistono diversi modi per accedere o visualizzare i dati CrUX: possiamo utilizzare connettori dall’output di BigQuery ad altri servizi Google per la generazione di dashboard, come il connettore predefinito per DataStudio. È più facile accedere ai dati sul campo quando il sito rientra in CrUX, dopo aver verificato la proprietà nella Google Search Console, perché la dashboard visualizza i dati dei campi con un’interfaccia che consente di eseguire il drill down con i clic anziché scrivere query SQL. In alternativa, possiamo semplicemente utilizzare il tool PSI, che fornisce dati che risalgono a un massimo di 28 giorni.

Troubleshooting dei report Web Vitals

A causa della natura dinamica di alcuni dei timing e del modo in cui vengono raccolti, dobbiamo sempre verificare i dati di laboratorio correlando i dati di campo in modo da poter eseguire il debug delle discrepanze. Ad esempio, i caricamenti di pagina successivi possono variare i valori dei risultati quando si utilizza l’estensione Web Vitals, e ciò può accadere per un paio di ragioni, ci spiega Johnson.

Il nostro browser è in grado di assemblare le risorse più velocemente sui refresh grazie all’utilizzo della propria riserva di cache; inoltre, l’estensione può accumulare valori interattivi durante la navigazione della pagina in un modo utile per approssimare i dati sul campo real world, anziché calcolare un punteggio aggiungendo i tempi di task di script thread-blocking.

Per risultati locali più accurati utilizzando l’estensione Web Vitals e Chrome Dev Tools bisogna ricordare di svuotare i dati della cache o bypassarli con shift-refresh quando ci muoviamo velocemente con il browser web nel workflow. Un altro suggerimento è caricare “about: blank” prima di iniziare una sessione di registrazione delle prestazioni in Dev Tools per un nuovo inizio del report.

A livello ideale, i punteggi di laboratorio e di campo non differiscono troppo senza una buona ragione. Ogni volta che si apportano modifiche significative, i risultati del laboratorio saranno in anticipo rispetto ai dati sul campo. Ciò significa che se visualizziamo test falliti sul campo e abbiamo superato i punteggi di laboratorio, dobbiamo pazientare che i dati sul campo vengano rilevati o inviare i dati sul campo ad Analytics in modo indipendente per verificarli.

Come gestire l’analisi delle tre metriche

Si potrebbe immaginare che il punteggio dei dati sul campo più difficile da emulare localmente sia CLS, ma secondo Johnson non è necessariamente vero: possiamo infatti impostare un’opzione per applicare una sovrapposizione di Web Vitals utilizzando l’estensione di Chrome in cui, quando interagisci con la pagina, guardare le modifiche dei punteggi mentre navighiamo.

Questa tecnica funziona anche per FID: il punteggio per questa metrica inizia vuoto; con la prima interazione sulla pagina (clic, scorrimento o input da tastiera), i tempi delle attività di blocco dei thread vengono aggiunti a quel momento, che diventa il punteggio.

Infine, le informazioni estremamente dettagliate in Chrome Dev Tools ci consentono di risolvere i problemi di CLS in modo particolareggiato con registrazione e riproduzione delle prestazioni. Dobbiamo cercare la sezione ” Experience ” che riproduce gli shift CLS nella registrazione, e c’è anche un’impostazione per evidenziare gli spostamenti sul display usando un flash blu che avvolge gli elementi mentre si spostano e si aggiungono al punteggio.

Quali tool usare per misurare i Core Web Vitals

In chiusura, l’esperto SEO elenca i tool utili per misurare le metriche Core Web Vitals, offrendo anche dettagli sul loro funzionamento.

  • PageSpeed ​​Insights. È il primo strumento da utilizzare per misurare i valori Web Vitals. Nel rapporto possiamo ottenere sia i dati di laboratorio sia i dati di campo (se disponibili), ma anche molte altre metriche in gran parte correlate al miglioramento delle pagine con errori, in particolare i risultati che influenzano la velocità di una pagina e il download delle sue risorse.
  • Estensione Web Vitals per Chrome. Utilizzando l’estensione di Chrome è possibile accedere a Web Vitals direttamente al caricamento della pagina e, come detto, interagire con la pagina per fare troubleshooting di eventuali problemi con First Input Delay e/o Content Layout Shift. È anche disponibile da pagina a pagina durante la navigazione di siti Web.
  • WebPageTest. Questo strumento di test indipendente permette configurare l’approccio con una varietà di condizioni; costruito dagli ingegneri di Google che fanno parte del team di Chromium, le informazioni sono autorevoli e rendono disponibili le API RESTful.
  • Google Search Console. Dopo aver verificato la proprietà del sito web, possiamo approfondire le aree problematiche con pagine che stanno fallendo sul campo – supponendo la partecipazione al CrUX. È possibile eseguire il drill down per individuare gruppi di pagine con problemi simili, e alla fine questo tool si collega a PageSpeed ​​Insights.
  • API JavaScript Web Vitals. Permette di usare JavaScript per accedere alle metriche direttamente dal browser e trasmetterle a un repository di nostra scelta. In alternativa, possiamo inserire il test nel processo di sviluppo e assicurarci che le modifiche apportate non influiscano negativamente sui punteggi dopo fatto push alla produzione.
  • Chrome Dev Tools. Chrome stesso fornisce il set definitivo di strumenti per scoprire o rintracciare i problemi utilizzando le informazioni altamente dettagliate disponibili nei rapporti e nelle registrazioni del caricamento della pagina nella scheda Performance. La vasta gamma di strumenti, gli switch e le opzioni infinite sono ideali per un lavoro di ottimizzazione più impegnativo.

La misurazione dei Web Vitals secondo Google

Sul tema è intervenuto anche Martin Splitt, Developer Advocate di Google, che dal suo profilo ufficiale su Twitter ha dedicato una decina di cinguettii (raccolti su seroundtable) per rispondere ad alcune richieste e dubbi sottoposti da vari utenti, in particolare sul metodo di analisi di Google per misurare i Web Vitals.

Nello specifico, Splitt spiega che Googlebot, così come Lighthouse o lo stesso PageSpeed Insights, misura lab data, ovvero dati prestazionali ipotetici di un ambiente praticamente ideale. Quindi non sono dati rappresentativi di ciò che vedono i veri utenti del sito e delle pagine. Ma nel report Web Vitals della Google Search Console è possibile vedere metriche limitate (perché non tutti gli URL potrebbero avere sufficienti) ma rUM, ovvero basate sul campo, sul monitoraggio di utenti reali.

La Page Experience non userà lab data

Ciò significa anche che eventuali bassi punteggi in questo strumento significa che le persone vere incontrano difficoltà con le pagine del sito e potrebbero avere scarsa UX, un elemento su cui intervenire. In conclusione, il Googler ci informa di una notizia importante: la valutazione della Page Experience non si servirà di lab data per misurare i Core Web Vitals (o almeno non è in programma per ora, dice).