La raccolta dei dati sui Segnali web essenziali del tuo sito è il primo passo per migliorarli. Un'analisi completa raccoglierà dati sulle prestazioni sia da ambienti reali che di laboratorio. La misurazione dei Core Web Vitals richiede modifiche minime al codice e può essere eseguita utilizzando strumenti senza costi.
Misurare le metriche Web Vitals utilizzando i dati RUM
I dati del monitoraggio utenti reali (RUM), noti anche come dati sul campo, acquisiscono le prestazioni sperimentate dagli utenti effettivi di un sito. Google utilizza i dati RUM per determinare se un sito soddisfa le soglie consigliate per i Segnali web essenziali.
Per iniziare
Se non hai configurato il monitoraggio degli utenti reali, i seguenti strumenti ti forniranno rapidamente dati sulle prestazioni reali 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:
- Chrome DevTools 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 i tuoi sforzi di debug. Se stai cercando una singola azione da intraprendere per iniziare a misurare e migliorare le metriche web del tuo sito, ti consigliamo di utilizzare il pannello Prestazioni 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.
- I report di Search Console forniscono dati sul rendimento per pagina. Ciò lo rende ideale per identificare pagine specifiche che necessitano di miglioramenti. A differenza di PageSpeed Insights, i report di Search Console includono dati storici sul rendimento. Search Console può essere utilizzato solo con i siti di cui hai la proprietà e che hai verificato.
- CrUX Vis è una dashboard predefinita che mostra i dati storici di CrUX per un URL o un'origine a tua scelta (se disponibili nel set di dati CrUX). Si basa sull'API CrUX History e la procedura di configurazione richiede circa un minuto. Rispetto a PageSpeed Insights e Search Console, CrUX Vis include più esempi di dati, sottocomponenti LCP, tipi di navigazione e così via.
- CrUX Vis è una dashboard storica che mostra i dati CrUX per un'origine o un URL a tua scelta. Si basa sull'API CrUX History. Rispetto a PageSpeed Insights e Search Console, i report di CrUX Vis includono più dettagli, ad esempio i tipi di navigazione e i dati LCP e RTT sono disponibili in CrUX Vis.
È importante notare che, sebbene gli strumenti elencati in precedenza siano adatti per "iniziare" a misurare i Segnali web essenziali, 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 dati RUM
Sebbene gli strumenti basati su CrUX siano un buon punto di partenza per analizzare le prestazioni di Web Vitals, ti consigliamo vivamente di integrarli con il tuo RUM. I dati RUM che raccogli personalmente possono fornire un feedback più dettagliato e immediato sul rendimento del tuo sito. In questo modo è più facile 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 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 ampliare la configurazione di analisi esistente per raccogliere e generare report su queste metriche utilizzando la libreria JavaScript web-vitals. Questo metodo è spiegato in modo più dettagliato di seguito.
Libreria JavaScript web-vitals
Se stai implementando la tua configurazione RUM per i segnali web essenziali, il modo più semplice per raccogliere le misurazioni dei segnali web essenziali è 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 Web Vitals misurabili sul campo.
Le metriche che compongono i Segnali web non sono tutte esposte direttamente dalle API per il rendimento integrate nel browser, ma sono basate su queste. Ad esempio, la metrica Cumulative Layout Shift (CLS) viene implementata utilizzando l'API Layout Instability. Utilizzando web-vitals, non devi preoccuparti di implementare queste metriche autonomamente. Inoltre, garantisce che i dati raccolti corrispondano alla metodologia e alle best practice per ciascuna metrica.
Per saperne di più sull'implementazione di web-vitals, consulta la documentazione e la guida Best practice per la misurazione di Web Vitals sul campo.
Aggregazione dei dati
È fondamentale segnalare le misurazioni raccolte da web-vitals. Se questi dati vengono misurati ma non segnalati, non li vedrai mai. La documentazione web-vitals include esempi che mostrano come inviare i dati a un endpoint API generico, Google Analytics o Google Tag Manager.
Se hai già uno strumento di generazione dei report preferito, ti consigliamo di utilizzarlo. In caso contrario, Google Analytics è senza costi e può essere utilizzato a questo scopo.
Quando scegli lo strumento da utilizzare, è utile pensare a chi dovrà avere accesso ai dati. In genere, le aziende ottengono i risultati migliori in termini di rendimento quando l'intera azienda, anziché un singolo reparto, è interessata a migliorare il rendimento. Consulta Risolvere il problema della velocità del sito web in modo interfunzionale per scoprire come ottenere l'approvazione da parte di diversi reparti.
Interpretazione dei dati
Quando analizzi i dati sul rendimento, è importante prestare attenzione alle code della distribuzione. I dati RUM spesso rivelano che le prestazioni variano notevolmente: alcuni utenti hanno esperienze veloci, altri lente. Tuttavia, l'utilizzo della mediana per riassumere i dati può mascherare questo comportamento.
Per quanto riguarda i Core Web Vitals, Google utilizza la percentuale di esperienze "buone", anziché statistiche come mediane o medie, per determinare se un sito o una pagina soddisfa le soglie consigliate. Nello specifico, affinché un sito o una pagina vengano considerati conformi alle soglie di Segnali web essenziali, il 75% delle visite di pagina deve soddisfare la soglia "buona" per ogni metrica.
Misurare Web Vitals utilizzando i dati di laboratorio
I dati di prova controllati, noti anche come dati sintetici, vengono raccolti da un ambiente controllato, anziché da utenti reali. A differenza dei dati RUM, i dati di laboratorio possono essere raccolti da ambienti di pre-produzione e quindi incorporati nei flussi di lavoro degli sviluppatori e nei processi di integrazione continua. Esempi di strumenti che raccolgono dati sintetici sono Lighthouse e WebPageTest.
Considerazioni
Esisteranno sempre discrepanze tra i dati RUM e i dati di prova controllati, in particolare se le condizioni di rete, il tipo di dispositivo o la posizione dell'ambiente di prova controllato differiscono in modo significativo da quelli degli utenti. Tuttavia, quando si tratta di raccogliere dati di laboratorio in particolare sulle metriche web essenziali, è importante tenere presente alcune considerazioni specifiche:
- La visualizzazione elemento più grande (LCP) misurata in ambienti di laboratorio può essere diversa da quella misurata 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), di 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 negli 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 di layout che si verificano durante il caricamento iniziale della pagina. Al contrario, il CLS misurato dagli strumenti RUM acquisisce le variazioni del layout impreviste che si verificano durante l'intera durata della pagina.
- L'Interaction to Next Paint (INP) non può essere misurata negli ambienti di laboratorio perché richiede le interazioni degli utenti con la pagina. Di conseguenza, il Total Blocking Time (TBT) è il proxy di laboratorio consigliato per INP. TBT misura il "tempo totale tra First Contentful Paint e Tempo all'interattività durante il quale la pagina non risponde all'input 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 è bloccato, il browser ritarda la risposta alle interazioni dell'utente.
Strumenti
Questi strumenti possono essere utilizzati per raccogliere le misurazioni di laboratorio dei Segnali web essenziali:
- Chrome DevTools misura e riporta i Segnali web essenziali per una determinata pagina nella visualizzazione delle metriche in tempo reale del riquadro Prestazioni. Questa visualizzazione fornisce agli sviluppatori feedback sulle prestazioni in tempo reale mentre apportano modifiche al codice.
- Lighthouse Lighthouse genera report su LCP, CLS e TBT ed evidenzia anche i possibili miglioramenti del rendimento. Lighthouse è disponibile in Chrome DevTools, come pacchetto npm e può essere incorporato anche nei flussi di lavoro di integrazione continua utilizzando Lighthouse CI.
- WebPageTest include i web vital come parte dei suoi report standard. WebPageTest è utile per raccogliere informazioni sui segnali web essenziali in determinate condizioni di rete e del dispositivo.