Core Web Vitals: Cosa sono e come migliorarli (Guida)

Tempi di caricamento lenti, elementi che non rispondono o spostamenti di pagina inaspettati possono frustrare gli utenti. Questo è il motivo per cui i Core Web Vitals sono diventati essenziali per ottimizzare il tuo sito e le tue possibilità di posizionarti più in alto nelle ricerche. 

Migliorando le prestazioni del tuo sito web su queste metriche, puoi fornire un’esperienza più fluida per il tuo pubblico. Ciò si traduce in un migliore posizionamento nei motori di ricerca, un maggiore coinvolgimento e più conversioni.

Cosa sono i Core Web Vitals?

I Core Web Vitals sono un insieme di parametri chiave di Google che misurano l’esperienza dell’utente in termini di prestazioni di caricamento, interattività e stabilità visiva di una pagina web. Raggiungere un buon valore per i Core Web Vitals è consigliato per il successo nella ricerca Google, in quanto aiuta a garantire un’esperienza utente veloce, reattiva e visivamente stabile. 

I tre Core Web Vitals sono:

• Largest Contentful Paint (LCP) – misura le prestazioni di caricamento.
• Interazione con Next Paint (INP) – tiene traccia delle interazioni dell’utente e misura il ritardo negli input.
• Cumulative Layout Shift (CLS) – misura la stabilità visiva tracciando i cambiamenti di layout sulla pagina.

Google utilizza questi segnali di qualità come parte del suo algoritmo di ranking e migliorarli può aumentare la tua posizione nelle classifiche di ricerca.

Largest Contentful Paint  (LCP)

Il Largest Contentful Paint (LCP) misura quanto tempo impiega il più grande elemento di contenuto visibile su una pagina a visualizzarsi completamente. Potrebbe trattarsi di un’immagine, un video o un blocco di testo che occupa la maggior parte dello spazio sullo schermo. Questa metrica è importante perché fornisce una visione accurata della velocità di caricamento di una pagina web dal punto di vista dell’utente. 

Ecco come Google definisce i punteggi LCP:

• Good (Buono): 2.5 secondi o meno
• Needs improvement (Migliorabile): Tra 2.5 e 4 secondi.
• Poor (Negativo): Più di 4.0 secondi

Affinché il tuo sito web superi i Core Web Vitals, è necessario avere un punteggio LCP di 2.5 secondi o meno per il 75% di tutte le visualizzazioni delle tue pagine. 

Un LCP alto significa che i tuoi utenti stanno aspettando troppo tempo per caricare il contenuto più grande sulla pagina. Per i proprietari di siti web, questo significa tempi di rendering lunghi, che portano a grandi frequenze di rimbalzo e bassi tassi di conversione. 

I tre fattori più comuni che influenzano negativamente l’LCP sono:

• Media di grandi dimensioni e non ottimizzati
• Blocco del rendering JavaScript
• Tempo di caricamento lento delle risorse 

Interazione con Next Paint (INP)

Interaction to Next Paint (INP) è una metrica delle prestazioni web per utenti reali che misura la reattività di una pagina web. Valuta il tempo impiegato dal browser per rispondere alle interazioni dell’utente, come click o tocchi dopo che la pagina ha terminato il caricamento. 

L’INP è progettato per catturare l’esperienza dell’utente, ovvero quanto velocemente e senza intoppi un sito reagisce agli input degli utenti. È un indicatore chiave dell’interattività e della reattività della pagina. 

A differenza del FID, che misura solo il ritardo per il primo input, l’INP considera la reattività dell’intera pagina durante la sessione dell’utente. 

Ecco come Google definisce i punteggi INP:

• Good (Buono): inferiore o uguale a 200 millisecondi
• Needs improvement (Migliorabile): tra 200 millisecondi e 500 millisecondi
• Poor (Negativo): più di 500 millisecondi

Un motivo comune per un cattivo punteggio INP sono i file JavaScript e CSS non ottimizzati. Ti mostreremo come misurare e migliorare l’INP in seguito.

Cumulative Layout Shift (CLS)

Quali sono per Google i criteri che incidono sull’esperienza dell’utente su un sito?

