Cosa sono i Core Web Vitals (CWV)?

Cosa sono i Core Web Vitals (CWV)?

I Core Web Vitals (CWV) sono un insieme di tre parametri relativi alle prestazioni sul web. Il motore di ricerca di Google misura questi tre parametri e li incorpora nelle sue decisioni su quali pagine visualizzare nei risultati di ricerca. Ciò significa che i professionisti dell'ottimizzazione per i motori di ricerca (SEO) sono tenuti a ottimizzare i core web vitals delle loro pagine web in seno a una strategia complessiva volta a migliorare il posizionamento di tali pagine.

I CWV sono:

1. Largest Contentful Paint (LCP), che misura le velocità di caricamento
2. First Input Delay (FID), che misura l'interattività
3. Cumulative Layout Shift (CLS), che misura la stabilità visiva

Cos'è l'aggiornamento di Google relativo all'esperienza sulla pagina?

Sebbene il tempo di caricamento di una pagina sia stato a lungo una fattore importante per la SEO, Google ha annunciato nel 2020 che i CWV sarebbero diventati parte del proprio algoritmo di ranking a partire dalla metà del 2021. Questo è noto come l'aggiornamento di Google relativo all'esperienza sulla pagina.

Nell'annuncio, Google affermava che i CWV sarebbero stati inclusi nei segnali relativi all'esperienza sulla pagina, i quali contribuiscono a determinarne il posizionamento nei motori di ricerca. Altri fattori relativi all'esperienza sulla pagina includono la sicurezza HTTPS, l'adattabilità verso i dispositivi mobili e l'assenza o la presenza di interstitial intrusivi (come i pop-up). L'obiettivo dell'aggiornamento era premiare le pagine web che offrono un'esperienza utente positiva.

In che modo i Core Web Vitals influiscono sulla SEO?

Tutti i motori di ricerca utilizzano bot chiamati "crawler" o "web spider" per analizzare i siti. Questi bot accertano l'argomento dei contenuti di ogni singolo sito, e aiutano il motore di ricerca a "decidere" quando mostrare un dato sito web in risposta a una query di ricerca. Le performance del sito sono uno degli aspetti che i bot di Google si preoccupano di verificare.

Non è noto con precisione quanto i parametri LCP, FID e CLS influenzino la SEO, poiché Google mantiene per lo più segreti i propri algoritmi di ranking. Tuttavia, è pacifico che i CWV abbiano un impatto significativo sulla SEO. Molti osservatori del settore hanno condotto dei casi di studio che dimostrano miglioramenti o perdite nel posizionamento nei risultati di ricerca in base alle modifiche apportate ai CWV di un sito web.

Come si traduce questo nella realtà? Supponiamo che Google debba scegliere tra posizionare il sito web A e il sito web B in cima ai risultati di ricerca per la query "Che cosa è ARPANET?". Entrambi i siti web, A e B, godono di un'ottima reputazione per la fornitura di informazioni accurate sulla storia di Internet e offrono informazioni altrettanto dettagliate sull'argomento ARPANET. A parità di condizioni, se il sito web A si carica più velocemente, risponde più rapidamente e ha meno problemi di caricamento del sito web B, l'algoritmo di Google verosimilmente deciderà di mostrare il sito web A nella parte superiore dei risultati di ricerca, anche se entrambi i siti web forniscono una qualità di informazione simile.

(I posizionamenti operati dai motori di ricerca sono più complessi di quanto descritto in questo esempio, poiché sono decine i fattori che influenzano la posizione nella quale un sito comparirà in una ricerca).

Perché Google incorpora le prestazioni sul web nei propri criteri di posizionamento?

I motori di ricerca come Google desiderano fornire agli utenti le informazioni più pertinenti nel modo più rapido possibile. I ritardi nei tempi di caricamento tendono a frustrare l'utenza, mentre le pagine a caricamento rapido aumentano le probabilità che gli utenti ritornino. Sebbene Google detenga oggi la maggior parte del mercato di ricerca di lingua inglese, una scarsa esperienza utente potrebbe indurre gli utenti a rivolgersi ad altre fonti per ottenere informazioni.

