Come analizzare e ottimizzare i core web vitals

Google l’aveva già annunciato nel 2020. 

I core web vitals sarebbero entrati a far parte degli algoritmi del motore di ricerca nel 2021. 

E così è stato.

Google ha introdotto un update dell’algoritmo a giugno 2021, che ha subito modifiche nei mesi successivi e che arriverà a toccare i dispositivi Desktop nel 2022. 

Ciò significa che devi essere pronto.

In questo articolo voglio spiegarti il processo per riuscire a identificare i problemi del tuo sito partendo da cosa sono i core web vitals, quali strumenti utilizzare per analizzarli e come ottimizzarli per offrire una migliore esperienza utente sul tuo sito web.

 

Cosa sono i core web vitals

Abbiamo parlato di esperienza utente, giusto? Tieni a mente questo concetto perché è il cardine attorno al quale ruota tutto ciò che sto per dirti. 

Capire cosa sono i core web vitals è molto semplice. 

Si tratta di metriche progettate per misurare le prestazioni di un sito web dal punto di vista dell’esperienza utente.

Nella pratica di cosa stiamo parlando? Di parametri. 

Questi parametri vengono utilizzati per misurare diversi aspetti relativi al tuo sito web.

Quali?

• Caricamento;
• l’interattività;
• la stabilità visiva. 

In poche parole, per ottimizzare l’esperienza utente devi basarti su questi fattori. 

Le 3 metriche hanno nomi specifici: 

• Largest Contentful Paint (LCP): è la metrica che misura la velocità di caricamento dell’elemento più grande all’interno della pagina. Dovrebbe essere entro 2,5 secondi per offrire una buona esperienza utente; 
• First Input Delay (FID): misura l’interattività, ossia il tempo che il sito impiega a rispondere dopo il click dell’utente, che dovrebbe essere inferiore a 100 millisecondi; 
• Cumulative Layout Shift (CLS): misura la stabilità visiva, ossia valuta se ci sono delle variazioni nel contenuto dello schermo durante il caricamento dei vari elementi della pagina. Il valore dovrebbe essere inferiore a 0,1.

 

Dove puoi leggere i dati sui core web vitals

Essendo parametri utilizzati da Google, il motore di ricerca incorpora già all’interno di molti dei suoi strumenti delle funzionalità che ti permettono di misurare e analizzare i core web vitals. 

I dati sui core web vitals possono essere letti e misurati, in primis, utilizzando direttamente gli strumenti di Google come: 

• Search Console
• Chrome DevTools
• Chrome UX Report
• PageSpeed Insights
• Lighthouse

A me, per esempio, piace ricorrere a uno specifico tool SEO chiamato Screaming Frog. E, tra poco, spiegherò anche a te come sfruttarlo. 

 

Il rapporto dell’esperienza sulle pagine di Google Search Console

Google cerca sempre di dare ai proprietari dei siti tutti gli strumenti necessari per il benessere delle proprie piattaforme. Così, all’interno di Search Console, ha pubblicato il Report Esperienza sulle pagine. 

A cosa serve il report? Ad aiutare i proprietari dei siti web a fare una valutazione delle pagine.

Il report fornisce un riepilogo dell’esperienza utente e lo fa analizzando le 3 metriche che abbiamo visto prima per ogni singolo URL del sito. 

Inizialmente, la valutazione interessava solamente i dispositivi mobili. Ma a Google piace evolversi, ed ecco perché nel 2022 si estenderà anche ai dispositivi Desktop.  

 

I core web vitals sono un fattore di ranking per Google?

Finora ti ho detto cosa sono i core web vitals, ma non ti ho ancora detto quale peso hanno per il motore di ricerca. 

Facciamo un passo avanti. Google valuta quindi le metriche relative all’esperienza sulle singole pagine, ma poi le utilizza come indicatore di ranking nei risultati della Ricerca di Google. 

Quindi la risposta è Sì. 

A dire il vero, in casa Google c’è stato un po’ di polverone a riguardo.

 Inizialmente, l’ingegnere Philip Walton ha dichiarato in un confronto che i core web vitals non costituivano fattori di ranking. 