Esaminiamo rapidamente quali sono i quattro criteri di che incidono sull’esperienza con le pagine e che sono un fattore di posizionamento. Questi dovrebbero servire come punto di partenza per l’intero processo di miglioramento dell’esperienza utente come indicato da Google:

Il Cumulative Layout Shift (CLS) misura la stabilità visiva di una pagina tracciando cambiamenti di layout imprevisti. Questi cambiamenti si verificano spesso quando vengono caricati nuovi contenuti, come immagini senza dimensioni specificate o annunci inseriti dinamicamente. Un punteggio CLS alto indica che una pagina è instabile, e questo porta a un’esperienza frustrante per gli utenti. 

Ecco come Google definisce i punteggi CLS:

• Good (Buono): inferiore o uguale a 0.1 secondi
• Needs improvement (Migliorabile): inferiore o uguale a 0.25 secondi
• Poor (Negativo): più di 0.25 secondi

Un punteggio inferiore o uguale a 0.1 secondi significa che i contenuti della pagina sono completamente statici durante il loro ciclo di vita. Un punteggio più alto significa che i contenuti si stanno spostando. Di solito, i cambiamenti di layout sono comunemente causati da:

• immagini,
• annunci,
• incorporamenti,
• iframe senza dimensioni,
• contenuto inserito dinamicamente,
• font web che causano flash di testo invisibile e flash di testo senza stile.

Come misurare i Core Web Vitals?

Sono disponibili diversi strumenti per misurare i Core Web Vitals, sia utilizzando dati reali dagli utenti che metriche di laboratorio (test simulati). Questi strumenti aiutano i proprietari dei siti a tenere traccia delle loro prestazioni dei Core Web Vitals e identificare le aree di miglioramento.

Strumenti per i dati sul campo 

I dati sul campo, noti anche come monitoraggio degli utenti reali (RUM), riflettono l’esperienza di navigazione degli utenti reali. Tiene conto degli utenti reali, dei vari dispositivi, delle diverse connessioni di rete e dei dati storici. Il risultato viene aggregato per l’intero dominio o per URL. 

Tieni presente che Google utilizza i dati sul campo per classificare il tuo sito. Pertanto, se desideri ispezionare la tua esperienza utente reale, è necessario utilizzare gli strumenti per i dati sul campo.

Google Search Console (GSC)

Google Search Console offre un rapporto Core Web Vitals che mostra le prestazioni del tuo sito su desktop e dispositivi mobili. Evidenzia le pagine interessate e le raggruppa in base alle prestazioni: Buono, Necessita di miglioramenti o Negativo.

PageSpeed Insights

PageSpeed Insights analizza le singole pagine web e fornisce informazioni dettagliate sulle prestazioni dei Core Web Vitals. Offre suggerimenti per migliorare la velocità della pagina e le prestazioni del sito. 

Dovresti esaminare i punteggi sia per desktop che per dispositivi mobili, in quanto potrebbero differire. Nella parte superiore del report, in base ai Core Web Vitals del sito, PageSpeed Insights indica chiaramente se la tua pagina arriva alla soglia per offrire una buona esperienza.

Chrome UX Report  (CrUX)

Chrome User Experience Report (CrUX) fornisce dati reali sulle prestazioni degli utenti di Chrome. Mostra come gli utenti sperimentano il tuo sito su entrambi i dispositivi mobili e desktop. Il Chrome UX Report si concentra sulle prestazioni di caricamento del sito web. Misura i Core Web Vitals, metriche come Time to First Byte (TTFB) e molto altro ancora.

Estensione Chrome per i Core Web Vitals

L’estensione Web Vitals ti consente di tracciare Core Web Vitals direttamente nel tuo browser Chrome mentre navighi sul tuo sito. È uno strumento gratuito che fornisce un feedback istantaneo sulle metriche Core Web Vitals.

Web.dev

Web.dev offre uno strumento di misurazione gratuito per eseguire un controllo delle prestazioni sul tuo sito. Inoltre, puoi controllare le prestazioni del tuo sito in diverse aree e ottenere suggerimenti su come migliorare metriche come le prestazioni del sito, lo stato progressivo delle web app, l’accessibilità, le best practices e la SEO. Supporta anche le metriche dei Core Web Vitals.

