La raccolta di dati relativi a Web Vitals del tuo sito è il primo passo per migliorarli. Un'analisi completa raccoglierà i dati sulle prestazioni sia da ambienti reali che da ambienti di laboratorio. La misurazione di Web Vitals richiede modifiche minime al codice e può essere eseguita utilizzando strumenti gratuiti.
Misurare i Web Vitals utilizzando i dati RUM
I dati del monitoraggio dei dati utente reali (RUM), noti anche come dati dei campi, rilevano le prestazioni sperimentate dagli utenti effettivi di un sito. I dati RUM vengono utilizzati da Google per determinare se un sito soddisfa le soglie consigliate di Core Web Vitals.
Per iniziare
Se non hai configurato un RUM, i seguenti strumenti ti forniranno rapidamente dati sul rendimento reale del tuo sito. Questi strumenti si basano tutti sullo stesso set di dati sottostante (il Report sull'esperienza utente di Chrome), ma hanno casi d'uso leggermente diversi:
- Strumenti per sviluppatori di Chrome si integra con il set di dati CrUX nella visualizzazione delle metriche in tempo reale del riquadro Prestazioni. Confrontando la tua esperienza locale con le esperienze degli utenti reali nella stessa pagina, puoi prendere una decisione più informata su dove concentrare le attività di debug. Se stai cercando una singola azione da intraprendere per iniziare a misurare e migliorare i Web Vitals del tuo sito, ti consigliamo di utilizzare il riquadro Rendimento di Chrome DevTools.
- PageSpeed Insights (PSI) genera report sul rendimento aggregato a livello di pagina e di origine negli ultimi 28 giorni. Inoltre, fornisce suggerimenti su come migliorare il rendimento. PSI è disponibile sul web e come API.
- Search Console registra i dati sul rendimento per pagina. Questo lo rende adatto per identificare pagine specifiche da migliorare. A differenza di PageSpeed Insights, i report di Search Console includono dati sul rendimento storico. Search Console può essere utilizzato solo con i siti di tua proprietà per i quali hai verificato la proprietà.
- La dashboard CrUX è una dashboard predefinita che mostra i dati di CrUX per un'origine scelta da te. Si basa su Data Studio e la procedura di configurazione richiede circa un minuto. Rispetto a PageSpeed Insights e Search Console, i report della dashboard di CrUX includono più dimensioni, ad esempio i dati possono essere suddivisi in base al dispositivo e al tipo di connessione.
Vale la pena notare che, sebbene gli strumenti elencati in precedenza siano adatti per "iniziare" a misurare i Segnali web, possono essere utili anche in altri contesti. In particolare, sia CrUX che PSI sono disponibili come API e possono essere utilizzati per creare dashboard e altri report.
Raccogliere i dati RUM
Sebbene gli strumenti basati su CrUX siano un buon punto di partenza per esaminare il rendimento di Web Vitals, ti consigliamo vivamente di integrarli con il tuo RUM. I dati RUM raccolti autonomamente possono fornire un feedback più dettagliato e immediato sul rendimento del tuo sito. In questo modo è più semplice identificare i problemi e testare le possibili soluzioni.
Puoi raccogliere i tuoi dati RUM utilizzando un fornitore RUM dedicato o configurando i tuoi strumenti.
I fornitori di RUM dedicati sono specializzati nella raccolta e nella generazione di report sui dati RUM. Per utilizzare Core Web Vitals con questi servizi, chiedi al tuo fornitore di RUM di attivare il monitoraggio di Core Web Vitals per il tuo sito.
Se non hai un fornitore RUM, potresti essere in grado di migliorare la configurazione di analisi esistente per raccogliere e generare report su queste metriche utilizzando la web-vitalslibreria JavaScript. Questo metodo è descritto più dettagliatamente di seguito.
La libreria JavaScript web-vitals
Se stai implementando la tua configurazione RUM per Web Vitals, il modo più semplice per raccogliere le misurazioni di Web Vitals è utilizzare la libreria JavaScript web-vitals. web-vitals è una piccola libreria modulare (~2 KB) che fornisce un'API pratica per raccogliere e generare report su ciascuna delle metriche di Web Vitals misurabili sul campo.
Le metriche che compongono Web Vitals non sono tutte esposte direttamente dalle API di rendimento integrate del browser, ma sono basate su queste. Ad esempio, la metrica Cumulative Layout Shift (CLS) viene implementata utilizzando l'API Layout Instability. Se utilizzi web-vitals, non devi preoccuparti di implementare personalmente queste metriche; inoltre, ti assicuri che i dati raccolti corrispondano alla metodologia e alle best practice per ogni metrica.
Per saperne di più sull'implementazione di web-vitals, consulta la documentazione e la guida Best practice per la misurazione di Core Web Vitals sul campo.
Aggregazione dei dati
È fondamentale segnalare le misurazioni raccolte da web-vitals. Se questi dati vengono misurati, ma non registrati, non li vedrai mai. La documentazione di web-vitals include esempi che mostrano come inviare i dati a un endpoint API generico, a Google Analytics o a Google Tag Manager.
Se hai già uno strumento di generazione di report preferito, ti consigliamo di utilizzarlo. In caso contrario, Google Analytics è senza costi e può essere utilizzato a questo scopo.
Quando decidi quale strumento utilizzare, è utile pensare a chi dovrà avere accesso ai dati. In genere, le aziende ottengono i risultati migliori quando l'intera azienda, anziché un singolo reparto, è interessata a migliorare il rendimento. Consulta la sezione Correggere la velocità del sito web in modo interfunzionale per scoprire come ottenere il consenso di diversi reparti.
Interpretazione dei dati
Quando analizzi i dati sul rendimento, è importante fare attenzione alle code della distribuzione. I dati RUM spesso rivelano che le prestazioni variano notevolmente: alcuni utenti hanno esperienze rapide, altri esperienze lente. Tuttavia, l'utilizzo della mediana per riassumere i dati può mascherare questo comportamento.
Per quanto riguarda i Web Vitals, Google utilizza la percentuale di esperienze "buone" al posto di statistiche come mediane o medie per determinare se un sito o una pagina soddisfano le soglie consigliate. Nello specifico, affinché un sito o una pagina siano considerati conformi alle soglie di Core Web Vitals, il 75% delle visite alla pagina deve soddisfare la soglia "buona" per ogni metrica.
Misurare Web Vitals utilizzando i dati di laboratorio
I dati di laboratorio, noti anche come dati sintetici, vengono raccolti da un ambiente controllato e non da utenti effettivi. A differenza dei dati RUM, i dati di laboratorio possono essere raccolti dagli ambienti di pre-produzione e quindi incorporati nei flussi di lavoro degli sviluppatori e nelle procedure di integrazione continua. Alcuni esempi di strumenti che raccolgono dati sintetici sono Lighthouse e WebPageTest.
Considerazioni
Esistono sempre discrepanze tra i dati RUM e i dati di laboratorio, in particolare se le condizioni di rete, il tipo di dispositivo o la posizione dell'ambiente di laboratorio sono molto diversi da quelli degli utenti. Tuttavia, quando si tratta di raccogliere dati di laboratorio sulle metriche Web Vitals, ci sono un paio di considerazioni specifiche che è importante notare:
- I valori di visualizzazione elemento più grande (LCP) misurati in ambienti di laboratorio possono essere diversi da quelli misurati sul campo con i dati RUM a causa di ritardi nel caricamento della pagina (tramite reindirizzamenti, latenza di connessione al server o dati non memorizzati nella cache), contenuti diversi mostrati a utenti diversi a seconda dello schermo o per altri motivi (inclusi banner dei cookie, personalizzazione).
- Il Cumulative Layout Shift (CLS) misurato in ambienti di laboratorio può essere artificialmente inferiore al CLS osservato nei dati RUM. Molti strumenti di laboratorio caricano solo la pagina, senza interagire con essa. Di conseguenza, acquisiscono solo le variazioni del layout che si verificano durante il caricamento iniziale della pagina. Al contrario, il CLS misurato dagli strumenti RUM acquisisce le variazioni di layout impreviste che si verificano durante l'intera durata della pagina.
- Non è possibile misurare l'interazione con Next Paint (INP) in ambienti di lab perché richiede interazioni degli utenti con la pagina. Di conseguenza, il tempo di blocco totale (TBT) è il proxy di laboratorio consigliato per l'INP. TBT misura "il tempo totale tra First Contentful Paint e Tempo all'interattività durante il quale la pagina non può rispondere all'input dell'utente". Sebbene INP e TBT vengano calcolati in modo diverso, entrambi riflettono un thread principale bloccato durante il processo di bootstrap. Quando il thread principale viene bloccato, il browser subisce un ritardo nel rispondere alle interazioni degli utenti.
Utensili
Questi strumenti possono essere utilizzati per raccogliere misurazioni di laboratorio dei Core Web Vitals:
- Chrome DevTools misura e genera report sui Core Web Vitals per una determinata pagina nella visualizzazione delle metriche in tempo reale del riquadro Rendimento. Questa visualizzazione fornisce agli sviluppatori un feedback sul rendimento in tempo reale man mano che apportano modifiche al codice.
- Lighthouse genera report su LCP, CLS e TBT e mette in evidenza possibili miglioramenti del rendimento. Lighthouse è disponibile in Strumenti per sviluppatori di Chrome, come pacchetto npm, e può essere incorporato anche nei flussi di lavoro di integrazione continua utilizzando Lighthouse CI.
- WebPageTest include Web Vitals nei suoi report standard. WebPageTest è utile per raccogliere informazioni su Web Vitals in condizioni specifiche del dispositivo e della rete.