Ciò sembrava essere stato confermato anche dal Google Search Advocate, John Mueller. 

Quest’ultimo si è tuttavia dovuto ricredere quando ha notato che i siti ottimizzati avevano anche un ranking migliore.  

A dissipare la nebbia è stato il motore di ricerca stesso. Sul blog di Google Search Central è apparso un articolo che stabilisce la rilevanza dei core web vitals ai fini del ranking. 

Anche se, un aggiornamento risalente ad agosto 2021 ha dichiarato che la funzionalità Navigazione non viene utilizzata come fattore di ranking. 

 

Come analizzare i core web vitals su Screaming Frog

Capire cosa sono i core web vitals non è tanto difficile, tutt’altra storia è invece saper analizzare i core web vitals. 

In questo, però, non devi preoccuparti. Ti fornirò qualche dritta per usare uno dei miei tool preferiti!

Per analizzare i core web vitals con Screaming Frog è necessaria una chiave API da PageSpeed Insights, il dominio del sito che intendi analizzare e una versione a pagamento della piattaforma, se hai più di 500 url da analizzare. 

Con questo alla mano, i passaggi da seguire sono: 

• Inserisci la chiave API all’interno di Screaming Frog, nella sezione Configurazione; 
• Seleziona le metriche che ti interessa analizzare, tra cui panoramica, metriche CrUX, metriche Lighthouse, opportunità e diagnostica (puoi anche selezionare tutto il gruppo); 
• Inserisci il dominio ed effettua la scansione del sito web; 
• Apri Page Speed dal menù in alto così da visualizzare i risultati;
• Segna le pagine che non raggiungono risultati ottimali lato core web vitals;
• Esporta il tutto su un comodo foglio excel; 
• Segna i problemi di ogni singola pagina web; 
• Risolvi gli errori e ripeti la scansione. 

 

Come ottimizzare i core web vitals

Tutto il procedimento fatto finora è stato necessario per farti capire quali sono i problemi presenti sul tuo sito web. A questo punto, è arrivato il momento di ottimizzare i core web vitals. 

Ecco cosa incide su un punteggio scarso e come correggere gli errori. 

Le cause che portano a un LCP scarso

Ricordi cosa ti ho detto quando ti ho parlato di cosa sono i core web vitals? La metrica Largest Contentful Paint (LCP) è quella che misura la velocità di caricamento dell’elemento più grande, che può essere di testo ma più spesso multimediale, nella finestra. 

Un valore buono deve rientrare entro i 2,5 secondi. È questo il tuo goal.

I problemi all’origine di un LCP scarso sono diversi, ma ce ne sono quattro particolarmente comuni (e quindi i primi che devi cercare): 

• Tempo di risposta del server lento;
• Rendering bloccato da CSS e JavaScript;
• Rendering lato client;
• Tempo di caricamento delle risorse lento.

A questo punto, vediamo come migliorare tutti questi fattori per ottimizzare i core web vitals del tuo sito. 

Come migliorare il tempo di risposta del server

Ho una brutta notizia. Il tempo di risposta del server può essere influenzato davvero da tanti fattori. 

Dalla mia esperienza, ti consiglio di effettuare le seguenti manovre per migliorare il tempo di risposta del server: 

• Fai un upgrade del server;
• Invalida le risorse memorizzate nella cache;
• Riduci l’impatto del codice di terze parti, stabilendo prima le connessioni;
• Indirizza gli utenti verso una rete CDN, una rete per la distribuzione di contenuti.

Se non sei in grado di intervenire direttamente su questo aspetto, puoi chiedere agli sviluppatori del tuo sito di farlo. 

Come correggere i CSS che bloccano il rendering

Una seconda causa di LCP scarso può essere creata dai CSS che bloccano il rendering.

Ecco cosa puoi fare per correggere questo fattore: 

• Usare query multimediali dinamiche: sono filtri che, nel momento in cui vengono applicati ai CSS, calcolano gli stili per la singola finestra; 
• Minimizzare il CSS: utilizzare un plugin per minimizzare gli script;
• CSS critico: è un processo che acquisisce il CSS minimo per migliorare la user experience e che va incluso nella stringa <head>; 
• Rinviare CSS non critico: gli stili che non vengono utilizzati su nessuna pagina devono essere direttamente rimossi, altrimenti dovresti creare un foglio di stile nel momento in cui vengono utilizzati su una pagina.