Strumenti per i Lab Data

Questo si riferisce alla conduzione di test in un ambiente controllato per vedere come un potenziale utente si troverà sul tuo sito web. A differenza degli strumenti per i dati sul campo, gli strumenti per i lab data funzionano con dati simulati, con dispositivi predefiniti e specifiche di rete. Sono utili nella riproduzione e nel debug di possibili problemi di prestazioni del sito web, ma non forniscono informazioni sull’esperienza utente reale.

Lighthouse

Lighthouse è uno strumento open source e automatizzato per il controllo del sito web che aiuta gli sviluppatori a diagnosticare problemi e migliorare la qualità delle pagine web.

Uno strumento per i lab data come Lighthouse non può misurare l’Interaction to Next Paint (INP), perché richiede una reale interazione dell’utente. Tuttavia, è possibile monitorare il Total Blocking Time (TBT), che misura la quantità di tempo totale tra First Contentful Paint e Time To Interactive. Migliorando il tuo TBT, molto probabilmente migliorerai anche il tuo INP.

WebPageTest.org

Questo è uno strumento gratuito e open source che misura le prestazioni della velocità del tuo sito. Carica la tua pagina in un browser reale, aiutandoti a identificare le specifiche sezioni del sito che richiedono più tempo per essere caricate.

Pannello delle Performance di Chrome DevTools

Con Chrome DevTools, hai l’opzione Performance, che include i Core Web Vitals. Il pannello Performance ha anche una sezione Experience da cui è possibile rilevare cambiamenti di layout imprevisti. Questo rende possibile identificare e correggere qualsiasi instabilità visiva e migliorare la metrica di spostamento del layout cumulativo. Per accedere al pannello delle Performance di Chrome DevTools, apri Google Chrome (utilizza la modalità di navigazione in incognito così che non vi sia la cache del browser) e premi Command + Option + I (Mac) o Ctrl + Shift + I (Windows, Linux) per aprire DevTools. 

Seleziona Layout Shift per visualizzarne i dettagli nella scheda Summary. 

Tieni presente che, a seconda dello strumento che utilizzi (in base ai dati sul campo o i lab data), le metriche dei Core Web Vitals potrebbero mostrare risultati diversi.

Come migliorare i Core Web Vitals

La buona notizia è che la maggior parte dei suggerimenti per migliorare i tuoi Core Web Vitals fanno sono gli stessi per l’ottimizzazione delle prestazioni del sito.

Come migliorare il Largest Contentful Paint (LCP)

Abilita la cache a pagina intera

Quando abiliti il caching a pagina intera, le pagine del tuo sito verranno archiviate sul server dopo il primo caricamento. Solo il primo visitatore caricherà l’intero contenuto della pagina dal database. Tutti gli altri otterranno l’output della pagina direttamente dalla memoria del server, rendendo il tuo sito molto più veloce e, in definitiva, migliorando la tua metrica LCP. 

I clienti di SiteGround sfruttano la nostra esclusiva soluzione di caching a pagina intera, chiamata anche Cache Dinamica, abilitata di default per tutti i siti. A seconda del tipo di sito, registriamo un caricamento della pagina fino a 5 volte più veloce.

Scegli un hosting veloce e affidabile

Uno dei motivi più comuni per un LCP negativo è un tempo di risposta del server lento. Innanzitutto, controlla il tuo Time to First Byte (TTFB), ossia quanto tempo impiega il browser a ricevere il primo byte di contenuto dal server. Più velocemente risponde il tuo server, migliori saranno le prestazioni del tuo sito web.

Usa una CDN

Oltre al server che ospita il tuo sito, puoi utilizzare una rete di distribuzione dei contenuti (CDN) per accelerare il tempo di caricamento delle pagine per tutti i tuoi visitatori. La CDN memorizzerà nella cache i tuoi contenuti su una rete globale di server e caricherà il tuo sito web da quello più vicino al visitatore, migliorando così l’esperienza con la tua pagina. 

SiteGround ha sviluppato la propria infrastruttura CDN per aumentare le prestazioni del sito web e la sicurezza per tutti i suoi utenti.

