Misurare i Core Web Vitals

I Core Web Vitals sono stati recentemente introdotti da Google per tentare di andare oltre il concetto di tempo necessario per caricare una pagina web. I Core Web Vitals sono sostanzialmente dei parametri che servono per definire la qualità di un qualsiasi documento pubblicato su internet.

Tutti i principali strumenti di Google per gli sviluppatori supportano la misurazione dei Core Web Vitals e aiutano a diagnosticare e risolvere più facilmente i problemi relativi all’esperienza utente.

Vediamo i principali nel dettaglio: Lighthouse, PageSpeed ​​Insights, Chrome DevTools e Search Console.

Lighthouse

Lighthouse è uno strumento di controllo automatizzato del sito Web che aiuta gli sviluppatori a diagnosticare problemi e identificare opportunità per migliorare l’esperienza utente dei propri siti. Misura diverse dimensioni della qualità dell’esperienza utente in un ambiente di laboratorio, comprese le prestazioni e l’accessibilità. L’ultima versione di Lighthouse (6.0 , rilasciata a metà maggio 2020) include audit aggiuntivi, nuove metriche e un punteggio delle prestazioni di nuova composizione.

Lighthouse 6.0 introduce tre nuove metriche nel rapporto. Due di queste nuove metriche, Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS), sono implementazioni di laboratorio di Core Web Vitals e forniscono importanti informazioni diagnostiche per ottimizzare l’esperienza dell’utente. Data la loro importanza per la valutazione dell’esperienza dell’utente, le nuove metriche non vengono solo misurate e incluse nel report, ma vengono anche prese in considerazione nel calcolo del punteggio delle prestazioni.

La terza nuova metrica inclusa in Lighthouse, Total Blocking Time (TBT), si correla bene con la metrica del campo First Input Delay (FID), un’altra metrica Core Web Vitals. Seguendo i consigli forniti nel rapporto Lighthouse e ottimizzando rispetto ai tuoi punteggi, sarai in grado di fornire la migliore esperienza possibile ai tuoi utenti.

Tutti i prodotti supportati da Lighthouse vengono aggiornati per riflettere l’ultima versione, incluso Lighthouse CI che consente di misurare facilmente i tuoi Core Web Vitals sulle richieste pull prima che vengano uniti e distribuiti.

Per saperne di più su Google Lighthouse: https://developers.google.com/web/tools/lighthouse

PageSpeed ​​Insights

PageSpeed ​​Insights (PSI) fornisce rapporti sulle prestazioni di laboratorio e sul campo di una pagina su dispositivi mobili e desktop. Lo strumento fornisce una panoramica di come gli utenti del mondo reale sperimentano la pagina (basato su Chrome UX Report) e una serie di consigli attuabili su come un proprietario di un sito può migliorare l’esperienza della pagina (forniti da Lighthouse).

Anche PageSpeed ​​Insights e l’API PageSpeed ​​Insights sono stati aggiornati per utilizzare Lighthouse 6.0 e ora supportano la misurazione dei Core Web Vitals sia nelle sezioni di laboratorio che sul campo del rapporto. I Core Web Vitals sono indicati con un’icona a forma nastro blu, come mostrato di seguito.

Mentre Search Console offre ai proprietari di siti un’ottima panoramica dei gruppi di pagine che richiedono attenzione, PSI aiuta a identificare le opportunità per pagina per migliorare l’esperienza della pagina. In PSI, puoi vedere chiaramente se la tua pagina soddisfa o meno le soglie per una buona esperienza in tutti i Core Web Vitals nella parte superiore del rapporto, indicato da supera la valutazione Core Web Vitals o non supera la valutazione Core Web Vitals .

Per saperne di più su Google PageSpeed Insight: https://developers.google.com/speed/pagespeed/insights/

CrUX

Chrome UX Report (CrUX) è un set di dati pubblico di dati sull’esperienza utente reale su milioni di siti web. Misura le versioni sul campo di tutti i Core Web Vital. A differenza dei dati di laboratorio, i dati CrUX provengono da utenti attivi sul campo. Utilizzando questi dati, gli sviluppatori sono in grado di comprendere la distribuzione delle esperienze utente del mondo reale sui propri siti Web o anche su quelli dei concorrenti. Anche se non hai RUM sul tuo sito, CrUX può fornire un modo rapido e semplice per valutare i Core Web Vitals. Il set di dati CrUX su BigQuery include dati granulari sulle prestazioni per tutti i Core Web Vital ed è disponibile in snapshot mensili a livello di origine.

