Combina gli strumenti Google per controllare, migliorare e monitorare il tuo sito web in modo efficace.
Pubblicato: 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à esaminato un flusso di lavoro per migliorare i Segnali web essenziali per il tuo sito web, ma il punto di partenza dipende dal fatto che tu stia raccogliendo i tuoi dati sul campo. Il punto di arrivo dipende dagli strumenti di Google che ritieni utili per diagnosticare e risolvere i problemi di esperienza utente.
I Segnali web essenziali vengono misurati al meglio sul campo
I Segnali web essenziali sono progettati specificamente per misurare l'esperienza degli utenti sul tuo sito web. Si tratta di metriche incentrate sull'utente. Strumenti basati su lab come Lighthouse sono strumenti di diagnostica per evidenziare potenziali problemi di rendimento e best practice. Gli strumenti basati su test di laboratorio vengono eseguiti in determinate condizioni predefinite e potrebbero non riflettere le misurazioni reali dei Segnali web essenziali che i tuoi utenti riscontrano.
Ad esempio, Lighthouse è uno strumento basato su test di laboratorio che esegue test con limitazione simulata 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 una piccola parte della grande varietà di condizioni di rete e funzionalità dei dispositivi e, pertanto, potrebbero non riflettere l'esperienza degli utenti sui tuoi siti.
Anche gli strumenti basati su laboratorio come Lighthouse in genere eseguono un "caricamento a freddo" di una pagina web come visitatore completamente nuovo. Questo è spesso il caricamento più lento, ma nella vita reale i visitatori potrebbero avere alcuni asset memorizzati nella cache se hanno visitato il sito in precedenza o durante la navigazione. Anche i nuovi visitatori e gli strumenti potrebbero visualizzare il sito in modo diverso con i banner dei cookie o altri contenuti.
In breve, anche se gli strumenti basati su test di laboratorio possono fornire un'indicazione di potenziali problemi di rendimento e aiutarti a eseguire il debug e l'iterazione, potrebbero non rappresentare l'esperienza effettiva dei tuoi visitatori sul sito web. Utilizza i dati sul campo per misurare le prestazioni reali e strumenti basati su test di laboratorio come Lighthouse per la diagnostica su come migliorarle. Vedi anche la sezione Quando utilizzare Lighthouse.
Google misura i segnali web essenziali tramite il Rapporto sull'esperienza utente di Chrome (CrUX). Si tratta di un set di dati pubblico raccolto da utenti reali di Chrome. È la base di molti strumenti Google e di terze parti che generano report sui Segnali web essenziali di un sito.
Tuttavia, CrUX presenta dei limiti. Spesso può indicare quando si verifica un problema, ma spesso non dispone di dati sufficienti per indicarne il motivo.
Se possibile, raccogli i tuoi dati sul campo
Il miglior set di dati per migliorare il rendimento del sito web sul campo è quello che crei. Si inizia con la raccolta dei dati dei campi dai visitatori del tuo sito web. La modalità dipende dalle dimensioni della tua organizzazione e dal fatto che tu voglia pagare per una soluzione di terze parti o crearne una personalizzata.
Le soluzioni a pagamento misureranno quasi certamente le Core Web Vitals (e altre metriche di 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 una che abbia i mezzi per permettersi una soluzione di terze parti. In questi casi, la libreria web-vitals di Google ti aiuterà a raccogliere tutte le metriche web essenziali. Tuttavia, sarai responsabile della modalità di segnalazione, archiviazione e analisi di questi dati.
Se utilizzi già Google Analytics, ma non hai iniziato a raccogliere i tuoi dati sul campo, potresti avere l'opportunità di utilizzare la libreria web-vitals per inviare a Google Analytics i 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 le metriche web essenziali. Prima di stabilire un flusso di lavoro, una panoramica generale di ogni strumento può aiutarti a capire quali sono 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 di 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 disponga di un numero sufficiente di campioni nel set di dati CrUX. I dati di CrUX sono disponibili tramite vari strumenti CrUX per l'accesso programmatico e per gli strumenti visivi utilizzati dagli utenti.
Quando utilizzare CrUX
Anche se raccogli i tuoi dati sul campo, CrUX è comunque utile. Sebbene CrUX rappresenti un sottoinsieme di utenti Chrome, è utile confrontare i dati sul campo del tuo sito web per vedere come si allineano ai dati CrUX. Ognuno presenta vantaggi e svantaggi, il che può comportare differenze. Se non raccogli alcun dato di campo per il tuo sito web, CrUX è particolarmente utile per fornire una panoramica di alto livello, 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 menzionati 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 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 in Chrome e in altri browser che supportano le metriche di Segnali web essenziali.
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, poiché CrUX non sarà un'opzione. In alternativa, dovrai fare affidamento sui dati di laboratorio, ma con le limitazioni descritte in precedenza, ovvero che potrebbero non essere rappresentativi.
Poiché i dati forniti da CrUX sono una media mobile degli ultimi 28 giorni, non è uno strumento ideale durante lo sviluppo, in quanto ci vorrà un po' di tempo prima che i miglioramenti vengano riflessi nel set di dati CrUX.
Infine, in quanto set di dati pubblico, CrUX è limitato alla quantità di informazioni che può rendere disponibili e alle modalità di esecuzione delle query su questi dati. L'acquisizione dei tuoi dati RUM ti consente di raccogliere maggiori dettagli (ad esempio, l'elemento LCP) e segmentare ulteriormente i dati per identificare i problemi. Gli utenti che hanno eseguito l'accesso hanno un'esperienza migliore o peggiore con i segnali web essenziali 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 riporta i dati sul campo di CrUX e quelli di laboratorio 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 origine, sia per gli utenti di dispositivi mobili che per quelli desktop. È una buona scelta per una panoramica iniziale dei Segnali web essenziali per una pagina o un sito. Consente inoltre di visualizzare i dati di Core Web Vitals per altri siti, ad esempio quelli della concorrenza.
PSI fornisce anche dati Lighthouse, che forniscono consigli utili per migliorare i Segnali web essenziali, se le metriche sono allineate. Se non sono allineati, i consigli di Lighthouse potrebbero essere meno pertinenti.
Poiché Lighthouse viene eseguito dal server, può formare una baseline 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 CrUX sono disponibili solo quando i siti soddisfano determinati criteri di idoneità, incluse 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 laboratorio di Lighthouse.
Allo stesso modo, se disponi solo di dati CrUX a livello di origine anziché dell'URL specifico da testare, ciò limita anche l'utilità di correlare i dati sul campo a livello di origine con le diagnostiche di laboratorio a livello di pagina. Avere i dati dei campi a livello di origine è comunque molto utile come riepilogo del rendimento del sito e i controlli di Lighthouse possono essere d'aiuto, ma in questo caso è necessario prestare particolare attenzione.
Infine, laddove i dati a livello di pagina sono disponibili in CrUX, ma differiscono dai dati di laboratorio di Lighthouse, i suggerimenti di Lighthouse potrebbero essere di valore limitato. Ciò può accadere in particolare per i problemi di CLS post-caricamento e per le metriche Core Web Vitals di interattività (FID e INP), per le quali gli audit basati su 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 le pagine simili (ad esempio, le pagine che utilizzano lo stesso modello) in una singola valutazione del gruppo. Search Console include anche un report Core Web Vitals basato sui dati sul campo di CrUX.
Quando utilizzare Search Console
Search Console è adatta sia agli sviluppatori sia a chi non ricopre questo ruolo per valutare il rendimento della ricerca e delle pagine in modi diversi rispetto ad altri strumenti Google. La presentazione dei dati CrUX e il raggruppamento delle pagine per somiglianza offrono nuove informazioni 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 diversi strumenti di terze parti che raggruppano le pagine per somiglianza o se un sito web non è rappresentato nel set di dati CrUX.
Il raggruppamento delle pagine può anche essere un po' fuorviante quando le pagine di esempio di un gruppo hanno caratteristiche diverse dal resto del gruppo, ad esempio se il gruppo non supera particolari metriche Core Web Vitals nel complesso, ma le pagine di esempio sembrano superare le stesse metriche Core Web Vitals. Ciò può accadere quando un gruppo contiene pagine long tail o visitate raramente che potrebbero essere più lente da caricare, in quanto è meno probabile che vengano memorizzate nella cache. Quando i volumi di queste pagine nella coda lunga sono sufficienti, possono influenzare il tasso di superamento complessivo del gruppo.
Faro
Lighthouse è uno strumento di laboratorio che offre opportunità specifiche per migliorare il rendimento delle pagine. I flussi utente di Lighthouse consentono inoltre agli sviluppatori di creare script per i flussi di interazione per i test delle prestazioni oltre il caricamento della 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 pull e monitora le metriche di rendimento nel tempo.
Quando utilizzare Lighthouse
Lighthouse è ideale per trovare opportunità di miglioramento delle prestazioni durante lo sviluppo in ambienti locali e di staging. Lighthouse CI è altrettanto utile nelle fasi di build e deployment negli ambienti di gestione temporanea e produzione, in cui sono necessari test di regressione delle prestazioni per preservare una buona esperienza utente.
Quando non utilizzare Lighthouse
Lighthouse (o Lighthouse CI) non è un sostituto dei dati sul campo. Lighthouse è principalmente uno strumento diagnostico che elenca i potenziali problemi e le best practice da un caricamento pagina predefinito. I consigli che vengono visualizzati potrebbero non corrispondere sempre al rendimento riscontrato dai tuoi utenti.
Sebbene Lighthouse possa essere utilizzato per diagnosticare i siti di produzione tramite strumenti come PageSpeed Insights, idealmente dovrebbe essere utilizzato negli ambienti di sviluppo e di integrazione continua per risolvere i problemi di rendimento 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 del rendimento di una pagina.
Il riquadro Prestazioni in Chrome DevTools
Chrome DevTools è una raccolta di strumenti di sviluppo integrati nel browser, incluso il riquadro Prestazioni. Il pannello Prestazioni è uno strumento di laboratorio composto da due "modalità":
Quando viene aperto per la prima volta il pannello Prestazioni, una schermata Metriche in tempo reale fornisce 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 tentare di scoprire problemi di rendimento, in particolare per i problemi post-caricamento che potresti riscontrare con le metriche CLS e INP.
In secondo luogo, il pannello Rendimento consente agli sviluppatori di acquisire un profilo (o una traccia) di tutta l'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 dimensioni come attività di rete, rendering, pittura e scripting, nonché sulle Core Web Vitals di una pagina. Include anche approfondimenti simili a quelli forniti da Lighthouse.
Quando utilizzare il riquadro Prestazioni
Gli sviluppatori devono utilizzare il pannello Prestazioni per ottenere informazioni dettagliate sulle prestazioni di una determinata pagina.
La visualizzazione delle metriche live può essere utilizzata per comprendere rapidamente le caratteristiche di rendimento attuali 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 interessano l'INP. Una volta identificata e ripetuta un'interazione con scarsa risposta, il pannello Rendimento può fornire una grande quantità di dati su ciò che accade nel browser per aiutare a comprendere il problema, dal blocco del thread principale agli stack di chiamate JavaScript al lavoro di rendering.
Quando non utilizzare il pannello Rendimento
Il pannello Rendimento è uno strumento per sviluppatori che fornisce principalmente dati di laboratorio, anche se con un po' di contesto sul campo di CrUX. Non sostituisce i dati dei campi.
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 ricopre ruoli non di sviluppo. Tuttavia, la visualizzazione delle metriche in tempo reale con cui si apre il pannello 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 Segnali web essenziali del tuo sito web rimangano in buono stato
Quando lavori per migliorare l'esperienza utente, è meglio pensare al processo come a un ciclo continuo. Per migliorare i Core Web Vitals e altre metriche di rendimento, un approccio potrebbe essere:
- Valuta lo stato del sito web e identifica i punti critici.
- 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
È meglio iniziare con i dati sul campo per valutare lo stato del sito web.
- Utilizza PageSpeed Insights per visualizzare le metriche complessive dell'esperienza di Segnali web essenziali sull'origine e informazioni specifiche su un singolo URL.
- Search Console può essere utile per identificare le pagine che necessitano di miglioramenti, in quanto la 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 specifici con problemi.
Che tu analizzi i dati di campo che raccogli personalmente o i dati CrUX, questo primo passaggio è fondamentale. Se non raccogli dati sul campo, i dati CrUX potrebbero essere sufficienti a guidarti, a condizione che il tuo sito web sia rappresentato nel set di dati.
Analizzare 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 esaminare il rendimento, utilizzala. Per una visione generale di un sito quando inizi a ottimizzarlo, ti consigliamo di iniziare dalla home page, in quanto è in genere una delle pagine più visitate di molti siti.
Concentrati inizialmente sulla sezione Cosa sperimentano i tuoi 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 le differenze. I dispositivi mobili in genere hanno prestazioni inferiori rispetto ai computer, in quanto sono dispositivi con risorse più limitate che operano in condizioni di rete potenzialmente meno stabili. Se i dati di URL e origine sono molto diversi, cerca di 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 completo di una cache del browser non inizializzata. Le pagine successive verranno caricate più rapidamente, poiché tutti gli asset condivisi verranno memorizzati nella cache, riducendo i dati aggregati a livello di origine.
PSI mostra anche tutti e tre i segnali web essenziali (LCP, CLS e INP) più le metriche diagnostiche TTFB e FCP. Qualcuna delle metriche di Core Web Vitals non viene soddisfatta e di quanto? In questo modo, saprai dove concentrare i tuoi sforzi.
Comprendi le relazioni tra questi numeri, in particolare per LCP. Se LCP è lento, come in questo esempio, esamina TTFB e FCP, che sono entrambi traguardi 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 ulteriori informazioni, consulta la guida all'ottimizzazione del TTFB. L'FCP richiede un altro secondo, il che potrebbe indicare reti più lente. In questo esempio, l'LCP non è molto successivo all'FCP, il che suggerisce che la risorsa LCP è ben ottimizzata una volta caricata la pagina. CrUX ora mostra anche maggiori informazioni diagnostiche nei tipi di risorse e nelle sottosezioni, il che ti aiuta anche a diagnosticare i problemi LCP.
Per CLS, esamina i punteggi CLS di CrUX e Lighthouse per verificare 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 all'ottimizzazione del CLS.
Per la reattività, esamina i punteggi INP. Esamina gli audit TBT in Lighthouse per verificare se durante il caricamento iniziale della pagina viene eseguita un'elaborazione JavaScript elevata, il che probabilmente influisce su INP. INP può essere una metrica difficile da migliorare, quindi consulta la guida all'ottimizzazione di INP per saperne di più.
Identificare le pagine con un 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 concentrare i tuoi sforzi su particolari tipi di pagine. Ciò è particolarmente utile se molte pagine condividono temi o tecnologie comuni e Search Console è in grado di identificarli correttamente.
Il report Segnali web essenziali in Search Console mostra un quadro generale del rendimento del tuo sito web, ma puoi comunque esaminare in dettaglio le 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 le 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 il mobile che per il desktop.
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 le metriche dei Segnali web essenziali che vuoi migliorare. Puoi utilizzare gli strumenti Google per ottenere ulteriori informazioni per comprendere la causa principale e identificare il problema.
- Esamina i controlli di Lighthouse per ricevere indicazioni generali per la pagina
- Utilizza la visualizzazione delle metriche in tempo reale del pannello Rendimento per analizzare i Core Web Vitals in tempo reale.
- Utilizza la traccia 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 opportunità con Lighthouse
PageSpeed Insights esegue Lighthouse per te. È anche possibile eseguire Lighthouse da Chrome DevTools, il che è utile per convalidare le correzioni a livello locale, anche se il riquadro Prestazioni (trattato di seguito) è uno strumento più completo per identificare e risolvere i problemi di prestazioni a livello locale.
Un punto chiave è verificare che il controllo Lighthouse replichi i problemi che stai cercando di risolvere (ad esempio, LCP lento o problemi CLS). Per impostazione predefinita, Lighthouse valuta l'esperienza utente solo 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 ricchezza di informazioni nei suoi audit può aiutarti a identificare i problemi e suggerire soluzioni.
Puoi filtrare i controlli in modo da visualizzare solo i segnali web essenziali che ti interessano e 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.
Analizzare 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 Segnali web essenziali in tempo reale durante il caricamento della pagina e durante la navigazione. Per questo motivo, può acquisire l'INP e gli spostamenti 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 visualizzare in dettaglio i dati con una traccia.
Visualizzare in dettaglio con il riquadro Prestazioni
Il pannello Prestazioni di Chrome DevTools consente di registrare un profilo (o una traccia) di tutto il comportamento della pagina durante un periodo di tempo registrato.
Gli approfondimenti sul rendimento sono disponibili nel riquadro laterale Approfondimenti. Vengono mostrate anche le metriche Core Web Vitals insieme ai valori sul campo, se disponibili.
La traccia Variazioni di layout evidenzia le variazioni di layout e, se fai clic su queste, vengono visualizzati ulteriori dettagli sugli elementi che hanno subito variazioni per il debug della metrica CLS.
I tempi chiave, come LCP, vengono visualizzati nella sezione Tempi disponibile nella parte inferiore della traccia. Fai clic su questi elementi per ulteriori dettagli.
Anche le attività lunghe (che possono causare problemi di INP) sono evidenziate con triangoli rossi nel grafico a fiamma.
Queste funzionalità, così come le informazioni in altre sezioni del pannello Rendimento, possono aiutarti a determinare se le correzioni hanno un effetto sui Segnali web essenziali di una pagina.
Eseguire il debug dei Segnali web essenziali sul campo
Gli strumenti di laboratorio non sempre riescono a identificare la causa di tutti i problemi relativi ai Core Web Vitals che interessano i tuoi utenti. Questo è uno dei motivi per cui è così importante raccogliere i dati sul campo, in quanto tengono conto di fattori che i dati di laboratorio non possono considerare.
Per saperne di più, consulta la sezione Eseguire il debug delle prestazioni sul campo.
Passaggio 3: monitora le modifiche
Una volta risolti i problemi, devi assicurarti che abbiano l'effetto richiesto e che i nuovi problemi non interrompano i tuoi Segnali web essenziali. 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 garantire che ciò avvenga.
Monitorare le richieste di prestazioni negli ambienti di integrazione continua (CI)
Lighthouse-CI ti consente di eseguire automaticamente audit Lighthouse sui commit di codice per impedire l'inserimento di regressioni delle prestazioni nel codice. Può controllare i tempi di rendimento (che sono soggetti a variabilità) o solo i controlli del rendimento, come strumento di analisi statica del codice per evitare pratiche errate nel codice.
Visualizzare le tendenze relative all'integrità del sito web con i dati dei campi
Sebbene tu debba cercare di rilevare e correggere tutti i problemi di prestazioni prima che vengano inseriti 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 personalizzate e sistemi di avviso.
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 eseguire audit, debug e monitoraggio, creare esperienze utente straordinarie e rimanere entro le soglie definite per i valori di Segnali web essenziali è alla tua portata.