Ottimizza le immagini

Ottimizzare le immagini migliorerà il tuo punteggio del Largest Contentful Paint poiché spesso queste sono l’elemento più grande della pagina. 

Comprimi sempre le tue immagini e ridimensionale correttamente. Si consiglia di pubblicare immagini in formati di nuova generazione come WebP, per migliorare le prestazioni. 

Ottimizza JavaScript e CSS

Ridurre CSS e JavaScript che rallentano il caricamento della pagina può migliorare il punteggio generale dei Core Web Vital e l’interazione dell’utente.

• Rinvia i JavaScript

Mentre il browser sta caricando JavaScript, gli utenti non possono interagire con la pagina web. Ecco perché a volte puoi vedere il termine “Render-blocking JavaScript”. Rinviare i tuoi JavaScrips significa che il browser elaborerà e caricherà i file JS solo dopo aver analizzato il documento HTML. 

In altre parole, la visualizzazione del tuo sito web sarà molto più veloce perché non ci sarà nulla a bloccare il processo.

• Minifica i file CSS e JS

Per una maggiore leggibilità, gli sviluppatori spesso lasciano caratteri come spaziatura, rientro o commenti nei file CSS e JS. Tuttavia, tutti questi caratteri nel codice non sono essenziali per il browser. 

La minificazione ottimizza il tuo codice rimuovendo tutti i caratteri non necessari, con conseguente miglioramento del tempo di visualizzazione e quindi siti web più veloci.

Come migliorare l’interazione con Next Paint (INP)

Rimuovi gli elementi di pagina di grandi dimensioni e attività lunghe

Ridurre le attività lunghe previene i ritardi nella risposta alle interazioni dell’utente. Un’attività lunga si riferisce a qualsiasi parte di codice JavaScript che impiega più di 50 millisecondi per essere eseguita. 

Elementi nella pagina di grandi dimensioni, come video o immagini di sfondo, possono rallentare l’esecuzione del codice e influire sull’INP. 

Invece di utilizzare un’immagine ad alta risoluzione per lo sfondo (ad esempio, un JPEG da 4MB), considera l’utilizzo di un’immagine WebP ottimizzata che riduce significativamente la dimensione del file (ad esempio, 400KB). Allo stesso modo, i video possono utilizzare il lazy load o essere sostituiti con immagini statiche per il caricamento iniziale, rinviando il supporto pesante fino a dopo l’interazione dell’utente.

Usa web workers

L’utilizzo di web workers consente di eseguire attività pesanti in background, in modo da non bloccare il thread principale. Ciò riduce i ritardi nell’input dell’utente e nel caricamento della pagina, ottimizzando il punteggio INP e le prestazioni complessive. 

Invece di eseguire attività di grandi dimensioni direttamente nel thread principale del browser (causando il blocco della pagina), l’elaborazione può essere scaricata su un web worker. Ciò consente all’utente di continuare a interagire con il sito senza alcun ritardo evidente, mentre l’attività in background viene completata.

Ottimizza i gestori di eventi

I gestori di eventi ottimizzati riducono il ritardo nell’input e migliorano la velocità del sito, contribuendo a migliorare le metriche dei Core Web Vitals. 

Ad esempio, quando un utente clicca su un pulsante, il gestore di eventi prima registra il click sul bottone e rinvia il calcolo a un tempo meno critico quando il thread principale del browser è inattivo. Ciò garantisce che l’interazione sia fluida e che l’utente non subisca ritardi.

Riduci gli script di terze parti

Si consiglia vivamente di rimuovere eventuali script di terze parti che non apportano alcun valore reale. Se il tuo sito include più script di terze parti per analisi, pubblicità o widget di social media, valuta se siano necessari. La rimozione di script non essenziali, come un widget di chat ridondante o un ad tracker che non viene utilizzato per il tuo pubblico principale, può migliorare significativamente sia il punteggio Largest Contentful Paint (LCP) che l’iterazione to Next Paint (INP).

Come migliorare il Cumulative Layout Shift (CLS)

Imposta degli attributi di dimensione