L’unico modo per sapere veramente come si comporta il sito per gli utenti che lo usano è misurare effettivamente le sue prestazioni sul campo nel momento stesso in cui quegli utenti lo stanno caricando e interagiscono con esso. Questo tipo di misurazione è comunemente indicata come monitoraggio dell’utente reale (RUM). Anche se non ci sono RUM sul sito, CrUX può comunque fornire un modo rapido e semplice per valutare i Core Web Vitals.

Presentazione dell’API CrUX

API CrUX  è un modo rapido e gratuito per integrare facilmente i flussi di lavoro di sviluppo con la misurazione della qualità a livello di origine e URL per le seguenti metriche di campo:

• Largest Contentful Paint
• Cumulative Layout Shift
• First Input Delay
• First Contentful Paint

Gli sviluppatori possono richiedere un’origine o un URL e segmentare i risultati in base a fattori di forma diversi. L’API si aggiorna quotidianamente e riepiloga i dati dei 28 giorni precedenti (a differenza del set di dati BigQuery, che viene aggregato mensilmente).

Di seguito è riportata una demo che utilizza l’API CrUX per visualizzare le metriche Core Web Vitals con distribuzioni buone, da migliorare e scarse:

Nelle versioni future, Google ha in programma di espandere l’API per consentire l’accesso a ulteriori dimensioni e metriche del set di dati CrUX.

Per saperne di più su Google Chrome User Experience Report: https://developers.google.com/web/tools/chrome-user-experience-report/

Pannello Prestazioni di Chrome DevTools

Il pannello Prestazioni di Chrome DevTools ha una nuova sezione Esperienza che può aiutare a rilevare cambiamenti di layout imprevisti. Questo è utile per trovare e risolvere problemi di instabilità visiva sulla pagina web che contribuiscono a generale un Cumulative Layout Shift.

Seleziona un cambio di layout per visualizzarne i dettagli nella scheda Riepilogo . Per visualizzare dove si è verificato lo spostamento stesso, passa il mouse sui campi Spostato da (Moved from) e Spostato a (Moved to).

Debug della “interaction readiness” con il “Total Blocking Time” nel footer

La metrica Total Blocking Time (TBT) può essere misurata con strumenti di laboratorio ed è un eccellente proxy per il First Input Delay. TBT misura la quantità di tempo totale tra la First Contentful Paint (FCP) e il Time to Interactive (TTI) in cui il thread principale è stato bloccato per un tempo sufficientemente lungo da impedire la reattività dell’input. Le ottimizzazioni delle prestazioni che migliorano il TBT in laboratorio dovrebbero migliorare il FID sul campo.

TBT viene ora mostrato nel footer del pannello Prestazioni di Chrome DevTools quando si misurano le prestazioni della pagina:

1. Premi “Control+Shift+J” (o “Command+Option+J” su Mac) per aprire DevTools.
2. Fare clic sulla scheda Prestazioni .
3. Fare clic su Registra .
4. Ricarica manualmente la pagina.
5. Attendi il caricamento della pagina e poi interrompi la registrazione.

Per ulteriori informazioni, vedere Novità di DevTools (Chrome 84) .

Google Search Console

Il nuovo report Core Web Vitals in Search Console aiuta a identificare i gruppi di pagine del sito che richiedono attenzione, in base ai dati reali (campo) di CrUX. Le prestazioni dell’URL sono raggruppate per stato, tipo di metrica e gruppo di URL (gruppi di pagine Web simili).

Il report si basa sulle tre metriche Core Web Vitals: LCP, FID e CLS. Se un URL non ha una quantità minima di dati dei rapporti per queste metriche, viene omesso dal rapporto. Suggeriamo di provare il nuovo rapporto per ottenere una visione più completa delle prestazioni per ciascuna pagina origine.

Una volta identificato un tipo di pagina che presenta problemi relativi a Core Web Vitals, si può utilizzare PageSpeed ​​Insights per ottenere suggerimenti di ottimizzazione specifici per le pagine analizzate.

Per maggiori dettagli e ulteriori tool consultare la fonte di queste informazioni: https://web.dev/vitals/

Buona ottimizzazione!