Come correggere i JS che bloccano il rendering

Non soltanto i CSS possono bloccare il rendering, ma anche i file JavaScript. Si dice che JS e SEO non vanno d’accordo da sempre. Un po’ è vero. Se vuoi eliminare i problemi che JS crea in fase di rendering, devi minimizzare e comprimere i file JS.

Come mai? Facile. 

In primis, il processo di minimizzazione è importante perché ti aiuta a rimuovere le parti di codice che non sono necessarie e gli spazi bianchi. 

Mettere le mani nel codice, infatti, è uno dei metodi più efficaci per risolvere i problemi di velocità. 

Per comprimere i file JavaScript sono disponibili degli appositi plugin. Io consiglio Wp Rocket… oppure affidati a uno sviluppatore. 

La compressione modifica il formato dei dati e rende il sito più performante. 

In questa fase è importante intervenire sia sui JavaScript che sui polyfill inutilizzati. I polyfill sono dei codici scaricabili che permettono di aggiungere interfacce non implementate, venivano utilizzati nei vecchi browser. 

Ovviamente, se trovi dei polyfill inutilizzati, questi devono essere rimossi. 

Come correggere gli script di terze parti che bloccano il rendering

Continuando con i consigli su come ottimizzare i core web vitals, ci imbattiamo nella verifica degli script di terze parti. 

Attenzione, perché questi possono bloccare il rendering e penalizzare le prestazioni del tuo sito!

Qual è la soluzione? 

Soppesare il valore di questo script. 

Devi fare una scelta: o il valore è talmente alto da sacrificare le prestazioni oppure non lo è.

Inoltre, accertati sempre di aver aggiornato la versione. A volte vengono rilasciati gli aggiornamenti ma gli utilizzatori non lo sanno e perdono l’opportunità di migliorare le performance del sito. 

Come ottimizzare il rendering lato client

Se hai effettuato delle modifiche e, in concomitanza, hai notato un calo del traffico, forse hai qualche problema di rendering dal lato client. 

Per questa ottimizzazione devi valutare l’origine della pagina. 

Infatti, gli elementi presenti all’interno di una pagina possono essere oggetto di rendering lato client.

Come trovare questi elementi? Confrontando l’HTML che visualizzi con l’origine della pagina. 

Ecco come puoi risolvere il problema: 

• Usare il rendering lato server: per far eseguire gli elementi di JavaScript; 
• Usare il pre-rendering: con questa funzionalità gli elementi contenuti all’interno di una pagina vengono pre-reindirizzati in vista di un prossimo click dell’utente, questo avviene quotidianamente con i migliori risultati della Ricerca di Google;
• Ridurre JavaScript critico: migliorare la velocità del sito con la suddivisione del codice.

Come ottimizzare i file sulla pagina

A rallentare le prestazioni del sito web potrebbe essere anche un caricamento lento delle risorse all’interno della pagina. 

Un classico!

Stai tranquillo, ottimizzare i file è abbastanza facile. Devi: 

• Comprimere le immagini: sono i file più pesanti e quelli che maggiormente incidono sulla velocità di caricamento, senza contare che il web non richiede una qualità ottimale, perciò è più saggio comprimerle e puntare sull’esperienza utente; 
• Comprimere i testi: alla stregua delle immagini, anche i file di testo vanno codificati e compressi; 
• Pre-caricare le risorse: puoi comunicare al browser di precaricare una risorsa che fa parte del percorso critico; 
• Archiviare risorse nella cache: attraverso Lighthouse, ad esempio, puoi contrassegnare le risorse memorizzabili nella cache; 
• Diversificare le risorse: in base alla connessione di rete utilizzata dall’utente, diversifica le risorse fornite per migliorare la user experience in base agli strumenti di cui dispone.

Le cause che portano a un FID scarso

La seconda metrica dei core web vitals è l’interattività. La First Input Delay, FID per semplificare, valuta il tempo trascorso dal momento in cui un utente ha fatto click al momento in cui il browser elabora la risposta. 

