Combina gli strumenti di Google per controllare, migliorare e monitorare il tuo sito web in modo efficace.
Le metriche Core Web Vitals 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 i Core Web Vitals per il tuo sito web, ma il punto di inizio del flusso di lavoro dipende dalla raccolta o meno dei tuoi dati sul campo. Il punto in cui termina potrebbe dipendere da quali strumenti di Google troverai utili per diagnosticare e risolvere i problemi relativi all'esperienza utente.
Le metriche Core Web Vitals vengono misurate al meglio sul campo
Le metriche Core Web Vitals sono progettate specificamente per misurare l'esperienza degli utenti sul tuo sito web e si tratta di metriche incentrate sugli utenti. Gli strumenti basati su lab, come Lighthouse, sono strumenti diagnostici per evidenziare potenziali problemi di prestazioni e best practice. Gli strumenti basati su lab vengono eseguiti a determinate condizioni predefinite e potrebbero non riflettere le misurazioni di Core Web Vitals reali usate dagli utenti.
Ad esempio, Lighthouse è uno strumento basato su lab che esegue test con limitazione simulata in un ambiente desktop o mobile simulato. Sebbene queste simulazioni di condizioni di rete e dispositivi più lente siano utili per diagnosticare problemi di prestazioni, sono solo una singola porzione della grande varietà di condizioni della rete e funzionalità dei dispositivi e quindi potrebbero non riflettere ciò che stanno vivendo gli utenti dei tuoi siti.
Anche gli strumenti basati su lab, come Lighthouse, eseguono un "caricamento a freddo" di una pagina web come visitatore del tutto nuovo. Spesso si tratta del caricamento più lento, ma in realtà i visitatori potrebbero avere alcuni asset memorizzati nella cache se li hanno già visitati in precedenza o quando navigano sul sito. Anche i nuovi visitatori e i nuovi strumenti potrebbero utilizzare il sito in modo diverso a causa dei banner dei cookie o di 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 Report sull'esperienza utente di Chrome (CrUX). Si tratta di un set di dati pubblico raccolto da utenti reali di Chrome. È il fulcro di molti strumenti Google e di terze parti che segnalano i Core Web Vitals di un sito.
Tuttavia, CrUX ha i suoi limiti. Spesso è in grado di indicare quando c'è un problema, ma spesso dispone di dati insufficienti 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. Il primo passo è raccogliere i dati dei campi 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 misureranno quasi certamente Core Web Vitals (e altre metriche di rendimento) e di solito forniscono una varietà 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 una grande organizzazione o persino di quella che ha i mezzi per permetterti di acquistare una soluzione di terze parti. In questi casi, la raccolta web-vitals di Google ti aiuterà a raccogliere tutti i 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 dati sui tuoi campi, potresti avere l'opportunità di utilizzare la libreria web-vitals per inviare a Google Analytics le metriche Web Vitals raccolte 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 dati sul campo o meno, esistono diversi strumenti Google che possono essere utili per analizzare Core Web Vitals. Prima di definire un flusso di lavoro, una panoramica generale di ogni strumento può aiutarti a capire quali strumenti potrebbero o meno essere i più adatti alle tue esigenze.
Report sull'esperienza utente di Chrome (CrUX)
Come accennato in precedenza, CrUX è un set di dati pubblico di dati sul campo raccolti da un segmento di utenti reali di Google Chrome da 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 oppure come API giornaliera a livello di URL o origine, a condizione che un URL o un'origine presentino un numero sufficiente di campioni nel set di dati CrUX. I dati di BigQuery sono visualizzabili anche nella dashboard di 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. Ciascuna di esse presenta vantaggi e svantaggi, che possono comportare differenze. Se non raccogli alcun dati dei campi per il tuo sito web, CrUX è particolarmente utile per fornire una panoramica generale, a condizione che il tuo sito web sia rappresentato nel suo set di dati.
Puoi utilizzare CrUX direttamente o tramite un altro strumento (inclusi quelli indicati di seguito). L'utilizzo diretto del set di dati CrUX, tramite BigQuery o l'API, è utile per esporre dati non visualizzati in altri strumenti, ad esempio i dati a livello di paese spesso non sono disponibili su altri strumenti o per visualizzare metriche aggiuntive in CrUX che spesso non vengono riportate 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 dipendere dai dati di laboratorio, ma con le limitazioni che potrebbero non essere rappresentativi come descritto in precedenza.
Poiché i dati forniti da CrUX sono una media mobile degli ultimi 28 giorni, non è uno strumento ideale durante lo sviluppo, in quanto i miglioramenti che si rifletteranno nel set di dati CrUX richiederà un bel po' di tempo.
Infine, in quanto set di dati pubblico, CrUX si limita alla quantità di informazioni che può rendere disponibili e al modo in cui è possibile eseguire query su questi dati. L'acquisizione dei tuoi dati RUM ti consente di raccogliere più dettagli (ad esempio, l'elemento LCP) e di segmentare maggiormente i dati per identificare i problemi. Gli utenti che hanno eseguito 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 particolare elemento LCP? Quali interazioni causano valori FID e INP elevati?
PageSpeed Insights (PSI)
PSI è uno strumento che segnala i dati dei campi di CrUX e di un lab di Lighthouse per una determinata pagina. Per ulteriori dettagli, consulta le singole sezioni.
Quando utilizzare PSI
PSI è un ottimo strumento per valutare le prestazioni di CrUX a livello di pagina o di origine per gli utenti di dispositivi mobili e computer. È una buona scelta per una panoramica iniziale di Core Web Vitals per una pagina o un sito. Consente inoltre di visualizzare i dati di Core Web Vitals per altri siti come 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 base di riferimento 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 pubblicamente.
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 CrUX non sono disponibili per una pagina o un'origine, poiché in questi casi possono mostrare solo i dati del lab Lighthouse.
Analogamente, se disponi solo di dati CrUX a livello di origine anziché dell'URL specifico in fase di test, ciò limita anche l'utilità della correlazione dei dati sul campo a livello di origine con la diagnostica di laboratorio a livello di pagina. 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 differiscono dai dati del lab di Lighthouse, i suggerimenti di Lighthouse potrebbero avere un valore limitato. Questo può accadere in particolare per i problemi di CLS post-caricamento e per l'interattività Core Web Vitals (FID e INP), in cui gli audit basati su lab sono meno utili.
Search Console
Search Console misura il traffico di ricerca e le prestazioni del tuo sito, inclusi Core Web Vitals. È disponibile solo per i proprietari del sito che hanno confermato di essere il proprietario del sito.
Una funzionalità preziosa di Search Console è che raggruppa pagine simili (ad esempio, quelle che utilizzano lo stesso modello) in un'unica valutazione di gruppo. Search Console include anche un report Core Web Vitals basato sui dati dei campi di CrUX.
Quando utilizzare Search Console
Search Console è un'ottima soluzione sia per gli sviluppatori sia per chi non ha un ruolo di sviluppatore per valutare le prestazioni della ricerca e delle pagine in modi non possibili con altri strumenti Google. La presentazione dei dati CrUX e il raggruppamento delle pagine per somiglianza offre nuove informazioni sull'impatto dei miglioramenti delle prestazioni 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ò anche creare confusione quando le pagine di esempio di un gruppo hanno caratteristiche diverse rispetto al resto del gruppo, ad esempio se il gruppo non supera in generale determinati Core Web Vitals, ma tutte le pagine di esempio sembrano superare gli stessi Core Web Vitals. Questo può accadere quando un gruppo contiene pagine "long tail" 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 dopo il caricamento della pagina.
Lighthouse-CI è uno strumento correlato che esegue Lighthouse durante la creazione e il deployment dei progetti per assistere i test di regressione delle prestazioni. Presenta un report Lighthouse insieme alle richieste di pull e monitora le metriche delle prestazioni nel tempo.
Quando utilizzare Lighthouse
Lighthouse è eccellente per trovare opportunità di miglioramento delle prestazioni durante lo sviluppo in ambienti locali e di gestione temporanea. 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 derivanti da un caricamento pagina predefinito. I consigli che propone potrebbero non corrispondere sempre al rendimento registrato dai tuoi utenti.
Sebbene Lighthouse possa essere utilizzato per diagnosticare i siti di produzione tramite strumenti come PageSpeed Insights, l'ideale sarebbe utilizzarlo in ambienti di sviluppo e integrazione continua per risolvere problemi di prestazioni prima che raggiungano la produzione.
Estensione Web Vitals
L'estensione di Chrome Web Vitals è uno strumento di diagnostica che mostra le metriche di Core Web Vitals durante la navigazione sul web. Include anche i dati CrUX per la pagina corrente, se rappresentati nel set di dati CrUX, e fornisce informazioni di debug per aiutarti a identificare i problemi di prestazioni di Core Web Vitals.
Quando utilizzare l'estensione Web Vitals
L'estensione Web Vitals può essere utilizzata da chiunque, in qualsiasi ruolo, per valutare i Core Web Vitals di una pagina in tutti i punti del ciclo di vita della pagina. È utile come live streaming Visualizzazione del rendimento mentre interagisci 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.
Quando non viene usata l'estensione Web Vitals.
L'estensione Web Vitals non è una valutazione olistica delle prestazioni delle pagine. Inoltre, le metriche indicate nei report dipendono molto dall'ambiente in cui vengono eseguite e gli sviluppatori spesso dispongono di macchine con potenza superiore o di accesso a reti più veloci.
Riquadro Prestazioni in Chrome DevTools
Chrome DevTools è una raccolta di strumenti di sviluppo nel browser, tra cui il riquadro Prestazioni. Il riquadro Prestazioni è uno strumento di lab che profila tutte le attività delle pagine durante il caricamento pagina o un periodo di tempo registrato. Offre una visione approfondita di tutto ciò che osserva attraverso dimensioni quali rete, rendering, colorazione e attività di scripting, nonché i Core Web Vitals di una pagina.
Quando utilizzare il riquadro Rendimento
Il riquadro Rendimento dovrebbe essere utilizzato dagli sviluppatori durante lo sviluppo per ottenere informazioni dettagliate sulle prestazioni delle pagine. Ciò è particolarmente utile per eseguire il debug dei problemi di reattività che interessano FID o INP. Una volta identificata e ripetibile un'interazione con una risposta scadente, il riquadro Prestazioni può fornire una grande quantità di dati su ciò che sta accadendo nel browser per aiutarti a comprendere il problema, dal blocco dei thread principali agli stack di chiamate JavaScript, fino al lavoro di rendering.
Quando non utilizzare il riquadro Rendimento
Il riquadro Prestazioni è uno strumento per sviluppatori che fornisce solo dati di lab. Non sostituisce i dati dei campi. Contiene molte informazioni di debug, ma, per questo motivo, può essere difficile da comprendere per gli sviluppatori alle prime armi o con ruoli diversi dagli sviluppatori.
Un flusso di lavoro in tre passaggi per garantire l'integrità dei Core Web Vitals del tuo sito web
Quando si cerca di migliorare l'esperienza utente, è preferibile considerare il processo come un ciclo continuo. Un approccio possibile per migliorare i Core Web Vitals e altre metriche relative alle prestazioni potrebbe essere:
- Valuta lo stato del sito web e identifica i punti critici.
- Debug e ottimizza.
- Esegui il monitoraggio con strumenti di integrazione continua per rilevare e prevenire le regressioni.
Passaggio 1: valuta lo stato del sito web e identifica opportunità di miglioramento
È meglio iniziare con dati sul campo per valutare lo stato del sito web.
- Utilizza PageSpeed Insights per visualizzare le metriche generali relative all'esperienza Core Web Vitals sull'origine e informazioni specifiche su un singolo URL.
- Search Console può essere utile per identificare le pagine da migliorare e in cui 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.
Che tu analizzi i dati sul campo raccolti da te o i dati di 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.
Analizza il rendimento del sito con PageSpeed Insights
PageSpeed Insights mostra i dati 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 viene considerata "buona".
Se hai in mente una pagina specifica di cui vuoi analizzare il rendimento, utilizzala. Per una visione generale di un sito quando inizi a eseguire l'ottimizzazione, ti consigliamo di iniziare con la home page, in quanto è in genere una delle pagine più popolari su molti siti.
Concentrati inizialmente sulla sezione Cosa stanno vivendo gli utenti reali di PSI. Vedrai fino a quattro visualizzazioni dei dati: mobile e desktop per l'URL inserito e 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 con maggiori risorse limitate che funzionano in condizioni di rete potenzialmente meno stabili. Se l'URL e i dati di origine sono molto diversi, prova a capirne il motivo: le home page sono spesso le prime pagine visitate (ossia una pagina di destinazione), quindi possono essere più lente dell'origine che gli utenti possono sfruttare appieno la cache del browser non autorizzata. 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 FID) e la metrica INP in attesa, oltre alle metriche diagnostiche TTFB e FCP. Qualche dei Core Web Vitals presenta errori e di quanto? Questo ti indicherà dove concentrare i tuoi sforzi.
Comprendi le relazioni tra questi numeri, in particolare per l'LCP. Se LCP è lento, come in questo esempio, esamina TTFB e FCP, che sono entrambi traguardi di quella metrica. In questo esempio abbiamo un TTFB di 1,8 secondi, che renderà molto difficile raggiungere la soglia consigliata di 2,5 secondi per un buon LCP. Questo suggerisce un backend lento (problemi del server o mancanza di CDN), reti più lente o reindirizzamenti con un ritardo dei primi byte HTML. Per ulteriori informazioni, consulta la guida TTFB di Optimize. Inoltre, la rete FCP impiega un altro secondo, il che può essere indicativo di reti più lente. In questo esempio, la metrica LCP non è molto successiva a quella di FCP, a indicare che la risorsa LCP è ben ottimizzata una volta caricata la pagina.
Per CLS, controlla i punteggi CLS di CrUX e CLS di Lighthouse per vedere se si tratta di un problema di caricamento della CLS (che Lighthouse rileva e consiglia) o di un problema CLS post-caricamento che Lighthouse non rileva. Per saperne di più, consulta la guida CLS di Optimize.
Per la reattività, osserva i punteggi FID e 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 rendimento scarso in Search Console
Sebbene PSI sia utile quando hai un URL specifico che vuoi testare o il sito nel suo complesso, Search Console può aiutarti a indirizzare i tuoi sforzi a determinati tipi di pagine. Ciò è particolarmente utile se molte pagine condividono temi o tecnologie comuni e Search Console è in grado di 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 devono essere migliorati e quelli che offrono una buona esperienza utente.
- 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 i dispositivi mobili che per i computer.
Una volta che hai alcune pagine specifiche da esaminare, puoi utilizzare PSI come spiegato in precedenza per acquisire un quadro più chiaro dei problemi relativi a queste pagine.
Passaggio 2: esegui il debug e l'ottimizzazione
Nel passaggio 1, dovresti aver identificato le pagine che richiedono miglioramenti delle prestazioni e quali metriche di Core Web Vitals vuoi migliorare. Puoi utilizzare gli strumenti di Google per ottenere ulteriori informazioni al fine di comprendere la causa principale e identificare il problema.
- Esegui un controllo di Lighthouse per ricevere indicazioni a livello di pagina
- Utilizza l'estensione Web Vitals per analizzare Core Web Vitals in tempo reale.
- Usa il riquadro Prestazioni in Chrome DevTools per eseguire il debug dei problemi di prestazioni e testare le modifiche al codice.
Per indicazioni più dettagliate, consulta queste guide:
Scopri 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 di Lighthouse replichi i problemi che stai cercando di risolvere (ad esempio, problemi LCP o CLS lenti). Per impostazione predefinita, Lighthouse valuta solo l'esperienza utente durante il caricamento pagina. Poiché si tratta di uno strumento di laboratorio, esclude anche FID e INP a favore di TBT.
Quando le metriche di Lighthouse suggeriscono un problema simile a quello che stai cercando di risolvere, la mole di informazioni dei suoi controlli può aiutare 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 le metriche FID e INP, utilizza i controlli TBT per identificare i problemi che possono potenzialmente influire su queste metriche, ma tieni presente che, senza interazioni, Lighthouse può diagnosticare un numero limitato di interazioni.
Analisi in tempo reale con l'estensione Web Vitals
L'estensione di Chrome Web Vitals mostra Core Web Vitals in tempo reale durante il caricamento della pagina e durante la navigazione di una pagina. Per questo motivo, è in grado di acquisire dati FID e INP, nonché le variazioni di layout che si verificano dopo il caricamento. Le opzioni di debug mostrano informazioni più dettagliate su ciascuna metrica:
È preferibile pensare all'estensione Web Vitals come uno strumento di controllo casuale per individuare i problemi di prestazioni, non come uno strumento di debug completo, che è un compito per il riquadro Prestazioni in Chrome DevTools.
Visualizzare in dettaglio con il riquadro Rendimento
Il riquadro Prestazioni in Chrome DevTools delinea il comportamento di tutte le pagine durante un periodo di tempo registrato.
Le tempistiche chiave, come ad esempio LCP, vengono mostrate 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 FID e INP) sono evidenziate con triangoli rossi.
Queste funzionalità, e informazioni in altre parti del riquadro Rendimento, possono aiutarti a determinare se le correzioni hanno effetto sui Core Web Vitals di una pagina.
Esegui il debug di Core Web Vitals sul campo
Gli strumenti dei lab non sempre sono in grado di identificare la causa di tutti i problemi di 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 sulle prestazioni di debug nel campo.
Passaggio 3: monitora le modifiche
Una volta risolti gli eventuali problemi, assicurati che abbiano l'effetto richiesto e che i nuovi problemi non influiscano su Core Web Vitals. Ciò richiede il monitoraggio dei problemi di prestazioni nell'ambito del flusso di lavoro degli sviluppatori per evitare che vengano rilasciati in produzione, nonché il monitoraggio regolare dei dati sul campo per garantire che sia così.
Monitoraggio delle richieste di prestazioni negli ambienti di integrazione continua (CI)
Lighthouse-CI ti consente di eseguire automaticamente controlli di Lighthouse sui commit di codice per evitare l'inserimento del codice da parte di regressioni delle prestazioni. È possibile controllare i tempi delle prestazioni (che sono soggetti a variabilità) o solo per i controlli delle prestazioni, come strumento di analisi tramite lint per evitare pratiche scorrette nel codice.
Visualizza le tendenze relative allo stato del sito web con dati dei campi
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. Sono disponibili molti prodotti RUM commerciali che possono essere d'aiuto in questo senso. La libreria JavaScript di web-vitals può automatizzare la raccolta dei dati sul campo di un sito web e, facoltativamente, utilizzare questi dati per supportare dashboard personalizzate e sistemi di avviso.
Per i siti senza una soluzione RUM, puoi utilizzare la dashboard di CrUX come analisi di base delle tendenze dei dati sul campo. Segnala quanto segue per i siti in CrUX:
- Panoramica del sito, che suddivide i Core Web Vitals in tipi di dispositivi desktop e mobili.
- Andamento storico per tipo di metrica, ovvero una distribuzione di 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, compresi i dispositivi e i tipi 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 ricordarti di controllare regolarmente i Core Web Vitals.
Conclusione
Garantire esperienze utente rapide e piacevoli richiede una mentalità incentrata sulle prestazioni e l'adozione di un flusso di lavoro per garantire i progressi. Con gli strumenti e i processi giusti per le attività di controllo, debug e monitoraggio, puoi creare esperienze utente ottimali e rimanere entro le soglie definite per Core Web Vitals di qualità.