Impostare le dimensioni dell’attributo dirà al browser dell’utente esattamente quanto spazio ha bisogno quell’elemento. Usiamo un’immagine come esempio. 

Se non imposti gli attributi di larghezza e altezza per un’immagine, il browser non conoscerà la dimensione esatta che questa immagine occuperà fino a quando non verrà caricata completamente, il che può causare uno spostamento del layout. 

Specificando larghezza e altezza, consenti al browser di calcolare le proporzioni dell’immagine e lo spazio appropriato. Questo ridurrà al minimo i Cumulative Layout Shifts.

Precarica i font

I font migliorano la leggibilità della tua pagina e trasmettono l’immagine del tuo marchio. Tuttavia, ogni font che utilizzi è una risorsa aggiuntiva che potrebbe rallentare il tuo sito web. Si consiglia di precaricare i font per evitare cambiamenti di layout e flash di testo invisibile. 

Per precaricare i font, devi utilizzare il tag <link rel=”preload”>  nella sezione <head> del tuo documento HTML. È necessario specificare l’ attributo as=”font” e includere crossorigin se il font viene caricato da una fonte esterna (come una CDN). 

In questo modo, migliorerai il tuo punteggio di metrica CLS. 

Riserva dello spazio per gli annunci

Gli annunci hanno una natura dinamica che può portare a cambiamenti di layout imprevisti. Questo può avere un effetto negativo sul tuo punteggio CLS. Se non lasci da parte spazio sufficiente per gli annunci sul tuo sito, questi potrebbero apparire inaspettatamente e rovinare l’esperienza dell’utente.

Usa la proprietà transform CSS per le animazioni

I cambiamenti di layout durante le animazioni spesso interrompono l’esperienza dell’utente e possono influire in modo significativo sul punteggio CLS (Cumulative Layout Shift). Utilizzando la proprietà transform CSS per le animazioni, puoi evitare che gli elementi sulla pagina si spostino in modo imprevedibile. Le animazioni transform css, come scale o translate, aiutano a mantenere la posizione di altri contenuti sulla pagina. Questo porta a un’esperienza più stabile sul tuo sito.

Minimizza il contenuto inserito dinamicamente: 

I contenuti inseriti dinamicamente, come pubblicità, immagini o video che vengono caricati dopo la pagina web iniziale, spesso causano cambiamenti di layout. Questi spostamenti possono influire negativamente sul punteggio CLS (Cumulative Layout Shift). 

Per migliorare la stabilità visiva, è importante pre-allocare spazio per i contenuti caricati dinamicamente. Esistono diverse tecniche per questo, come impostare le dimensioni delle dimensioni nel tuo CSS, JavaScript o utilizzare le caselle di Aspect Ratio o i Segnaposto. Puoi trovare qui di seguito un esempio di impostazione delle dimensioni prima di inserire dinamicamente il contenuto con JavaScript:

Questo riduce al minimo l’impatto sull’esperienza dell’utente migliorando allo stesso tempo le metriche delle prestazioni relative al punteggio di spostamento del layout.

Perché i Core Web Vitals sono importanti?

I suggerimenti menzionati finora sono le migliori pratiche consigliate per l’ottimizzazione del sito web e influenzano anche positivamente i segnali di esperienza della pagina misurati dai Core Web Vitals di Google. 

Come proprietario di un sito web, è importante comprendere queste metriche. Questo può aiutarti a offrire un’esperienza positiva ai tuoi utenti, migliorare il posizionamento nei motori di ricerca e le prestazioni complessive della pagina web. 

È importante notare che l’algoritmo di ranking di Google viene continuamente aggiornato. Monitorare regolarmente i tuoi Core Web Vitals con strumenti come PageSpeed Insights o Search Console può aiutarti ad apportare le modifiche necessarie, mentre le aspettative degli utenti e gli algoritmi di ranking di Google si evolvono. In questo modo, stai impostando il tuo sito per un successo a lungo termine. 

Per ulteriori consigli dagli esperti sull’ottimizzazione del sito web, puoi scaricare il nostro ebook Ottimizzazione della velocità di WordPress e imparare come costruire un sito web ad alte prestazioni.

Aggiornato: Ottobre 2024