Core Web Vitals: 7 strumenti e tecniche per identificare i colli di bottiglia delle prestazioni

I Core Web Vitals (CWV) sono un argomento caldo al momento. Qui esamineremo alcuni degli strumenti che possiamo utilizzare per identificare i problemi di prestazioni del sito Web, in preparazione dell'imminente aggiornamento della classifica di Google nel maggio 2021.

Hai bisogno di un aggiornamento su Core Web Vitals? Scopri cosa sono e come ottimizzarli nel mio articolo Core Web Vitals Explained.

Monitoraggio automatizzato delle metriche CWV

Se hai diversi siti Web o pagine chiave che desideri monitorare nel tempo, senza dover eseguire manualmente un test dopo l'altro, questo foglio di calcolo di Digital Inspiration potrebbe fare al caso tuo. Basta prendere una chiave API Lighthouse PageSpeed, collegare alcuni URL e il gioco è fatto!

Il foglio di calcolo aiuta a identificare potenziali problemi di prestazioni intorno agli indicatori CWV chiave e quando potrebbero essersi verificati, il che può a sua volta darci indizi su quale potrebbe essere la causa. Può anche essere utilizzato per dimostrare come i punteggi di velocità possono cambiare naturalmente nel tempo man mano che un sito Web cresce o quando vengono apportate modifiche agli algoritmi di velocità della pagina sottostanti.

Abbiamo utilizzato una versione modificata di questo foglio di calcolo per alcuni mesi e ci ha aiutato a identificare opportunità per migliorare le prestazioni di numerosi siti web.

PageSpeed ​​Insights

PageSpeed ​​Insights di Google è il mio strumento di riferimento per le indagini iniziali e di primo piano sulle prestazioni e sui problemi relativi a CWV, sia per dispositivi mobili che desktop. I rapporti contengono "Dati sul campo"; come gli utenti del mondo reale sperimentano il sito Web insieme ai dati di Lighthouse "Lab" che simulano il caricamento di una pagina, utile per test ripetibili e coerenti.

Le metriche di Core Web Vital sono chiaramente evidenziate con semplici indicatori codificati a colori. Le metriche scadenti sono evidenziate in rosso, buone in verde. Queste metriche vengono combinate per fornire un punteggio di velocità complessivo e hai bisogno del 90% o più per un "pass" verde.

In questi report vengono fornite anche una serie di raccomandazioni e diagnostiche, ordinate per elementi di maggior impatto in termini di secondi totali che possono essere salvati.

Monitoraggio delle prestazioni di Chrome DevTools

Per un'analisi più dettagliata delle prestazioni e dei problemi relativi a CWV, mi rivolgo spesso a Performance Monitor di Chrome all'interno di DevTools e alcuni degli indicatori CWV chiave che utilizzo sono numerati nello screenshot qui sotto.

1. Innanzitutto, assicurati di eseguire il monitor delle prestazioni alla risoluzione corretta, poiché gli elementi LCP e CLS cambiano spesso a risoluzioni diverse. Ho impostato il mio su 350 x 636 pixel per replicare la visualizzazione mobile di PageSpeed ​​Insights.
2. Prima di eseguire il report, potresti anche voler simulare la connettività e la potenza di un dispositivo mobile. Seleziono spesso il rallentamento della CPU veloce 3g e 4x.
3. La selezione della metrica LCP una volta generato il report identifica qual è l'elemento più grande. Questo dovrebbe essere il più vicino possibile al FCP (First Contentful Paint). Se c'è una lacuna, ti consigliamo di identificare e ottimizzare la consegna dell'elemento più grande.
4. Le lunghe attività della CPU sono evidenziate dalle diagonali rosse sulle barre grigie. Questo è spesso causato da JavaScript più pesante, rappresentato dalle barre gialle e influenzerà le tue metriche di interattività (FID, TBT e TTI). Il drill-down delle barre sottostanti in genere punta ai file e alle funzioni JavaScript offensivi.
5. I turni di layout sono evidenziati da queste barre rosse e la loro selezione di solito evidenzierà quale elemento è stato spostato. Una grande quantità di questi creerà valori CLS più alti.
6. La vista frame può essere un ottimo modo per evidenziare visivamente come appare il contenuto e il layout viene spostato mentre viene caricato. Per valori CLS elevati, è spesso ovvio dai frame quale sia la causa. In questo esempio, un banner cookie di grandi dimensioni fa sì che il layout si sposti come contenuto come spinto in basso.