Un posizionamento buono si ottiene con un tempo inferiore ai 100 millisecondi.

Come mai un FID è scarso? Vediamo le cause principali: 

• Pagina non ottimizzata;
• File JavaScript che occupa il thread principale, lasciando in attesa gli utenti;
• Pacchetti JavaScript troppo grandi;
• Script di terze parti.

Per evitare che gli utenti inizino a cliccare compulsivamente su qualsiasi elemento gli appaia per primo, devi risolvere velocemente il problema. Ecco come. 

Come ottimizzare il FID

Con queste informazioni alla mano, vediamo quali sono le migliorie che puoi fare per ottimizzare i web core vitals dal punto di vista dell’interattività: 

• Ottimizza la pagina: concentrati soprattutto su “above the fold”, ossia la parte superiore della pagina, quella più visibile; 
• Libera il thread principale: come abbiamo detto, i JavaScript sul thread principale rallentano il sito e lasciano in attesa gli utenti; perciò, dovresti spacchettare grossi gruppi di JV in gruppi più piccoli;
• Scomponi i pacchetti JavaScript: nei grossi pacchetti sono comprese molte funzionalità non essenziali alla pagina, ecco perché devi creare blocchi più piccoli e utilizzare solo le funzionalità necessarie; 
• Non caricare troppi script di terze parti: il tuo sito è performante solamente se anche i loro script lo sono, e non è detto che lo siano.

Le cause che portano a un CLS scarso

L’ultima metrica che fa parte dei core web vitals è il Cumulative Layout Shift (CLS), ossia la stabilità visiva. 

Ricapitoliamo cos’è: un calcolo basato sulla formazione dei fotogrammi sulla pagina per calcolare la variazione del contenuto durante il caricamento. 

Un buon valore è inferiore allo 0,1.

Un CLS scadente può dipendere da:

• Annunci e ogni elemento incorporato senza dimensioni;
• Immagini senza dimensioni;
• Avviso dei cookie;
• Utilizzo di font personalizzati che causano i cosiddetti FOIT e FOUT, nel primo caso appaiono dei caratteri vuoti e nel secondo viene caricato il più velocemente possibile il contenuto; 
• Catene di attività per le risorse critiche. 

Ma vediamo subito dove mettere le mani per risolvere tutte queste problematiche. 

Come ottimizzare il CLS

Ecco come ottimizzare i core web vitals e migliorare la stabilità visiva del tuo sito web: 

• Riservare delle aree agli annunci: scegli delle aree del tuo sito apposite per la pubblicazione degli annunci e non comprimerli, per evitare che risultino senza dimensioni (ed evita la parte superiore della pagina); 
• Ridimensionare attributi immagini: se il problema sono le immagini e i video senza dimensioni, ricordati sempre di inserire gli attributi “width” e “height”;
• Non sommare i contenuti: se devi aggiungere dei nuovi contenuti, non inserirli su quelli già presenti nella pagina; 
• Gestire meglio i font: per quanto riguarda i font personalizzati, la strategia migliore è quella di precaricarli; 

 

Occhio anche al Desktop

La metrica dell’esperienza di pagina è già in uso su Google dall’agosto 2020, ma è a febbraio 2022 che interesserà non più soltanto la versione mobile ma anche quella Desktop. 

Nel momento in cui sto scrivendo questo post, Google ha aggiornato la Search Console con il dato Page Experience anche per il Desktop.

Cambia poco rispetto al mobile. Manca solo la sezione usabilità sui dispositivi mobile, che non serve per analizzare la versione desktop.

Il rapporto di Search Console servirà ai proprietari dei siti per aiutarli a capire come si comportano le loro pagine web per quanto riguarda la visualizzazione Desktop. 

Ora, il posizionamento su Google è da sempre una sfida. 

Ma una sfida che puoi vincere se cominci già da oggi ad analizzare e ottimizzare i core web vitals. 

Lavora sul tuo sito perfezionando tutti gli elementi che abbiamo visto, offri ai tuoi utenti la migliore esperienza di cui sei capace e vedrai che Google ti ricompenserà. Matematico!

 

Alessandro Aru

SEO Manager at Nextre Digital