Combina gli strumenti Google per controllare, migliorare e monitorare il tuo sito web in modo efficace.
Pubblicato il 28 maggio 2020
I Segnali web essenziali sono un insieme di metriche che valutano l'esperienza utente in base a criteri quali prestazioni di caricamento, reattività all'input dell'utente e stabilità del layout.
In questa guida verrà illustrato un flusso di lavoro per migliorare Core Web Vitals per il tuo sito web, ma il punto di partenza dipende dal fatto che tu stia raccogliendo i tuoi dati sul campo. Il punto in cui termina può dipendere da quali strumenti Google trovi utili per diagnosticare e risolvere i problemi relativi all'esperienza utente.
I Core Web Vitals sono più facilmente misurabili sul campo
I Core Web Vitals sono progettati specificamente per misurare l'esperienza degli utenti sul tuo sito web: sono metriche incentrate sull'utente. Gli strumenti basati su lab come Lighthouse sono strumenti di diagnostica per evidenziare potenziali problemi di prestazioni e best practice. Gli strumenti basati su lab vengono eseguiti in determinate condizioni predefinite e potrebbero non riflettere le misurazioni reali dei Core Web Vitals che gli utenti sperimentano.
Ad esempio, Lighthouse è uno strumento basato su lab che esegue test con throttling simulato in un ambiente desktop o mobile simulato. Sebbene queste simulazioni di condizioni di rete e dispositivo più lente siano utili per diagnosticare i problemi di rendimento, rappresentano solo un singolo aspetto della grande varietà di condizioni di rete e funzionalità dei dispositivi e potrebbero non rispecchiare l'esperienza degli utenti sui tuoi siti.
Gli strumenti basati su lab come Lighthouse eseguono in genere anche un "caricamento a freddo" di una pagina web come visitatore completamente nuovo. Spesso si tratta del caricamento più lento, ma nella realtà i visitatori potrebbero avere alcuni asset memorizzati nella cache se hanno visitato il sito in precedenza o quando navigano nel sito. Anche i nuovi visitatori e gli strumenti potrebbero sperimentare il sito in modo diverso con banner dei cookie o altri contenuti.
In breve, anche se gli strumenti basati sui lab possono fornire un'indicazione dei potenziali problemi di prestazioni e aiutarti a eseguire il debug e l'iterazione, potrebbero non rappresentare il numero di visitatori che effettivamente visitano il tuo sito web. Usa i dati sul campo per misurare le prestazioni del mondo reale e strumenti basati su lab come Lighthouse per diagnosticare come migliorarlo. Consulta anche la sezione Quando utilizzare Lighthouse.
Google misura i Core Web Vitals tramite il Rapporto sull'esperienza utente di Chrome (CrUX). Si tratta di un set di dati pubblico raccolto da utenti reali di Chrome. È la spina dorsale di molti strumenti Google e di terze parti che generano report sui Core Web Vitals di un sito.
CrUX ha però dei limiti. Spesso è in grado di indicare quando c'è un problema, ma spesso non dispone di dati sufficienti per spiegarti il motivo.
Raccogliere i dati dei campi, se possibile
Il miglior set di dati per migliorare le prestazioni del sito web sul campo è quello creato da tu. Per iniziare, devi raccogliere i dati sul campo dai visitatori del tuo sito web. Il modo in cui puoi farlo dipende dalle dimensioni della tua organizzazione e se vuoi pagare per una soluzione di terze parti o crearne una tua.
Le soluzioni a pagamento misurano quasi certamente Core Web Vitals (e altre metriche sul rendimento) e in genere forniscono una serie di strumenti per analizzare i dati risultanti. Nelle grandi organizzazioni con risorse significative, questo potrebbe essere il metodo preferito.
Tuttavia, potresti non far parte di un'organizzazione di grandi dimensioni o di un'azienda con i mezzi per permettersi una soluzione di terze parti. In questi casi, la libreria web-vitals di Google ti aiuterà a raccogliere tutti i dati Web Vitals. Tuttavia, sarai responsabile della modalità di generazione di report, archiviazione e analisi di questi dati.
Se utilizzi già Google Analytics, ma non hai iniziato a raccogliere i tuoi dati sul campo, potresti avere la possibilità di utilizzare la libreria web-vitals per inviare a Google Analytics i dati Web Vitals raccolti sul campo e utilizzare le esportazioni BigQuery di GA4 per generare report sui dati.
Informazioni sugli strumenti di Google
Indipendentemente dal fatto che tu stia raccogliendo i tuoi dati sul campo, esistono diversi strumenti Google che possono essere utili per analizzare Core Web Vitals. Prima di stabilire un flusso di lavoro, una panoramica generale di ciascun strumento può aiutarti a capire quali potrebbero essere quelli più adatti alle tue esigenze.
Rapporto sull'esperienza utente di Chrome (CrUX)
Come accennato in precedenza, CrUX è un set di dati pubblico costituito da dati sul campo raccolti da un segmento di utenti reali di Google Chrome su milioni di siti web. Include le metriche di Core Web Vitals e altre metriche per i siti web con traffico sufficiente.
CrUX è disponibile come set di dati BigQuery mensile a livello di origine o come API giornaliera a livello di URL o origine, a condizione che un URL o un'origine abbia campioni sufficienti nel set di dati CrUX. I dati di BigQuery sono visualizzabili anche nella dashboard CrUX, che consente ai siti di esaminare le tendenze storiche del proprio sito.
Quando utilizzare CrUX
Anche se raccogli i tuoi dati sul campo, CrUX è comunque utile. Anche se CrUX rappresenta un sottoinsieme di utenti di Chrome, è utile confrontare i dati sul campo del tuo sito web per vedere come si allinea ai relativi dati CrUX. Ognuno presenta vantaggi e svantaggi, che possono comportare differenze. Se non raccogli nessun dato sul campo per il tuo sito web, CrUX è particolarmente utile per fornire una panoramica generale, a condizione che il tuo sito web sia rappresentato nel set di dati.
Puoi utilizzare CrUX direttamente o un altro strumento (inclusi quelli menzionati di seguito). L'utilizzo diretto del set di dati CrUX, tramite BigQuery o l'API, è utile per esporre i dati non mostrati in altri strumenti, ad esempio i dati a livello di paese spesso non sono disponibili su altri strumenti, oppure per visualizzare le metriche aggiuntive in CrUX, che spesso non vengono visualizzate in altri strumenti.
Quando non utilizzare CrUX
CrUX rappresenta solo gli utenti di Chrome e, anche in questo caso, solo un sottoinsieme di utenti di Chrome. Una soluzione RUM completa può includere più esperienze su Chrome e altri browser in cui supportano le metriche Web Vitals.
I siti web che non ricevono traffico sufficiente non sono rappresentati nel set di dati CrUX. In questo caso, dovrai raccogliere i tuoi dati sul campo per comprendere le prestazioni del tuo sito web sul campo, in quanto CrUX non sarà disponibile. In alternativa, dovrai fare affidamento sui dati del lab, ma con le limitazioni che potrebbero non essere rappresentativi come descritto in precedenza.
Poiché i dati forniti da CrUX sono una media mobile dei 28 giorni precedenti, non è uno strumento ideale durante lo sviluppo, in quanto è necessario un po' di tempo prima che i miglioramenti vengano applicati al set di dati CrUX.
Infine, in quanto set di dati pubblico, CrUX è limitato alle informazioni che può rendere disponibili e alla modalità di esecuzione di query su questi dati. La raccolta dei tuoi dati RUM ti consente di raccogliere più dettagli (ad esempio, l'elemento LCP) e di segmentare ulteriormente i dati per identificare i problemi. Gli utenti che hanno effettuato l'accesso registrano un'esperienza migliore o peggiore di Core Web Vitals rispetto agli utenti che non hanno effettuato l'accesso? Gli utenti con un LCP lento hanno un elemento LCP specifico? Quali interazioni causano valori FID e INP elevati?
PageSpeed Insights (PSI)
PSI è uno strumento che genera report sui dati sul campo di CrUX e del lab di Lighthouse per una determinata pagina. Per maggiori dettagli, consulta le singole sezioni.
Quando utilizzare PSI
PSI è ideale per valutare il rendimento di CrUX a livello di pagina o di origine, sia per gli utenti di dispositivi mobili che per quelli desktop. È una buona scelta per una panoramica iniziale dei Core Web Vitals per una pagina o un sito. Inoltre, ti consente di visualizzare i dati di Core Web Vitals per altri siti, ad esempio quelli della concorrenza.
PSI fornisce anche i dati Lighthouse, che forniscono consigli utili per migliorare i Core Web Vitals, se le metriche sono allineate. Se non sono in linea, i suggerimenti di Lighthouse potrebbero essere meno pertinenti.
Poiché Lighthouse viene eseguito dal server, può formare una linea di base più coerente rispetto all'esecuzione di Lighthouse da DevTools.
Quando non utilizzare PSI
PSI è disponibile solo per gli URL pubblici. Non può essere utilizzato su siti di sviluppo non accessibili al pubblico.
I dati di CrUX sono disponibili solo quando i siti soddisfano determinati criteri di idoneità, tra cui soglie di popolarità del sito. PSI è meno utile quando i dati di CrUX non sono disponibili per una pagina o un'origine, in quanto in questi casi può mostrare solo i dati di Lighthouse Lab.
Analogamente, se disponi solo di dati CrUX a livello di origine anziché dell'URL specifico sottoposto a test, la correlazione dei dati dei campi a livello di origine con la diagnostica di laboratorio a livello di pagina è meno utile. I dati dei campi a livello di origine sono comunque informazioni molto utili come riepilogo delle prestazioni del sito e i controlli di Lighthouse possono aiutare, ma in questo caso è necessario prestare particolare attenzione.
Infine, se i dati a livello di pagina sono disponibili in CrUX, ma sono diversi da quelli del Lighthouse Lab, i consigli di Lighthouse potrebbero essere di scarso valore. Questo può accadere in particolare per i problemi di CLS post-caricamento e per l'interattività Core Web Vitals (FID e INP), dove i controlli in laboratorio sono meno utili.
Search Console
Search Console misura il traffico e il rendimento del tuo sito nella Ricerca, inclusi i Segnali web essenziali. È disponibile solo per i proprietari di siti che hanno confermato la proprietà del sito.
Una funzionalità utile di Search Console è che raggruppa pagine simili (ad esempio pagine che utilizzano lo stesso modello) in un'unica valutazione di gruppo. Search Console include anche un report Core Web Vitals basato sui dati sul campo di CrUX.
Quando utilizzare Search Console
Search Console è adatto sia agli sviluppatori sia a chi ricopre ruoli diversi da sviluppatore per valutare il rendimento della ricerca e delle pagine in modi che non sono disponibili in altri strumenti Google. La presentazione dei dati CrUX e il raggruppamento delle pagine in base alla somiglianza offrono nuovi approfondimenti su come i miglioramenti delle prestazioni influiscono su intere categorie di pagine.
Quando non utilizzare Search Console
Search Console potrebbe non essere adatto a progetti che utilizzano strumenti di terze parti diversi che raggruppano le pagine per somiglianza oppure se un sito web non è rappresentato nel set di dati CrUX.
Il raggruppamento delle pagine può essere anche un po' confuso quando le pagine di esempio di un gruppo hanno caratteristiche diverse rispetto al resto del gruppo, ad esempio se il gruppo non supera determinati Core Web Vitals nel complesso, ma le pagine di esempio sembrano superare tutti gli stessi Core Web Vitals. Ciò può accadere quando un gruppo contiene una coda lunga o pagine visitate raramente che potrebbero essere più lente da caricare, in quanto è meno probabile che vengano memorizzate nella cache. Quando ci sono volumi sufficienti di queste pagine nella long tail, queste pagine possono influenzare la percentuale di superamento complessiva del gruppo.
Faro
Lighthouse è uno strumento di laboratorio che offre opportunità specifiche per migliorare le prestazioni delle pagine. I flussi utente di Lighthouse consentono inoltre agli sviluppatori di creare script dei flussi di interazione per i test delle prestazioni oltre il caricamento pagina.
Lighthouse-CI è uno strumento correlato che esegue Lighthouse durante le build e i deployment del progetto per facilitare i test di regressione delle prestazioni. Presenta un report Lighthouse insieme alle richieste pull e monitora le metriche sul rendimento nel tempo.
Quando utilizzare Lighthouse
Lighthouse è eccellente per trovare opportunità di miglioramento del rendimento durante lo sviluppo sia in ambienti locali che di staging. CI Lighthouse è utile in modo simile nelle fasi di creazione e deployment negli ambienti di gestione temporanea e produzione, in cui i test di regressione delle prestazioni sono necessari per preservare l'esperienza utente positiva.
Quando non utilizzare Lighthouse
Lighthouse (o Lighthouse CI) non sostituisce i dati dei campi. Lighthouse è principalmente uno strumento di diagnostica che elenca potenziali problemi e best practice da un caricamento di pagina predefinito. I consigli visualizzati potrebbero non corrispondere sempre al rendimento riscontrato dagli utenti.
Sebbene Lighthouse possa essere utilizzato per diagnosticare i siti di produzione tramite strumenti come PageSpeed Insights, idealmente dovrebbe essere utilizzato in ambienti di sviluppo e integrazione continua per risolvere i problemi di prestazioni prima che raggiungano la produzione.
Il riquadro Prestazioni in Chrome DevTools
Chrome DevTools è una raccolta di strumenti di sviluppo in-browser, tra cui il pannello delle prestazioni. Il riquadro Prestazioni è uno strumento di lab costituito da due "modalità":
Quando il riquadro Prestazioni viene aperto per la prima volta, una schermata Metriche in tempo reale fornisce l'attuale metrica Core Web Vitals, con la possibilità di importare i dati dei campi da CrUX. È utile come visualizzazione "in tempo reale" del rendimento durante l'interazione con la pagina per tentare di scoprire problemi di rendimento, in particolare per i problemi post-caricamento che potresti notare con le metriche CLS e INP.
In secondo luogo, il riquadro Rendimento consente agli sviluppatori di acquisire un profilo (o una traccia) di tutte le attività della pagina durante il caricamento della pagina o in un periodo di tempo registrato. Questa visualizzazione offre informazioni approfondite su tutto ciò che viene osservato in dimensioni come rete, rendering, applicazione di stili e attività di scripting, nonché sui Core Web Vitals di una pagina.
Quando utilizzare il riquadro Rendimento
Il riquadro Rendimento deve essere utilizzato dagli sviluppatori per ottenere informazioni approfondite sul rendimento di una determinata pagina.
La visualizzazione delle metriche in tempo reale può essere utilizzata per comprendere rapidamente le attuali caratteristiche di rendimento della pagina e anche individuare potenziali problemi durante l'interazione con la pagina.
La visualizzazione traccia è particolarmente utile per eseguire il debug dei problemi di reattività che interessano INP. Una volta identificata e ripetuta un'interazione con scarsa risposta, il riquadro Rendimento può fornire una serie di dati su ciò che accade nel browser per aiutarti a comprendere il problema, dal blocco del thread principale agli stack di chiamate JavaScript, fino al lavoro di rendering.
Quando non utilizzare il riquadro Rendimento
Il riquadro Rendimento è uno strumento per sviluppatori che fornisce principalmente dati di laboratorio, anche se con un po' di contesto da CrUX. Non sostituisce i dati sul campo.
La visualizzazione della traccia contiene molte informazioni di debug, ma per questo motivo può essere difficile da comprendere per gli sviluppatori principianti o per chi ricopre ruoli diversi da quello di sviluppatore. Tuttavia, la visualizzazione delle metriche in tempo reale con cui si apre il riquadro risolve il problema fornendo un'interfaccia più facile da usare per chi non ha bisogno di tutti i dettagli.
Un flusso di lavoro in tre passaggi per garantire il corretto funzionamento dei Core Web Vitals del tuo sito web
Quando cerchi di migliorare l'esperienza utente, è meglio pensare al processo come a un ciclo continuo. Per migliorare i Core Web Vitals e altre metriche sul rendimento, un approccio potrebbe essere:
- Valuta lo stato del sito web e identifica i punti critici.
- Esegui il debug e ottimizza.
- Monitora con gli strumenti di integrazione continua per rilevare e prevenire le regressioni.
Passaggio 1: valuta lo stato del sito web e identifica le opportunità di miglioramento
È meglio iniziare con dati sul campo per valutare lo stato del sito web.
- Utilizza PageSpeed Insights per visualizzare le metriche generali dell'esperienza Core Web Vitals nell'origine e informazioni specifiche su un singolo URL.
- Search Console può essere utile per identificare le pagine che richiedono miglioramenti se la funzionalità di raggruppamento delle pagine funziona bene per il tuo sito.
- Se disponi di dati RUM, questa è spesso l'opzione migliore per poter identificare pagine o segmenti di traffico specifici che presentano problemi.
Indipendentemente dal fatto che tu analizzi i dati sul campo raccolti autonomamente o i dati CrUX, questo primo passaggio è fondamentale. Se non raccogli dati sul campo, i dati CrUX potrebbero essere sufficienti per orientarti, sempre che il tuo sito web sia rappresentato nel set di dati.
Analizzare il rendimento del sito con PageSpeed Insights
PageSpeed Insights mostra i dati di CrUX relativi agli ultimi 28 giorni di dati sull'esperienza utente al 75° percentile. Ciò significa che se il 75% delle esperienze utente soddisfa la soglia impostata per una determinata metrica, l'esperienza è considerata "buona".
Se hai in mente una pagina specifica di cui vuoi esaminare il rendimento, utilizzala. Per una visione d'insieme di un sito quando inizi a ottimizzarlo, ti consigliamo di iniziare dalla home page, in quanto in genere è una delle pagine più visitate su molti siti.
In un primo momento, concentrati sulla sezione Com'è l'esperienza dei tuoi utenti reali di PSI. Vedrai fino a quattro visualizzazioni dei dati: dispositivi mobili e computer per l'URL inserito e per l'intera origine. Confrontali e scopri in che modo si differenziano. In genere, le prestazioni dei dispositivi mobili sono inferiori a quelle dei computer desktop, in quanto si tratta di dispositivi più vincolati alle risorse che operano in condizioni di rete potenzialmente meno stabili. Se i dati dell'URL e dell'origine sono molto diversi, prova a capire perché: le home page sono spesso le prime pagine visitate (ovvero una pagina di destinazione), quindi possono essere più lente rispetto all'origine perché gli utenti subiscono l'impatto diretto di una cache del browser non inizializzata. Le pagine successive verranno probabilmente caricate più velocemente, poiché tutte le risorse condivise verranno memorizzate nella cache, riducendo così i dati aggregati a livello di origine.
PSI mostra anche tutti e tre i Core Web Vitals (LCP, CLS e INP) più le metriche di diagnostica TTFB e FCP. Qualcuna delle metriche di Core Web Vitals non è soddisfatta e di quanto? In questo modo saprai dove concentrarti.
Comprendi le relazioni tra questi numeri, in particolare per LCP. Se il tempo di LCP è lento, come in questo esempio, esamina il TTFB e l'FCP, che sono entrambi traguardi per questa metrica. In questo esempio abbiamo un TTFB di 1,8 secondi, il che rende molto difficile raggiungere la soglia consigliata di 2,5 secondi per un buon LCP. Ciò suggerisce un backend lento (problemi del server o mancanza di CDN), reti più lente o reindirizzamenti che ritardano i primi byte HTML. Per ulteriori informazioni, consulta la guida all'ottimizzazione del tempo di risposta del browser. Il tempo FCP richiede un altro secondo, il che potrebbe indicare reti più lente. In questo esempio, la metrica LCP non passa molto da quella del valore FCP, a indicare che la risorsa LCP è ben ottimizzata una volta caricata la pagina.
Per il CLS, esamina i punteggi CLS di CrUX e Lighthouse per capire se si tratta di un problema di CLS di caricamento (che Lighthouse rileverà e consiglierà) o di un problema di CLS post-caricamento che Lighthouse non rileverà. Per ulteriori informazioni, consulta la guida CLS di Optimize.
Per la reattività, consulta i punteggi INP. Esamina i controlli TBT in Lighthouse per verificare se durante il caricamento iniziale della pagina viene eseguita un'elaborazione di JavaScript eccessiva, che potrebbe influire sull'INP. L'INP può essere una metrica difficile da migliorare, quindi consulta la guida di Optimize INP per saperne di più.
Identificare le pagine con un rendimento scadente in Search Console
Sebbene lo strumento PSI sia utile quando hai un URL specifico da testare o il sito nel suo complesso, Search Console può aiutarti a scegliere come target tipi specifici di pagine. Questo è particolarmente utile se molte pagine condividono temi o tecnologie comuni e Search Console può identificarli correttamente.
Il report Core Web Vitals in Search Console mostra un quadro generale del rendimento del tuo sito web, ma puoi comunque visualizzare in dettaglio pagine specifiche che richiedono attenzione. Con Search Console puoi anche:
- Identifica i singoli gruppi di pagine che richiedono miglioramenti e quelli che offrono un'esperienza utente positiva.
- Visualizza dati granulari sul rendimento per URL raggruppati per stato, metrica e gruppi di pagine web simili (ad esempio pagine dei dettagli dei prodotti su un sito web di e-commerce).
- Ottieni report dettagliati sugli URL dei bucket in ogni categoria di qualità dell'esperienza utente, sia per dispositivi mobili che per computer.
Una volta individuate alcune pagine specifiche da esaminare, puoi utilizzare PSI come spiegato in precedenza per comprendere ulteriormente i problemi relativi a queste pagine.
Passaggio 2: esegui il debug e l'ottimizzazione
Nel passaggio 1, dovresti aver identificato le pagine che richiedono miglioramenti del rendimento e anche le metriche di Core Web Vitals che vuoi migliorare. Puoi utilizzare gli strumenti Google per ottenere ulteriori informazioni per comprendere la causa principale e identificare il problema.
- Esegui un controllo di Lighthouse per ricevere indicazioni a livello di pagina
- Usa la visualizzazione delle metriche in tempo reale del riquadro Rendimento per analizzare Core Web Vitals in tempo reale.
- Usa il tracciamento del riquadro Prestazioni per eseguire il debug dei problemi di prestazioni e testare le modifiche al codice.
Per indicazioni più dettagliate, consulta queste guide:
Scoprire opportunità con Lighthouse
PageSpeed Insights esegue Lighthouse per te, ma per lo sviluppo locale è anche possibile eseguire Lighthouse da Chrome DevTools, utile per convalidare le correzioni localmente.
Un punto chiave è verificare che il controllo Lighthouse replichi i problemi che stai cercando di risolvere (ad esempio, LCP lento o problemi di CLS). Per impostazione predefinita, Lighthouse valuta solo l'esperienza utente durante il caricamento della pagina. Poiché si tratta di uno strumento di laboratorio, esclude anche l'INP a favore del TBT.
Quando le metriche di Lighthouse suggeriscono un problema simile a quello che stai cercando di risolvere, la vasta gamma di informazioni nei relativi controlli può aiutarti a identificare i problemi e suggerire soluzioni.
Puoi filtrare i controlli in base ai Core Web Vitals che ti interessano per concentrarti sulle correzioni di problemi relativi a una metrica specifica:
Per l'INP, utilizza i controlli TBT per identificare i problemi che possono potenzialmente influire su queste metriche, ma tieni presente che, senza interazioni, Lighthouse ha un numero limitato di problemi che può diagnosticare.
Eseguire l'analisi in tempo reale con la schermata delle metriche in tempo reale di Chrome DevTools
La schermata delle metriche in tempo reale di Chrome DevTools nel riquadro Rendimento mostra i Core Web Vitals in tempo reale durante il caricamento della pagina e durante la navigazione in una pagina. Per questo motivo, può acquisire gli INP e i cambiamenti di layout che si verificano dopo il caricamento. È anche possibile visualizzare informazioni più dettagliate su ogni metrica:
Sebbene questa visualizzazione fornisca molte informazioni utili per identificare i problemi di prestazioni, per ulteriori informazioni puoi visualizzare in dettaglio una traccia.
Visualizzare in dettaglio con il riquadro Rendimento
Il pannello Prestazioni in Strumenti per sviluppatori di Chrome ti consente di registrare un profilo (o una traccia) di tutto il comportamento della pagina durante un periodo di tempo registrato.
I tempi chiave, ad esempio LCP, vengono visualizzati nella traccia Tempi. Fai clic su questi per ulteriori dettagli.
La traccia Variazioni del layout evidenzia le variazioni del layout e, facendo clic su queste, vengono visualizzati ulteriori dettagli sugli elementi che sono stati spostati per il debug della metrica CLS.
Anche le attività lunghe (che possono causare problemi INP) sono evidenziate con triangolini rossi.
Queste funzionalità, oltre alle informazioni in altre parti del riquadro Rendimento, possono aiutarti a determinare se le correzioni hanno un effetto sui Core Web Vitals di una pagina.
Eseguire il debug di Core Web Vitals sul campo
Gli strumenti di laboratorio non sono sempre in grado di identificare la causa di tutti i problemi relativi a Core Web Vitals che interessano i tuoi utenti. Questo è uno dei motivi per cui è così importante raccogliere dati sul campo, in quanto tiene conto di alcuni dati di laboratorio che non possono essere inseriti.
Per ulteriori informazioni, consulta la sezione Eseguire il debug delle prestazioni sul campo.
Passaggio 3: monitora le modifiche
Una volta risolti gli eventuali problemi, devi assicurarti che abbiano l'effetto richiesto e che nuovi problemi non interrompano i tuoi Core Web Vitals. Ciò richiede il monitoraggio dei problemi di rendimento nell'ambito del flusso di lavoro dello sviluppatore per evitare che vengano rilasciati in produzione e il monitoraggio regolare dei dati sul campo per verificare che sia così.
Monitora le richieste di prestazioni negli ambienti di integrazione continua (CI)
Lighthouse-CI ti consente di eseguire automaticamente i controlli Lighthouse sui commit del codice per evitare che le regressioni delle prestazioni vengano inserite nel codice. In questo modo puoi controllare i tempi di esecuzione (soggetti a variabilità) o solo i controlli del rendimento, come strumento di linting per evitare cattive pratiche nel codice.
Visualizzare le tendenze relative all'integrità del sito web con i dati sul campo
Sebbene tu debba cercare di rilevare e correggere tutti i problemi di prestazioni prima che vengano implementati in produzione, il monitoraggio dei dati sul campo utilizzando RUM è essenziale per rilevare eventuali problemi. Esistono molti prodotti RUM commerciali che possono aiutarti a farlo. La libreria JavaScript web-vitals può automatizzare la raccolta dei dati dei campi di un sito web e, facoltativamente, utilizzare questi dati per creare dashboard e sistemi di avviso personalizzati.
Per i siti senza una soluzione RUM, puoi utilizzare la dashboard CrUX come analisi di tendenza di base dei dati sul campo. Per i siti in CrUX vengono registrati i seguenti dati:
- Panoramica del sito, che suddivide i Core Web Vitals in tipi di dispositivi desktop e mobili.
- Tendenza storica per tipo di metrica, ovvero una distribuzione delle metriche nel tempo per ogni release mensile disponibile dei dati dei report CrUX.
- Dati demografici degli utenti, che illustra la distribuzione delle visualizzazioni di pagina su un'intera origine per gli utenti in ogni gruppo demografico, inclusi i tipi di dispositivo e di connessioni effettive.
La dashboard CrUX si basa sul set di dati BigQuery CrUX, che viene aggiornato una volta al mese. Questo può essere un buon promemoria per controllare regolarmente i Core Web Vitals.
Conclusione
Garantire esperienze utente rapide e piacevoli richiede un approccio incentrato sul rendimento e l'adozione di un flusso di lavoro per garantire il progresso. Con gli strumenti e le procedure giusti per eseguire controlli, debug e monitoraggio, puoi creare esperienze utente straordinarie e rispettare le soglie definite per Core Web Vitals di buona qualità.