Estensioni di Chrome Web Vitals

Elementi fondamentali della SERP Core

L'estensione SERP Vitals mostra un pratico indicatore per le metriche LCP, FID e CLS direttamente nei risultati di ricerca. È ottimo per l'analisi della concorrenza e può fornire una rapida indicazione della velocità di una pagina Web prima di visitarla.

I dati vengono compilati in modo anonimo da utenti reali dal Chrome User Experience Report (CrUX). Tuttavia, non è disponibile per tutti i siti, poiché i nuovi siti oi siti con poco traffico non avranno raccolto abbastanza punti dati.

Vitali Web

La pratica estensione Web Vitals misura le 3 metriche CWV chiave per gli utenti desktop in Chrome in tempo reale e la sua colorazione a semaforo fornisce un indicatore rapido mentre navighi in un sito web. Poiché non si basa su dati utente raccolti esternamente, può essere utile per gli sviluppatori che lavorano in un ambiente locale rilevare eventuali problemi in anticipo.

Faro

Le estensioni Lighthouse forniscono un percorso rapido alla stessa funzione di reporting disponibile in Chrome DevTools e inseriscono Lab Data utilizzando l'API Lighthouse anziché Field Data da utenti reali tramite CrUX.

Il rapporto sul rendimento è molto simile all'analisi per dispositivi mobili di PageSpeed ​​Insights e fornisce diagnosi e consigli simili. Vengono inoltre generati report aggiuntivi per SEO, Accessibilità e Best Practice.

Visualizzatore velocità sito Treo

Il visualizzatore su https://treo.sh/sitespeed mostra le metriche CWV nel tempo, filtrabili per dispositivo, connettività e area geografica. Viene aggiornato settimanalmente e utilizza i dati del rapporto CrUX.

Nell'esempio seguente per bbc.co.uk, possiamo vedere come la metrica CLS è scesa in modo significativo negli ultimi 3 mesi, dando risultati di "pass" verdi per tutte le metriche principali. Questo è un ottimo modo per analizzare le prestazioni delle metriche CWV nel tempo o per condurre un'analisi della concorrenza.

Visualizzazione delle richieste di terze parti

Le metriche di interattività per FID, TTI e TBT possono spesso essere difficili da risolvere. PageSpeed ​​Insights può essere utile in termini di identificazione di alcuni degli script di terze parti più pesanti, ma a volte una visualizzazione decente può comunicare molto più facilmente l'impatto di questi script.

Lo strumento di mappatura delle richieste https://requestmap.herokuapp.com/ è ottimo per questo. Le mappe generate contengono nodi per ogni richiesta di terze parti, con nodi più grandi che rappresentano script di maggiore impatto. Se le tue metriche di interattività sono scarse, è probabile che vedrai molti nodi su questa mappa.

Ecco un esempio da un sito che ha ben 26 secondi per la metrica Time to Interactive TTI. Una rapida occhiata alla mappa mostra un widget di live chat, rappresentato dai numerosi nodi blu scuro in alto, che rappresentano oltre la metà delle richieste totali.

Lo strumento mappa di richiesta è anche un ottimo modo per determinare da dove vengono caricati gli script o altre risorse. Di seguito possiamo vedere diversi nodi provenienti direttamente dal nodo giallo di Google Tag Manager in questo esempio.

Cascate in WebPageTest

I rapporti WebPageTest forniscono molti più dettagli rispetto a PageSpeed ​​Insights e possono essere generati da vari dispositivi e posizioni.

Uso spesso questo strumento per l'analisi a cascata, che visualizza la sequenza di caricamento di tutte le risorse su una pagina. Ciò può essere particolarmente utile quando si cerca di ottimizzare i contenuti critici "above the fold". Ad esempio, se stai ottimizzando per LCP e l'elemento above the fold più grande è un'immagine o una tipografia, potresti voler implementare il precaricamento sui file di immagine e font più grandi e verificare che queste risorse precaricate vengano visualizzate nella parte superiore della cascata .

Non sei sicuro dell'impatto di CWV sul tuo sito, scrivici oggi.