Combina gli strumenti Google per controllare, migliorare e monitorare il tuo sito web in modo efficace.
Pubblicato: 28 maggio 2020
I Core Web Vitals sono un insieme di metriche che valutano l'esperienza utente in base a criteri quali le prestazioni di caricamento, la reattività all'input dell'utente e la stabilità del layout.
In questa guida verrà illustrato un flusso di lavoro per migliorare i Core Web Vitals del tuo sito web, ma il punto di partenza di questo flusso di lavoro dipende dal fatto che tu stia raccogliendo o meno i tuoi dati sul campo. La fine del percorso potrebbe dipendere dagli strumenti di Google che ritieni utili per diagnosticare e risolvere i problemi relativi all'esperienza utente.
I Core Web Vitals vengono misurati meglio 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 rendimento 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 riscontrate 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ù lenti siano utili quando si tenta di diagnosticare problemi di prestazioni, rappresentano solo una singola fetta dell'ampia varietà di condizioni di rete e funzionalità dei dispositivi, pertanto potrebbero non riflettere l'esperienza degli utenti sui tuoi siti.
In genere, anche gli strumenti basati su lab come Lighthouse eseguono un "caricamento completo" di una pagina web come se si trattasse di un visitatore completamente nuovo. Questo è spesso il caricamento più lento, ma nella vita reale i visitatori potrebbero avere alcuni asset memorizzati nella cache se hanno già visitato il sito o quando lo stanno navigando. Anche i nuovi visitatori e gli strumenti potrebbero visualizzare il sito in modo diverso con i banner dei cookie o altri contenuti.
In breve, sebbene gli strumenti basati su lab possano fornire un'indicazione di potenziali problemi di prestazioni e aiutarti a eseguire il debug e l'iterazione, potrebbero non rappresentare il modo in cui molti dei tuoi visitatori sperimentano effettivamente il tuo sito web. Utilizza i dati dei campi per misurare le prestazioni reali e strumenti basati su lab come Lighthouse per diagnosticare come migliorarle. Consulta anche la sezione Quando utilizzare Lighthouse.
Google misura i Core Web Vitals tramite il Chrome User Experience Report (CrUX). Si tratta di un set di dati pubblico raccolto da utenti Chrome reali. È la base di molti strumenti di Google e di terze parti che generano report sui Core Web Vitals di un sito.
Tuttavia, CrUX presenta dei limiti. Spesso può indicare quando si verifica un problema, ma spesso non dispone di dati sufficienti per indicare perché.
Se possibile, raccogli i tuoi dati sul campo
Il set di dati migliore per migliorare le prestazioni del sito web sul campo è quello che crei tu. Il punto di partenza è la raccolta dei dati reali dei visitatori del tuo sito web. La procedura dipende dalle dimensioni della tua organizzazione e dal fatto che tu voglia pagare per una soluzione di terze parti o crearne una tua.
Le soluzioni a pagamento misurano quasi certamente i Core Web Vitals (e altre metriche sul rendimento) e di solito 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 una grande organizzazione o di un'organizzazione 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 Web Vitals. Tuttavia, sarai responsabile della modalità di generazione dei report, archiviazione e analisi di questi dati.
Se utilizzi già Google Analytics, ma non hai ancora iniziato a raccogliere i tuoi dati reali, potresti avere l'opportunità di utilizzare la libreria web-vitals per inviare i dati di Web Vitals raccolti sul campo a Google Analytics e utilizzare le esportazioni di BigQuery di GA4 per generare report sui dati.
Informazioni sugli strumenti di Google
Indipendentemente dal fatto che tu stia raccogliendo o meno i tuoi dati sul campo, esistono diversi strumenti Google che potrebbero essere utili per analizzare i Core Web Vitals. Prima di stabilire un flusso di lavoro, una panoramica generale di ogni strumento può aiutarti a capire quali strumenti potrebbero essere più adatti alle tue esigenze.
Chrome User Experience Report (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 o come API giornaliera a livello di URL o di origine, a condizione che un URL o un'origine abbia un numero sufficiente di campioni nel set di dati CrUX. I dati di CrUX sono disponibili tramite vari strumenti CrUX sia per l'accesso programmatico sia per gli strumenti visivi che gli utenti possono utilizzare.
Quando utilizzare CrUX
Anche se raccogli i tuoi dati sul campo, CrUX è comunque utile. Sebbene CrUX rappresenti un sottoinsieme di utenti di Chrome, è utile confrontare i dati sul campo del tuo sito web per vedere come si allineano ai dati CrUX. Ognuno presenta vantaggi e svantaggi, che possono comportare differenze. Se non raccogli alcun dato 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 relativo set di dati.
Puoi utilizzare CrUX direttamente o tramite un altro strumento (compresi quelli indicati di seguito). L'utilizzo diretto del set di dati CrUX, tramite BigQuery o l'API, è utile per esporre dati che non vengono mostrati in altri strumenti, ad esempio i dati a livello di paese spesso non sono disponibili in altri strumenti, o per visualizzare le metriche aggiuntive in CrUX che, ancora una volta, spesso non vengono mostrate 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 che supportano le metriche di 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 capire il rendimento del tuo sito web sul campo, poiché CrUX non sarà un'opzione. In alternativa, dovrai fare affidamento sui 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 richiederanno un po' di tempo per essere riflessi nel set di dati CrUX.
Infine, in quanto set di dati pubblico, CrUX è limitato nella quantità di informazioni che può rendere disponibili e nel 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 riscontrano valori di Core Web Vitals migliori o peggiori rispetto agli utenti che non hanno eseguito l'accesso? Gli utenti con un LCP lento hanno un elemento LCP particolare? Quali interazioni causano valori FID e INP elevati?
PageSpeed Insights (PSI)
PSI è uno strumento che genera report sui dati sul campo di CrUX e sui dati di prova controllati di Lighthouse per una determinata pagina. Per maggiori dettagli, consulta le singole sezioni.
Quando utilizzare PSI
PSI è ideale per valutare le prestazioni di CrUX a livello di pagina o di origine, sia per gli utenti di dispositivi mobili che per quelli di computer. È una buona scelta per una panoramica iniziale dei Core Web Vitals di una pagina o di un sito. Inoltre, ti consente di visualizzare i dati di Core Web Vitals per altri siti, ad esempio quelli dei concorrenti.
PSI fornisce anche dati di Lighthouse, che offrono consigli utili per migliorare i Core Web Vitals, se le metriche sono allineate. Se non sono in linea, i consigli 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.
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 le soglie di popolarità del sito. PSI è meno utile quando i dati CrUX non sono disponibili per una pagina o un'origine, in quanto in questi casi può mostrare solo i dati di prova controllati di Lighthouse.
Analogamente, se disponi solo di dati CrUX a livello di origine anziché dell'URL specifico sottoposto a test, anche questo limita l'utilità della correlazione dei dati dei campi 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 da avere come riepilogo delle prestazioni del sito e i controlli di Lighthouse possono essere d'aiuto, ma in questo caso è necessario prestare maggiore attenzione.
Infine, se i dati a livello di pagina sono disponibili in CrUX, ma differiscono dai dati di laboratorio di Lighthouse, i consigli di Lighthouse potrebbero essere di valore limitato. Ciò può accadere in particolare per i problemi di CLS post-caricamento e per i Core Web Vitals di interattività (FID e INP), per i quali i controlli basati su dati di laboratorio sono meno utili.
Search Console
Search Console misura il traffico dalla rete di ricerca e il rendimento del tuo sito, inclusi i Core Web Vitals. È 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 non lo è per valutare il rendimento della ricerca e le prestazioni della pagina in modi che altri strumenti Google non offrono. La presentazione dei dati CrUX e il raggruppamento delle pagine in base alla somiglianza offrono nuovi insight su come i miglioramenti del rendimento influiscono su intere categorie di pagine.
Quando non utilizzare Search Console
Search Console potrebbe non essere adatto per i progetti che utilizzano strumenti di terze parti diversi che raggruppano le pagine in base alla somiglianza o 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 determinati Core Web Vitals nel complesso, ma le pagine di esempio sembrano superare gli stessi Core Web Vitals. Questo può accadere quando un gruppo contiene pagine con coda lunga o visitate raramente che potrebbero essere più lente da caricare, in quanto è meno probabile che vengano memorizzate nella cache. Quando queste pagine sono presenti in volumi sufficienti nella coda lunga, possono influenzare la percentuale di superamento complessiva del gruppo.
Faro
Lighthouse è uno strumento di laboratorio che fornisce opportunità specifiche per migliorare le prestazioni della pagina. I flussi utente di Lighthouse consentono inoltre agli sviluppatori di creare script per i flussi di interazione per i test delle prestazioni oltre al caricamento pagina.
Lighthouse-CI è uno strumento correlato che esegue Lighthouse durante le build e i deployment dei progetti per facilitare i test di regressione delle prestazioni. Presenta un report Lighthouse insieme alle richieste di pull e monitora le metriche sul rendimento nel tempo.
Quando utilizzare Lighthouse
Lighthouse è eccellente per trovare opportunità di miglioramento delle prestazioni durante lo sviluppo sia in ambienti locali che di gestione temporanea. Lighthouse CI è altrettanto utile nelle fasi di build e deployment negli ambienti di gestione temporanea e di produzione, dove sono necessari test di regressione delle prestazioni per preservare esperienze utente positive.
Quando non utilizzare Lighthouse
Lighthouse (o Lighthouse CI) non sostituisce i dati reali. Lighthouse è principalmente uno strumento di diagnostica che elenca i potenziali problemi e le best practice di un caricamento pagina predefinito. I consigli visualizzati potrebbero non corrispondere sempre alle prestazioni riscontrate dagli utenti.
Sebbene Lighthouse possa essere utilizzato per diagnosticare i siti di produzione tramite strumenti come PageSpeed Insights, l'ideale sarebbe utilizzarlo negli ambienti di sviluppo e integrazione continua per risolvere i problemi di prestazioni prima che raggiungano la produzione.
I controlli forniti da Lighthouse sono disponibili anche tramite "Approfondimenti" nel riquadro Prestazioni di Chrome DevTools, che fornisce un'analisi più approfondita delle prestazioni di una pagina.
Il riquadro Prestazioni in Chrome DevTools
Chrome DevTools è una raccolta di strumenti per sviluppatori integrati nel browser, tra cui il riquadro Prestazioni. Il riquadro Prestazioni è uno strumento di lab che prevede due "modalità":
Quando apri per la prima volta il riquadro Prestazioni, viene visualizzata una schermata Metriche live che mostra la metrica Core Web Vitals corrente, con la possibilità di importare i dati sul campo da CrUX. È utile come visualizzazione "live" del rendimento mentre interagisci con la pagina per cercare di scoprire problemi di prestazioni, in particolare per i problemi post-caricamento che potresti riscontrare con le metriche CLS e INP.
In secondo luogo, il riquadro Prestazioni consente agli sviluppatori di acquisire un profilo (o una traccia) di tutte le attività della pagina durante il caricamento della pagina o un periodo di tempo registrato. Questa visualizzazione offre informazioni approfondite su tutto ciò che osserva in varie dimensioni, come l'attività di rete, rendering, pittura e scripting, nonché i Core Web Vitals di una pagina. Include anche approfondimenti, simili a quelli forniti da Lighthouse.
Quando utilizzare il riquadro Prestazioni
Il riquadro Prestazioni deve essere utilizzato dagli sviluppatori per ottenere informazioni approfondite sulle prestazioni di una determinata pagina.
La visualizzazione delle metriche live può essere utilizzata per comprendere rapidamente le caratteristiche attuali delle prestazioni della pagina e anche per individuare potenziali problemi durante l'interazione con la pagina.
La visualizzazione della traccia è particolarmente utile per eseguire il debug dei problemi di reattività che influiscono su INP. Una volta identificata e ripetibile un'interazione con una risposta scadente, il riquadro Prestazioni può fornire una vasta gamma di dati su ciò che accade nel browser per aiutare a comprendere il problema, dal blocco del thread principale agli stack di chiamate JavaScript, fino al lavoro di rendering.
Quando non utilizzare il riquadro Prestazioni
Il riquadro Prestazioni è uno strumento per sviluppatori che fornisce principalmente dati di laboratorio, anche se con un certo contesto sul campo di 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 alle prime armi o per chi non ricopre ruoli di sviluppatore. Tuttavia, la visualizzazione delle metriche live con cui si apre il riquadro risolve questo 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 che i Core Web Vitals del tuo sito web rimangano in buono stato
Quando si lavora per migliorare l'esperienza utente, è meglio considerare il processo come un ciclo continuo. Per migliorare i Core Web Vitals e altre metriche sul rendimento, un approccio potrebbe essere:
- Valutare lo stato del sito web e identificare i pain point.
- Esegui il debug e ottimizza.
- Monitora con strumenti di integrazione continua per rilevare e prevenire le regressioni.
Passaggio 1: valuta lo stato del sito web e identifica le opportunità di miglioramento
Per valutare lo stato di un sito web, è meglio iniziare con i dati sul campo.
- Utilizza PageSpeed Insights per visualizzare le metriche generali dell'esperienza di Core Web Vitals sull'origine e informazioni specifiche su un singolo URL.
- Search Console può essere utile per identificare le pagine che devono essere migliorate, se la sua funzionalità di raggruppamento delle pagine funziona bene per il tuo sito.
- Se disponi di dati RUM, spesso questa è l'opzione migliore per identificare pagine o segmenti di traffico particolari con problemi.
Che tu analizzi i dati dei campi raccolti autonomamente o i dati CrUX, questo primo passaggio è fondamentale. Se non raccogli dati sul campo, i dati CrUX potrebbero essere sufficienti per guidarti, 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 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 viene considerata "buona".
Se hai in mente una pagina specifica di cui vuoi esaminare il rendimento, utilizza quella. Per una visualizzazione complessiva di un sito quando inizi l'ottimizzazione, ti consigliamo di iniziare dalla home page, in quanto in genere è una delle pagine più popolari di molti siti.
Inizialmente, concentrati sulla sezione Scopri l'esperienza dei tuoi utenti reali di PSI. Vedrai fino a quattro visualizzazioni dei dati: per dispositivi mobili e desktop per l'URL inserito e per l'intera origine. Confrontali e scopri in che cosa differiscono. I dispositivi mobili sono in genere meno efficienti dei computer, in quanto sono dispositivi con più vincoli di risorse che operano in condizioni di rete potenzialmente meno stabili. Se i dati dell'URL e dell'origine sono significativamente diversi, prova a capire il motivo: le home page sono spesso le prime pagine visitate (ovvero una pagina di destinazione), quindi possono essere più lente rispetto all'origine, in quanto gli utenti subiscono l'impatto di una cache del browser non inizializzata. Le pagine successive verranno probabilmente caricate più velocemente, poiché tutti gli asset condivisi verranno memorizzati nella cache, riducendo i dati aggregati a livello di origine.
PSI mostra anche tutti e tre i Core Web Vitals (LCP, CLS e INP) oltre alle metriche diagnostiche TTFB e FCP. Alcuni dei Core Web Vitals non sono conformi e di quanto? In questo modo, saprai dove concentrare i tuoi sforzi.
Comprendi le relazioni tra questi numeri, in particolare per LCP. Se l'LCP è lento, come in questo esempio, esamina il TTFB e l'FCP, che sono entrambi tappe fondamentali per questa metrica. In questo esempio abbiamo un TTFB di 1,8 secondi, il che renderà 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 saperne di più, consulta la guida Ottimizza il TTFB. L'FCP richiede un altro secondo, il che potrebbe essere ancora una volta indicativo di reti più lente. In questo esempio, l'LCP non è molto dopo l'FCP, il che suggerisce che la risorsa LCP è ben ottimizzata una volta caricata la pagina stessa. CrUX ora mostra anche maggiori informazioni diagnostiche nei tipi di risorse e nelle sottoparti, il che ti aiuta anche a diagnosticare i problemi relativi a LCP.
Per 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 su cui fornirà consigli) o di un problema di CLS post-caricamento che Lighthouse non rileverà. Per ulteriori informazioni, consulta la guida Ottimizza CLS.
Per la reattività, esamina i punteggi INP. Esamina i controlli TBT in Lighthouse per verificare se durante il caricamento iniziale della pagina vengono eseguite molte elaborazioni JavaScript, che potrebbero influire su INP. INP può essere una metrica difficile da migliorare, quindi consulta la guida all'ottimizzazione di INP per ulteriori informazioni.
Identifica le pagine con un rendimento scarso in Search Console
Sebbene PSI sia utile quando hai un URL specifico che vuoi testare o per il sito nel suo complesso, Search Console può aiutarti a indirizzare i tuoi sforzi verso tipi di pagine particolari. Ciò è particolarmente utile se molte pagine condividono temi o tecnologie comuni e Search Console riesce a identificarli.
Il report Core Web Vitals in Search Console mostra il quadro generale del rendimento del tuo sito web, ma puoi comunque visualizzare in dettaglio pagine specifiche che richiedono attenzione. Con Search Console puoi anche:
- Identificare i singoli gruppi di pagine che devono essere migliorati e quelli che offrono una buona esperienza utente.
- Ottieni dati granulari sul rendimento per URL raggruppati per stato, metrica e gruppi di pagine web simili (ad esempio pagine dei dettagli del prodotto su un sito web di e-commerce).
- Ricevi report dettagliati che raggruppano gli URL 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 meglio i problemi relativi a queste pagine.
Passaggio 2: esegui il debug e ottimizza
Nel passaggio 1, dovresti aver identificato le pagine che richiedono miglioramenti delle prestazioni e anche quali metriche di Core Web Vitals vuoi migliorare. Puoi utilizzare gli strumenti di Google per ottenere ulteriori informazioni e comprendere la causa principale per identificare il problema.
- Esamina i controlli di Lighthouse per ricevere indicazioni generali sulla pagina.
- Utilizza la visualizzazione delle metriche live del riquadro Prestazioni per analizzare i Core Web Vitals in tempo reale.
- Utilizza 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:
Scopri le opportunità con Lighthouse
PageSpeed Insights esegue Lighthouse per te. È anche possibile eseguire Lighthouse da Chrome DevTools, il che è utile per convalidare le correzioni localmente, anche se il riquadro Prestazioni (trattato di seguito) è uno strumento più completo per identificare e risolvere i problemi di prestazioni localmente.
Un punto chiave è verificare che il controllo di Lighthouse replichi i problemi che stai cercando di risolvere (ad esempio, LCP lento o problemi di CLS). Per impostazione predefinita, Lighthouse valuta l'esperienza utente solo durante il caricamento della pagina. Poiché si tratta di uno strumento di lab, esclude anche INP a favore di TBT.
Quando le metriche di Lighthouse suggeriscono un problema simile a quello che stai cercando di risolvere, la ricchezza di informazioni nei 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 dei problemi relativi a una metrica specifica:
Per INP, utilizza i controlli TBT per identificare i problemi che possono potenzialmente influire su queste metriche, ma tieni presente che senza interazioni, Lighthouse ha una capacità di diagnosi limitata.
Analizza in tempo reale con la schermata delle metriche live di Chrome DevTools
La schermata delle metriche in tempo reale di Chrome DevTools nel riquadro Prestazioni 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 l'INP e le variazioni del layout che si verificano dopo il caricamento. È anche possibile visualizzare informazioni più dettagliate su ogni metrica:
Questa visualizzazione fornisce molte informazioni utili per identificare i problemi di prestazioni e può persino estrarre informazioni sui campi da CrUX. Per ulteriori informazioni, puoi eseguire il drill-down con una traccia.
Analizza in dettaglio con il riquadro Prestazioni
Il riquadro Prestazioni di Chrome DevTools ti consente di registrare un profilo (o una traccia) di tutto il comportamento della pagina durante un periodo di tempo registrato.
Gli insight sul rendimento sono disponibili nel riquadro laterale Approfondimenti. Inoltre, mostra le metriche di Core Web Vitals insieme ai relativi valori dei campi, se disponibili.
La traccia Variazioni di layout evidenzia le variazioni di layout e, se fai clic su queste, vengono visualizzati maggiori dettagli sugli elementi che sono stati spostati per il debug di CLS.
Le tempistiche chiave, come LCP, sono mostrate nella sezione Tempistiche disponibile nella parte inferiore della traccia. Fai clic su queste opzioni per maggiori dettagli.
Le attività lunghe (che possono causare problemi di INP) sono evidenziate anche con triangoli rossi nel flame chart.
Queste funzionalità, insieme alle informazioni contenute in altre parti del riquadro Prestazioni, possono aiutarti a determinare se le correzioni stanno avendo un effetto sui Core Web Vitals di una pagina.
Esegui il debug dei Core Web Vitals sul campo
Gli strumenti di laboratorio non sono sempre 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 i propri dati sul campo, in quanto tengono conto di fattori che i dati di laboratorio non possono considerare.
Per saperne di più, consulta Eseguire il debug delle prestazioni sul campo.
Passaggio 3: monitora le modifiche
Dopo aver risolto i problemi, devi assicurarti che le correzioni abbiano l'effetto desiderato e che i nuovi problemi non influiscano sui 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 e il monitoraggio regolare dei dati sul campo per garantire che ciò avvenga.
Monitora le richieste di prestazioni negli ambienti di integrazione continua (CI)
Lighthouse-CI ti consente di eseguire automaticamente i controlli di Lighthouse sui commit del codice per evitare che le regressioni delle prestazioni entrino nel codice. In questo modo è possibile controllare i tempi di rendimento (che sono soggetti a variabilità) o solo i controlli del rendimento, come strumento di linting per evitare pratiche non corrette nel codice.
Visualizza le tendenze relative allo stato del sito web con i dati sul campo
Anche se l'obiettivo è individuare e risolvere tutti i problemi di prestazioni prima che arrivino in produzione, il monitoraggio dei dati sul campo utilizzando RUM è essenziale per trovare quelli che sfuggono. Esistono molti prodotti RUM commerciali disponibili che possono aiutarti in questo. 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 i vari strumenti CrUX come analisi di base delle tendenze dei dati sul campo.
Conclusione
Per garantire esperienze utente rapide e piacevoli, è necessario adottare un approccio incentrato sulle prestazioni e un flusso di lavoro che garantisca i progressi. Con gli strumenti e i processi giusti per controllare, eseguire il debug e monitorare, creare esperienze utente straordinarie e rimanere entro le soglie definite per i Core Web Vitals è alla tua portata.