Per ragioni simili, anche altri motori di ricerca come DuckDuckGo e Bing potrebbero tenere in considerazione le prestazioni web, sebbene, come nel caso di Google, non si sappia con certezza come funzionino i loro algoritmi di classificazione e posizionamento delle pagine.

Che cos'è il Largest Contentful Paint (LCP)?

Il Largest Contentful Paint misura il tempo necessario per caricare l'elemento più grande di una pagina web, che solitamente è un'immagine o un blocco di testo.

Le linee guida di Google classificano una misurazione LCP come "buona" se è inferiore a 2,5 secondi Quanto più veloce, però, tanto meglio!

La metrica LCP non misura la velocità di caricamento di un'intera pagina, ma fornisce un buon parametro di riferimento per indicare la velocità con cui essa viene caricata. In genere, l'elemento più importante di una pagina è il suo contenuto principale, quindi il momento in cui questo viene caricato collima spesso col momento in cui l'utente percepisce che la pagina è stata caricata.

Una versione precedente della metrica LCP è il First Meaningful Paint (FMP), che misura quando il contenuto principale di una pagina diventa visibile. Google ha riscontrato che questa metrica non era affidabile, e da quel momento l'ha rimossa da alcuni dei suoi strumenti di reporting.

Che cos'è il First Input Delay (FID)?

Il First Input Delay misura il tempo che intercorre tra il primo tentativo di interazione di un utente con una pagina web e il momento in cui essa risponde. In altre parole, il FID quantifica la velocità con cui un utente può interagire per la prima volta con una data pagina e ottenere una risposta. Secondo le linee guida di Google, un FID di buon livello è pari o inferiore a 100 millisecondi.

Per un esempio di FID, supponiamo che Enrico visiti una pagina web denominata "Come lucidare a specchio le tue scarpe". Vede una sequenza di foto di lucido da scarpe e fa clic sulla freccia destra per passare alla foto successiva. Il FID è il tempo che intercorre dal momento in cui Enrico clicca sulla freccia all'inizio del caricamento della foto successiva.

Il FID non misura il tempo necessario affinché l'evento richiesto si verifichi effettivamente, ovvero quanto tempo impiega il browser di Enrico a completare il caricamento della foto successiva, ma il tempo che intercorre tra la richiesta e il momento in in cui comincia ad essere soddisfatta.

Vale la pena rimarcare che il FID è una metrica ottenuta "sul campo", ovvero un parametro che viene misurato in base all'osservazione di utenti reali, e non inferito in base a teorie o a prove di laboratorio.

Alcune “metriche di laboratorio” alternative sono il Total Blocking Time (TBT) e il Time to Interactive (TTI). Il TBT misura il tempo che intercorre tra il First Contentful Paint (FCP) e il TTI, mentre l'FCP misura il tempo che intercorre tra l'inizio del caricamento e il momento in cui gli elementi vengono effettivamente caricati sullo schermo dell'utente. Come suggerisce il nome, il TTI misura il tempo necessario affinché gli elementi vengano visualizzati come caricati e quando un utente può effettivamente interagire con essi.

Che cos'è il Cumulative Layout Shift (CLS)?

Il CLS misura l'entità dei "salti" di una pagina web durante la fase di caricamento. Nello specifico, misura la più grande "raffica", in gergo "burst", di spostamenti nel layout della pagina. Le linee guida di Google stabiliscono che una misurazione CLS "buona" è uguale o inferiore a 0,1.

Uno spostamento di layout si verifica quando il contenuto della pagina si muove verso l'alto, verso il basso o in qualsiasi altra direzione rispetto alla collocazione originaria. Nel contesto di questa metrica, un "burst" è un gruppo di spostamenti di layout che si verificano tutti entro un secondo l'uno dall'altro. Un burst può durare fino a cinque secondi e contenere un numero qualsiasi di spostamenti di layout.

Immaginiamo che, dopo aver caricato la pagina "Come lucidare a specchio le tue scarpe", Enrico provi a fare clic sulla freccia destra per visualizzare l'immagine successiva della sequenza. Tuttavia, la sequenza di immagini si sposta improvvisamente più in basso nella pagina, e Enrico finisce per cliccare sul testo che viene caricato sopra la sequenza. La pagina web si è spostata perché non si è caricata completamente nello stesso momento, e il buon Enrico rimane un po' interdetto.

