Indice dei contenuti dell'articolo:
È stato un compito sempre più difficile per Google quantificare la qualità dell’esperienza utente di un sito Web, portando alla creazione e allo sviluppo di strumenti per misurare ogni aspetto dell’esperienza utente. Gli strumenti spesso utilizzati per misurare l’esperienza dell’utente su un sito Web includono PageSpeed Insights, Lighthouse e Google Search Console .
In una mossa per rendere più facile per i webmaster monitorare e migliorare le loro esperienze utente, Google ha presentato il rapporto ” Core Web Vitals ” il 5 maggio 2020 nella Google Search Console . Il report trae i suoi dati dal motore Web Vital, semplificando il panorama dell’esperienza web in tre metriche omogenee. Google li definisce “le tre metriche più importanti per tutte le esperienze web”.
L’aggiornamento ha lo scopo di rendere più facile (almeno in teoria ma vedremo che così non è) per i webmaster e i proprietari di siti apportare miglioramenti ai loro siti Web senza dover assumere guru delle prestazioni o passare attraverso numerosi rapporti di analisi complessi . Ha anche lo scopo di aiutare Google a classificare i siti Web per la loro UX nelle ricerche.
Cosa sono i principali parametri vitali del web, ovvero i Core Web Vitals ?
I tre Core Web Vitals rappresentano le tre fasi distinte dell’esperienza utente: in relativo ordine possiamo definirli, l’esperienza di caricamento, l’interattività del sito e la stabilità visiva dei contenuti della pagina di un sito web. I tre sono progettati per essere miglioramenti quantificabili e coerenti a queste metriche che alla fine migliorano l’esperienza dell’utente nel “mondo reale”.
Utilizzando la console di ricerca di Google, puoi analizzare un sito web per vedere quanti URL sono classificati come “poveri”, “da migliorare” o “buoni”. Ciò rende l’analisi abbastanza semplice per i webmaster alle prime armi e i proprietari di siti web per comprendere il rapporto sul rendimento .
Quali metriche vengono misurate in Core Web Vitals?
Secondo Google, le tre metriche discusse di seguito vengono utilizzate come elementi vitali Web principali. Tuttavia, Google ha anche affermato che queste metriche sono destinate ad evolversi nel tempo e, quindi, è importante tenersi aggiornati con le ultime metriche di Google. Le tre metriche sono;
- Largest Contentful Paint (LCP)
- Cumulative Layout Shift (CLS)
- First Input Delay (FID)
Tradotto per rendere meglio l’idea :
- Il tempo del caricamento del contenuto (LCP)
- Spostamento cumulativo del layout (CLS)
- Ritardo primo ingresso (FID)
Large Contentful Paint (LCP)
La prima metrica analizzata nei parametri vitali di qualsiasi sito web online, LCP misura le prestazioni di carico; il tempo medio necessario per caricare l’elemento più grande del contenuto della pagina nella visualizzazione.
LCP (Largest Contentful Paint) è uno dei tre Core Web Vitals di Google che misura la velocità di caricamento della pagina web. In particolare, LCP misura il tempo che intercorre tra il momento in cui un utente clicca sul link per accedere alla pagina e quando il contenuto principale della pagina è stato completamente caricato e visualizzato. Un LCP elevato indica una lunga attesa per l’utente e una scarsa esperienza di navigazione.
La dimensione dell’elemento è determinata principalmente dalla sua dimensione visibile all’utente nel viewport. Qualsiasi contenuto al di fuori della visualizzazione dell’utente, ritagliato o invisibile, non conterà per quantificare la dimensione dell’elemento. Inoltre, solo le categorie di elementi specifiche sono considerate come parte dell’LCP:
- Elementi dell’immagine
- Elementi con immagini di sfondo caricati tramite la funzione URL invece del gradiente CSS
- Elementi dell’immagine all’interno di un elemento SVG
- Elementi video
- Elementi a livello di blocco contenenti nodi di testo o qualsiasi altro elemento a livello di riga
Poiché l’elemento più grande di una pagina può cambiare durante il caricamento della pagina, Google considera l’elemento più nuovo e più grande fino a quando la pagina non viene caricata completamente o l’utente inizia a interagire con i contenuti della pagina.
Per migliorare il LCP, ci sono diverse strategie che possono essere adottate:
- Ottimizzazione delle immagini: ridurre le dimensioni delle immagini e utilizzare formati ottimizzati come JPEG 2000, WebP o AVIF per ridurre il tempo di caricamento.
- Utilizzo di una connessione veloce: se possibile, utilizzare una connessione veloce per il caricamento delle risorse.
- Utilizzo di un Content Delivery Network (CDN): utilizzare un CDN per distribuire le risorse in modo da ridurre la distanza tra l’utente e il server.
- Minimizzare il codice JavaScript: ridurre il codice JavaScript inutilizzato o non essenziale per migliorare il tempo di caricamento delle pagine.
- Utilizzo di font asincroni: caricare i font in modo asincrono per evitare di bloccare il caricamento delle risorse.
- Utilizzo di lazy loading: caricare solo i contenuti essenziali all’inizio e caricare il resto del contenuto in seguito a seconda delle esigenze dell’utente.
- Monitoraggio e analisi dei dati: utilizzare strumenti come Google Analytics o Google Search Console per monitorare il LCP e identificare eventuali problemi.
Ritardo primo ingresso – First Input Delay (FID)
FID è una metrica che misura l’interattività di un sito web. Misura il tempo impiegato dal browser per rispondere a un clic su un pulsante, collegamento o un controllo basato su JavaScript da parte dell’utente.
FID (First Input Delay) è uno dei tre Core Web Vitals di Google che misura la reattività della pagina web. In particolare, FID misura il tempo che intercorre tra quando un utente effettua un’interazione (ad esempio cliccare su un pulsante o inserire un testo in una casella di testo) e quando la pagina inizia a reagire all’interazione. Un alto FID indica una lunga attesa per l’utente e una scarsa reattività della pagina.
Tuttavia, a volte il thread principale è occupato e non è in grado di rispondere ai comandi dell’utente. Questa viene definita latenza di input, spesso causata dal fatto che il browser dell’utente è troppo occupato a gestire file JavaScript pesanti. Quando il browser è in latenza di input, si verifica un ritardo tra l’input e l’azione.
Il ritardo del primo input è progettato per concentrarsi esclusivamente sugli eventi comandati dall’utente come tocchi, clic e pressioni di pulsanti invece che sulle interfacce sulla pagina come lo zoom e lo scorrimento.
Cumulative Layout Shift – Spostamento cumulativo del layout (CLS)
Sei mai stato a un clic dal selezionare un’immagine, un video o un collegamento su una pagina e improvvisamente sussulta, si aggiorna o si sposta e sei improvvisamente nell’AppStore? Quella mossa / scossa è causata da uno spostamento cumulativo del layout o in parole povere; quanto si sposta una pagina durante il caricamento. Google intende fortemente prevenire il CLS come esperienza negativa per l’utente che può essere seccato.
CLS (Cumulative Layout Shift) è uno dei tre Core Web Vitals di Google che misura la stabilità della pagina web. In particolare, CLS misura la quantità di spostamento dei contenuti sulla pagina durante il caricamento. Più alto è il valore di CLS, maggiore è la probabilità che gli utenti abbiano difficoltà a interagire con la pagina, ad esempio cliccando su un link o un pulsante, a causa degli spostamenti imprevisti.
Il browser misura CLS valutando due frame separati per le dimensioni delle rispettive finestre rispetto al movimento di elementi instabili nelle finestre. Il risultato è un prodotto della funzione distanza e della funzione impatto. Fondamentalmente, Google sarà in grado di dire quando gli elementi di una pagina si spostano troppo e li classificherà più in basso nelle pagine dei risultati di ricerca.
Per migliorare il CLS, ci sono diverse strategie che possono essere adottate:
- Utilizzo di una dimensione predefinita per le immagini: impostare una dimensione predefinita per le immagini in modo che il layout della pagina non cambi quando le immagini vengono caricate.
- Utilizzo di una dimensione predefinita per i video: impostare una dimensione predefinita per i video in modo che il layout della pagina non cambi quando i video vengono caricati.
- Utilizzo di font asincroni: caricare i font in modo asincrono per evitare di bloccare il caricamento delle risorse e di causare spostamenti imprevisti nel layout.
- Utilizzo di lazy loading: caricare solo i contenuti essenziali all’inizio e caricare il resto del contenuto in seguito a seconda delle esigenze dell’utente per evitare di causare spostamenti imprevisti nel layout.
- Utilizzo di un framework di sviluppo di interfacce: utilizzare un framework di sviluppo di interfacce come React o Angular per creare interfacce utente stabili.
- Utilizzo di un’animazione per l’inserimento di elementi: utilizzare un’animazione per l’inserimento di elementi per evitare di causare spostamenti imprevisti nel layout.
- Monitoraggio e analisi dei dati: utilizzare strumenti come Google Analytics o Google Search Console per monitorare il CLS e identificare eventuali problemi.
Quali strumenti puoi utilizzare per misurare i principali Core Web Vitals?
Poiché i tre principali elementi vitali del Web sono un elemento fondamentale nell’aggiornamento di Page Experience, Google incorpora le metriche negli strumenti comunemente utilizzati per ottimizzare le pagine da webmaster e SEO. Dal momento che tutti abbiamo bisogno di misurare il successo dei Core Web Vitals dei nostri siti, è giusto ottenere gli strumenti giusti per il lavoro.
PageSpeed Insights
PageSpeed Insights di Google è uno degli strumenti più utilizzati per misurare la velocità della pagina. Oltre a consentire al webmaster di visualizzare il punteggio della propria pagina, includono anche le metriche di Core Web Vitals che sono utili per l’utente poiché offrono loro informazioni su quanto è buona la pagina.
PageSpeed Insights è uno strumento eccellente per misurare il successo degli sforzi SEO . Tuttavia, non è l’opzione migliore se intendi ottimizzare il tuo sito per Core Web Vitals poiché ci sono molti dettagli mancanti nello strumento. Ad esempio, per controllare le pagine che necessitano di miglioramenti su specifici elementi vitali web di base, dovrai tornare alla console di ricerca di Google.
Google Search Console
Quando cerchi di controllare una determinata pagina per i suoi Core Web Vitals, accedi semplicemente alla Google Search Console del tuo sito web e seleziona il pulsante Core Web Vitals sulla barra laterale della console e verrà visualizzato un rapporto.
Se desideri controllare il rapporto, fai clic su “Tipo” e Google Search Console ti mostrerà le pagine che stanno attualmente eseguendo “Scarso”, “Da migliorare” o “Buono”. Dopo aver identificato le pagine che necessitano di ottimizzazione per i principali dati vitali di Google, puoi ora procedere a utilizzare PageSpeed Insights per visualizzare suggerimenti su come ottimizzare queste pagine specifiche.
Rapporto sull’esperienza utente di Chrome
Questo rapporto sull’esperienza utente di Chrome fornisce metriche reali su come gli utenti di Chrome percepiscono i siti web.
Le metriche sono guidate principalmente da dati reali. Il report confronta l’esperienza degli utenti effettivi di un sito Web con test locali o virtuali in ambienti simulati e definiti. Con questo confronto, sarai in grado di vedere chiaramente l’insieme di variabili che si formano e portano a una buona esperienza utente.
Chrome Dev Tools
Chrome Dev Tools è una suite di strumenti per lo sviluppo di siti Web incorporati in Google Chrome. Con questi strumenti, puoi modificare rapidamente le pagine web al volo e correggere gli errori per creare più velocemente siti web di qualità.
Inoltre, Chrome Dev Tools consente al proprietario del sito o al webmaster di trovare e risolvere i problemi relativi all’instabilità visiva su una pagina web, che può causare il Cumulative Layout Shift (CLS).
Estensione Web Vitals
Le metriche Core Web Vitals sono disponibili anche per webmaster e proprietari di siti in una nuova estensione. Fornendo feedback in tempo reale su tutti e tre i principali parametri vitali web, questa estensione è coerente con i test e i rapporti di Chrome che utilizzano le metriche su Google e altri strumenti. Non solo aiuterà il webmaster a diagnosticare le proprie pagine web in movimento, ma aiuterà anche a misurare le prestazioni delle pagine di un concorrente che si desidera abbinare o battere. Puoi risparmiare tempo, adattarti alle situazioni di mercato più velocemente e diventare più efficiente con i tuoi comandi utilizzando l’estensione Web Vitals.
Come analizzare i punteggi vitali del Web desktop e mobile
È possibile accedere ad analisi indipendenti su Web Vitals tra dispositivi desktop / laptop e dispositivi mobili. In alcuni degli strumenti discussi sopra, è possibile eseguire un test o una query su una categoria di dispositivo specifica e, quando entrambi sono disponibili sullo stesso strumento (come Google PageSpeed Insights), è possibile passare facilmente da uno all’altro. L’impostazione predefinita per PageSpeed Insights è le statistiche mobili e dovrai passare alla scheda desktop per vedere la differenza tra le due categorie di dispositivi sulle tue pagine.
La console di ricerca di Google ora presenta le metriche di Core Web Vitals quando sono disponibili i dati sull’esperienza utente di Chrome. Quando si accede a Core Web Vitals, entrambe le categorie di dispositivi vengono visualizzate nella dashboard di Google Console. Da qui è possibile visualizzare i gruppi di pagine che stanno riscontrando problemi.
Per visualizzare i punteggi vitali del Web desktop e mobile nel nuovo rapporto sull’esperienza utente di Chrome (CrUX), dovrai configurare “desktop” o “smartphone” come fattori di forma del dispositivo nelle istruzioni SQL.
Che punteggio è buono in Core Web Vitals?
Oltre alla valutazione in tre fasi (“Scarsa”, “Necessità di miglioramento” e “Buono”), Google definisce ulteriormente ciascuna valutazione con una soglia concordata per aiutare il progresso dei webmaster. Le seguenti soglie determinano ogni elemento vitale:
- Largest Contentful Paint (LCP) : per una buona esperienza utente, LCP dovrebbe verificarsi in 2,5 secondi dal caricamento della pagina.
- First Input Delay (FID) : le pagine devono ottenere un punteggio FID inferiore a 100 millisecondi per una buona esperienza utente su una pagina.
- Cumulative Layout Shift (CLS) : per una buona esperienza utente, le pagine dovrebbero mantenere meno di 0,1 CLS.
Per assicurarti che le tue pagine raggiungano i punteggi consigliati, Google consiglia di misurare il 75 percentile dei caricamenti delle pagine su piattaforme mobili e desktop.
I principali parametri vitali del web influenzeranno le mie valutazioni di ricerca di Google?
Il tuo punteggio su Core Web Vitals influenzerà la tua valutazione di ricerca a partire dal 2021. Al momento, le pagine non vengono classificate utilizzando Core Web Vitals. Nel 2021, Core Web Vitals unirà sicurezza, ottimizzazione dei dispositivi mobili, sicurezza e mancanza di popup come segnali per misurare l’esperienza complessiva della pagina utente. I webmaster e i proprietari hanno 6 mesi di preavviso prima che Google inizi a utilizzare Core Web Vitals come segnale di posizionamento. Tuttavia, puoi misurare e migliorare le metriche in questo momento.
È probabile che in futuro Google utilizzerà sempre più l’esperienza utente e di navigazione come fattori di ranking, insieme alla velocità del sito. La velocità del sito web è già un fattore importante per il posizionamento sui motori di ricerca, ma con l’aumento dell’importanza dell’esperienza utente, diventerà sempre più fondamentale per posizionarsi nelle prime posizioni.
I Core Web Vitals di Google, come LCP, FID e CLS, sono una misura dell’esperienza utente e della velocità del sito. Se un sito raggiunge i valori ottimali per questi fattori, avrà maggiori possibilità di posizionarsi in alto nei risultati di ricerca.
Per questo motivo, è importante che i proprietari di siti web si concentrino sulla velocità del sito e sull’esperienza utente nei prossimi mesi, utilizzando tecniche come l’ottimizzazione delle immagini, l’utilizzo di una connessione veloce, l’utilizzo di un Content Delivery Network (CDN) e l’ottimizzazione del codice JavaScript.
Suggerimenti per migliorare il tuo punteggio Core Web Vitals
La maggior parte delle correzioni comuni per la velocità complessiva della pagina sarà anche accompagnata dall’elemento di miglioramento dei principali dati vitali web della tua pagina. Secondo Google, potresti migliorare i tuoi Core Web Vitals:
- Ridurre le dimensioni della pagina a meno di 500 Kb
- Limitazione delle risorse della pagina a 50 per migliorare le prestazioni dei dispositivi mobili
- Utilizzo di AMP per migliorare la velocità di caricamento della pagina
Web.dev offre suggerimenti per la metrica Core Web Vitals specifica che è un’ottima risorsa che ogni webmaster che lavora in SEO o sviluppo Web dovrebbe utilizzare spesso:
Puoi anche utilizzare lo strumento di test di PageSpeed Insights per monitorare le modifiche apportate. È eccellente in questo perché consente di convalidare le modifiche di Core Web Vitals dalla pagina del report.
Gli utenti di PageSpeed Insights da molto tempo potrebbero già avere familiarità con metriche simili, la maggior parte delle quali rimarrà sicuramente in circolazione. Core Web Vitals è il culmine di queste metriche e intende uscire dalla complessità della Developer Experience con esse. I principali elementi vitali Web sono semplici da eliminare e portare chiarezza tra un numero minore e più grande di metriche da seguire.
Dati di laboratorio e sul campo
A seconda delle condizioni disponibili, i punteggi possono variare notevolmente, cambiando letteralmente mentre gli utenti navigano nelle pagine. È essenziale sapere come ogni punteggio è tabulato in un determinato ambiente. Tuttavia, è possibile interpretare i punteggi solo dopo aver determinato se i dati erano dati di campo o di laboratorio.
I dati di laboratorio Core Web Vitals vengono raccolti utilizzando l’API del browser come timer degli eventi di caricamento della pagina e stime matematiche che simulano l’interattività dell’utente. Sebbene i dati sul campo di Core Web Vitals siano costituiti da metriche simili, vengono raccolti dalle esperienze degli utenti nella vita reale durante la navigazione nelle pagine Web mentre i valori del timer degli eventi risultanti vengono trasmessi a un repository.
Utilizzando PageSpeed Insights, Chrome Dev Tools e la nuova estensione per browser Web Vitals Chrome, sia gli sviluppatori che i professionisti SEO hanno accesso ai dati di laboratorio in tempo reale. Contando i tempi degli script di blocco dei thread, PSI e WebPage Test generano i punteggi di interattività della pagina dagli eventi di caricamento della pagina.
Questi strumenti di dati di laboratorio sono inestimabili per il tuo flusso di lavoro nel reporting e per migliorare i punteggi di Core Web Vitals e dovrebbero essere sempre nel tuo arsenale SEO. A meno che non noti problemi nei dati sul campo, questi dati di laboratorio potrebbero anche essere tutto ciò di cui hai bisogno come sviluppatore se il tuo sito web è basato solo su pochi modelli.
La libreria JavaScript di Web Vitals può anche essere utile nel flusso di lavoro se utilizzata come pipeline di test. La libreria è disponibile tramite CDN e può essere inclusa nella produzione HTML e configurata per trasmettere i dati del campo raccolti in modo indipendente ai centri di confronto per i report.
Lighthouse offre al webmaster vari punti di accesso particolarmente utili nel flusso di lavoro di sviluppo. Include diversi test che ti aiutano a garantire l’aderenza agli standard web stabiliti. Lighthouse può anche aiutarti a eseguire il debug delle situazioni in cui stai risolvendo problemi relativi a Core Web Vitals.
Confronto dei dati del campo con i risultati del laboratorio
Chrome, Firefox, Safari, Opera mini e altri browser moderni misurano il modo in cui gli utenti sperimentano in tempo reale i tuoi siti Web dai loro dispositivi tramite l’API JavaScript integrata. Come notato, Google raccoglie e segnala i suoi dati sul campo dagli utenti di Chrome tramite il rapporto CrUX utilizzando le stesse API del browser, a volte.
È molto più facile accedere ai dati effettivi del campo dopo aver verificato che le tue pagine contengono dati del campo in CrUX. Questo viene fatto verificando la proprietà del tuo sito web sulla console di ricerca di Google. La dashboard di Search Console mostra i dati dei campi su un’interfaccia che ti consente di eseguire il drill-down utilizzando i clic invece di scrivere query SQL.
In alternativa, puoi utilizzare PSI, che utilizza dati sul campo risalenti a 28 giorni. L’API che guida il rapporto di recency è una libreria JavaScript open source indipendente che può essere inserita nel flusso di lavoro di sviluppo o utilizzata per controllare un dashboard dell’app. PSI può anche fungere da app standalone in cui uno sviluppatore ha già creato un ottimo frontend per l’app.
Come risolvere i problemi relativi ai rapporti sui dati vitali
A causa della natura di alcune delle tempistiche dei rapporti e del modo in cui i dati sono stati raccolti, sarà necessario verificare i dati di laboratorio correlandoli ai dati sul campo e alle discrepanze di debug. Ad esempio, i successivi caricamenti di pagine possono variare i punteggi dei risultati durante il monitoraggio di Web Vitals utilizzando l’estensione. Ci possono essere un paio di ragioni alla base di questo.
Il browser ha la capacità di riunire valori interattivi tramite l’estensione mentre si scorre una pagina in un modo simile ai dati del campo del mondo reale. Utilizzando la propria cache, il browser è anche in grado di raccogliere risorse più velocemente all’aggiornamento.
Per ottenere i dati più accurati e i risultati locali durante l’ottimizzazione per Core Web Vitals utilizzando Chrome Dev Tools e Web Vitals Extension, ricorda di svuotare la cache o bypassarla premendo Maiusc-Aggiorna sul browser Web nel tuo flusso di lavoro. Un altro suggerimento brillante è quello di caricare la pagina “about blank” prima di iniziare una sessione di monitoraggio e registrazione delle prestazioni in Dev Tools per iniziare in modo pulito la stesura di un report.
I dati sul campo e di laboratorio sono in genere molto simili e con una buona ragione. Ogni volta che apporti modifiche significative a entrambi, i risultati del tuo laboratorio saranno in anticipo rispetto ai dati sul campo o viceversa. Pertanto, se noti che i tuoi test hanno esito negativo sul campo e hai già migliorato i punteggi di laboratorio per superarli, devi essere abbastanza paziente da consentire ai dati sul campo di recuperare il ritardo con i dati di laboratorio, o inviare i dati sul campo in modo indipendente tramite Analytics verificalo.
Sebbene possa sembrare abbastanza ovvio che CLS sia il punteggio dei dati sul campo più complicato da abbinare a livello locale, non è necessariamente così. Puoi utilizzare l’estensione di Chrome per impostare l’opzione per applicare una sovrapposizione di Core Web Vitals, quindi puoi guardare i cambiamenti dei punteggi mentre navighi e interagisci con la pagina.
Lo stesso vale per FID. Il tuo punteggio diventa l’interazione sulla prima pagina (scorrimento, clic, zoom o input da tastiera) dopo che le attività di blocco dei thread sono state aggiunte al momento.
Le informazioni altamente dettagliate disponibili in Chrome Dev Tools ti consentono di risolvere i problemi di CLS a livello miniaturizzato con la riproduzione e la registrazione delle prestazioni. Fare clic sulla sezione “Esperienza” che riproduce i turni CLS nella registrazione. È inoltre possibile evidenziare gli spostamenti nel display utilizzando un’impostazione che lampeggia gli elementi in blu quando si spostano e li registra sui risultati.
Core Web Vitals minori
Sebbene LCP, FID e CLS siano considerati i parametri vitali Web CORE, ci sono alcune altre metriche minori che possono essere utilizzate per offrire un’ottima esperienza utente. Sono comunemente denominati elementi vitali Web secondari o solo elementi vitali Web.
- Time to First Byte : TTFB è il tempo impiegato dal browser per ricevere il primo byte del contenuto della pagina
- Time to Interactive : TTI è il tempo che la pagina impiega per caricare le sue sotto-risorse ed essere in grado di rispondere ai comandi dell’utente.
- Tempo di blocco totale : TBT si occupa del tempo tra FCP e TTI in cui si è verificato un blocco totale nel thread, impedendo alla pagina di rispondere all’input di un utente.
Conclusione
L’ottimizzazione per Core Web Vitals è destinata ad essere un grosso problema se desideri che le tue pagine si posizionino in alto nelle SERP nel prossimo anno. Poiché i tre principali parametri vitali del Web sono tecnici nella loro essenza, potrebbero esserci molti webmaster che sono meno informati su questo particolare aspetto.
Tuttavia, ci sono molti sviluppatori ed esperti esperti di SEO, tecnici e sistemisti che ti aiuteranno in questo senso.
Ci auguriamo di averti fornito una visione chiara dei parametri vitali di Google Web Core.
Contattaci pure se vuoi migliorare in maniera sensibile il punteggio.