È molto probabile che una pagina web di questo tipo abbia un punteggio CLS piuttosto basso. La pagina si è chiaramente spostata parecchio, facendo scorrere il carosello di foto verso il basso di decine o addirittura centinaia di pixel.

Come viene misurato il CLS

Google calcola i punteggi CLS con la seguente equazione:

frazione di impatto × frazione di distanza = punteggio di spostamento del layout

• La frazione di impatto è la percentuale dello schermo che cambia quando si verifica uno spostamento del layout.
• La frazione di distanza misura invece lo spostamento di un elemento sullo schermo, espresso anch'esso in percentuale.

Se una pagina web si carica su uno schermo alto 400 pixel e, quando si carica un nuovo elemento, 200 di questi pixel si spostano, la frazione di impatto è 200/400, ovvero il 50%. Se il nuovo elemento ha spostato un altro elemento verso il basso di 50 pixel, la frazione di distanza è 50/400, ovvero il 12,5%.

Per calcolare il punteggio di spostamento del layout bisogna semplicemente prendere queste due percentuali, scriverle in formato decimale e moltiplicarle:

0,50 × 0,125 = 0,0625

Se questo è il maggior spostamento sperimentato dalla pagina, il suo punteggio CLS è 0,0625.

Anche se idealmente una pagina web non dovrebbe spostarsi durante il caricamento, questo punteggio rimane comunque accettabile. Gli esperti raccomandano che le pagine web abbiano un punteggio CLS pari o inferiore a 0,10.

Come misurare i Core Web Vitals

Esistono molti strumenti che possono essere utilizzati per verificare i CWV. Di seguito elenchiamo quelli forniti direttamente da Google:

• Chrome UX Report (CrUX) offre dati ottenuti sul campo segnalati dagli utenti di Chrome, e fornisce ai titolari di siti web informazioni sull'esperienza che gli utenti reali vivono quando visitano i loro siti.
• Google Lighthouse è uno strumento gratuito che fornisce metriche di laboratorio relative ai CWV. Offre spunti concreti per migliorare le prestazioni, la SEO, l'accessibilità e altro ancora.
• Google PageSpeed Insights combina le funzionalità di CrUX e Lighthouse, offrendo dati sia sul campo che di laboratorio su CWV e altri parametri fondamentali del web. Con PageSpeed Insights, qualsiasi utente è in grado di verificare le prestazioni di un sito anche senza esserne il titolare. Presentiamo qui l'esempio di un report di PageSpeed Insights.
• Google Search Console si basa in parte sui dati ottenuti sul campo da CrUX, e fornisce dati sulle prestazioni CWV per URL o gruppi di URL.

Come migliorare i Core Web Vitals

Come migliorare l'LCP

• Utilizzare una rete di distribuzione dei contenuti (CDN): le CDN memorizzano i contenuti in ubicazioni dislocate in tutto il mondo, in modo che possano raggiungere gli utenti più rapidamente.
• Ottimizzare le immagini: le immagini sono spesso l'elemento più corposo di una pagina. La riduzione delle dimensioni di un file immagine può contribuire a velocizzarne il tempo di caricamento.
• Implementare il lazy loading: nel "lazy loading", ovvero "caricamento differito", le risorse di un sito web vengono caricate solo quando un utente ne ha effettivamente bisogno. Ciò rende il caricamento del sito web più efficiente, ma fino a un certo punto. Le ricerche suggeriscono infatti che l'uso eccessivo di questa funzionalità sia correlato a un LCP inferiore. Per questo motivo, Google suggerisce di limitare le immagini a caricamento differito nelle parti inferiori delle pagine, o "below the fold", o alle parti della pagina web che un utente deve scorrere per visualizzare.

Come migliorare il FID

• Ridurre le dimensioni delle funzioni JavaScript: le pagine web dinamiche ad alta densità di codice possono causare ritardi nell'input perché il browser deve attendere che tutto il codice venga caricato prima di poterlo eseguire. La minificazione di JavaScript può contribuire a velocizzare questo processo.
• Creare pagine web statiche: le pagine web HTML statiche si caricano molto più velocemente delle pagine dinamiche, soprattutto quando sono distribuite tramite CDN. Scopri di più sui generatori di siti statici o su Jamstack, una filosofia di sviluppo che enfatizza i contenuti statici.
• Rimuovi strumenti e script di terze parti non necessari: anche il caricamento di strumenti aggiuntivi su un sito Web può rallentarne le prestazioni. Ridurre la quantità di strumenti di terze parti su un sito può migliorare il FID e la velocità del sito Web in generale.

Come migliorare il CLS

• Ridurre al minimo gli elementi di terze parti nelle pagine: gli elementi di terze parti vengono caricati da posizioni diverse rispetto al resto della pagina. Per questo motivo, possono caricarsi in un momento leggermente diverso, modificando il layout della pagina durante il loro caricamento. Riducendo al minimo dell'uso di questi elementi, si riduce anche la quantità di modifiche al layout.
• Riservare spazio per i contenuti "embedded": molti elementi di terze parti, come gli annunci pubblicitari, sono essenziali per la funzionalità o il modello di business di un sito web e non possono essere eliminati. Gli sviluppatori possono riservare spazio sulla pagina web per questi elementi, in modo che vengano caricati prima che il browser recuperi l'elemento effettivo.
• Assicurarsi che le immagini si carichino nella dimensione ottimale: questo è un processo leggermente diverso dall'ottimizzazione delle immagini in generale. I computer desktop, i tablet e gli smartphone hanno tutti bisogno di immagini di dimensioni leggermente diverse, perché le dimensioni dei loro schermi variano. Se un browser carica per prima un'immagine di grandi dimensioni ottimizzata per un desktop, e poi deve caricare l'immagine ottimizzata per dispositivi mobili perché il dispositivo in uso è uno smartphone, ciò può causare un "salto" improvviso del contenuto della pagina quando viene caricata l'immagine di dimensioni diverse.
• Includere altezza e larghezza per immagini e video: le proprietà di altezza e larghezza riportano ai browser le dimensioni di un'immagine, in modo che essi possano riservare lo spazio necessario prima che un'immagine o un filmato vengano caricati. Il nostro articolo sui video HTML5 contiene ulteriori informazioni su come includere le dimensioni per i filmati.
• Utilizzare i box CSS per i rapporti d'aspetto: esistono numerose tecniche CSS che gli sviluppatori possono utilizzare per preservare lo spazio per un elemento della pagina utilizzando i rapporti d'aspetto: scopri di più qui.

Quali altre metriche sulle prestazioni sono importanti?

Sebbene i CWV siano le metriche che Google ha indicato ai professionisti SEO come prioritarie, esse non sono gli unici parametri fondamentali sul web. Il First Contentful Paint (FCP), il DOMContentLoaded (DCL), il Time to Interactive (TTI) e il Time to First Byte (TTFB) non influiscono sulla SEO allo stesso modo, ma possono aiutare gli sviluppatori a identificare i problemi che influiscono sui CWV.

Preso singolarmente, il Time to First Byte non è un parametro particolarmente utile, ma può evidenziare ulteriori problematiche che gli sviluppatori dovranno risolvere.

In che modo Cloudflare può aiutare a migliorare i CWV

Cloudflare offre una varietà di servizi che possono aiutare a migliorare i CWV:

• La Content Delivery Network (CDN) di Cloudflare memorizza nella cache contenuti statici e contenuti dinamici su una rete globale che si estende su più di 335 città in oltre 125 paesi. Questo consente ai siti web di caricarsi più velocemente, un aspetto che senz'altro va a beneficio dei CWV.
• Cloudflare Images offre funzionalità di ridimensionamento che possono comprimere le immagini e aumentare ulteriormente la velocità di caricamento di un sito specialmente per l'LCP.
• Cloudflare Zaraz carica risorse di terze parti nel cloud e lontano dal browser, apportando miglioramenti a metriche come il FID e il CLS.