Core Web Vitals, da zero a SEO, guida completa
La visibilità del tuo sito dipende oggi dalle sue performance, metriche che Google chiama Core Web Vitals. Sono fattore di ranking, le hai mai misurate?
È dal mese di Febbraio 2022 che i Core Web Vitals sono ufficialmente fattore di Ranking per Google. Qui trovi la nostra guida completa per WordPress, per migliorare le tue performance.
Nonostante le raccomandazioni di Google, si trovano ancora siti che caricano le loro pagine ben oltre i 3 secondi che Google pretende. Perché?
La risposta è sempre easy.
Perché, soprattutto in Italia, è l’estetica a dominare gli scenari del Web, a discapito di usabilità e performance.
Questo articolo vuole essere una guida completa a queste metriche significative a cui Google tiene parecchio. Parliamo quindi di SEO tecnica, un aspetto SEO decisamente importante che sarà anche oggetto del nostro corso SEO individuale.
Vediamo quindi come si può rilevarle in modo semplice, proprio tramite uno dei tanti siti di Google:
Ecco le tre metriche principali per capire come sta performando il tuo sito:
Largest Contentful Paint, LCP: misura le prestazioni di caricamento, ovvero il tempo percepito in cui è probabile che il contenuto principale della pagina venga caricato. Dovrebbe essere inferiore a 2,5 secondi.
First Input Delay, FID: misura l’interattività, ovvero Il tempo necessario perché l’utente possa immettere un input verso il sito. Dovrebbe essere inferiore a 100 millisecondi.
Cumulative Layout Shift, CLS: misura la stabilità visiva. Il layout dovrebbe essere visivamente stabile e mantenere un CLS inferiore a 0,1.
La metrica FID è però destinata a essere sostituita (marzo 2024) dalla “Interaction to Next Paint” (INP).
Quest’ultima misurerà la reattività complessiva di una pagina rispetto alle interazioni dell’utente, osservando la latenza di tutte le interazioni qualificanti che si verifichino per tutta la durata della visita a una determinata pagina. La sua metrica dovrebbe rimanere sempre inferiore a 200 millisecondi.
Vediamo le singole metriche al dettaglio.
Largest Contentful Paint, guida completa WordPress ai Core Web Vitals
Secondo Google, un buon punteggio LCP dovrebbe essere di 2,5 secondi o meno. Se l’elemento più grande delle tue pagine impiega più tempo a caricarsi, può risultare in una scarsa esperienza utente (User Experience, UX).
Ciò può, a sua volta, portare a una frequenza di rimbalzo più elevata, altro fattore di ranking importante che verrebbe meno.
Pertanto, è essenziale ottimizzare il tuo sito per ottenere un punteggio LCP migliore.
Ecco alcuni elementi su cui poter lavorare per migliorare questa metrica.
LCP – Ottimizzazione delle immagini.
Le immagini vanno compresse. Possiamo utilizzare un plugin di compressione come Optimole.
Ancora, possiamo impiegare un formato di immagini per il Web. Le immagini WebP rappresentano un moderno formato di immagini e garantiscono una compressione avanzata, ottimizzando l’esperienza visiva sul Web.
Sfruttando WebP, gli sviluppatori e i responsabili dei siti web possono creare immagini più compatte e di alta qualità, favorendo così la velocità di caricamento delle pagine web.
Le immagini senza perdita di dati in formato WebP offrono una riduzione del 26% rispetto ai file PNG. Le immagini con perdita di dati in formato WebP, invece, si contraddistinguono per dimensioni inferiori del 25-34% rispetto alle immagini JPEG, equivalenti in termini di qualità Structural Similarity Index Measure (SSIM).
WebP Express è un ottimo plugin in tale senso.
LCP – Eliminare le risorse che bloccano il rendering.
Qui abbiamo solo l’imbarazzo della scelta. Un interessante approccio è utilizzare lo strumento di Google: Chrome DevTools e andare a vedere CSS e JS non usati. Dalla visualizzazione classica, usiamo il tasto destro e ispezioniamo la pagina. Selezioniamo “Sources” e poi “Coverage”. La schermata ci darà una esatta definizione di quanti byte sono in eccesso perché non svolgono alcuna funzione visiva al momento.
Ci sono poi plugin validissimi come https://nitropack.io/ che offrono un sistema di ottimizzazione molto ampio. Nitropack offre anche la funzione (da attivare da pannello) per evitare il caricamento di CSS e Js inutili. Qui sarà necessario usare con accortezza e tanta attenzione, soprattutto perché a livello mobile, potrebbe generare qualche complicazione extra nel corretto rendering della pagina.
LCP – Utilizzare una rete per la distribuzione di contenuti (CDN)
Una rete per la distribuzione di contenuti (CDN) migliora le prestazioni di un sito Web e il tempo di caricamento della pagina, memorizzando nella cache le risorse su più server periferici che sono geograficamente distribuiti per essere localizzati a non più di 40-60 millisecondi dall’utente finale. Mettendo nella cache contenuti statici come immagini, CSS e JavaScript relativamente vicino agli utenti, una CDN aiuta a migliorare i punteggi di Core Web Vitals, soprattutto l’LCP. Anche qui diversi plugin permettono la distribuzione dei contenuti su piattaforme CDN.
LCP – Rimuovere i plugin inutilizzati dal tuo sito.
I plugin ci rendono la vita facile, ma come ci insegna il Mado di DIVI, ogni plugin è un sovraccarico per la nostra piattaforma preferita. Quindi mai lasciare plugin che non usiamo, ma soprattutto verificare ogni plugin prima di installarlo. CI sono plugin che sovraccaricano il consumo di memoria del server, altri che caricano una infinità di file ecc.. Questo è l’estensione di Chrome per fare ogni test su ogni plugin: WP Hive test script.
LCP – Ridurre i tempi di risposta del tuo server passando a un piano di hosting più potente.
Quando il cliente si domanda i costi di hosting, andrebbe sempre fatto notare come un hosting condiviso abbia performance decisamente meno eclatanti di un hosting dedicato. Il costo qui è sempre un investimento.
Interaction to Next Paint, guida completa WordPress ai Core Web Vitals
Il modo migliore per ridurre l’INP è ridurre la quantità di dati da elaborare attraverso la CPU. Si può eseguire più codice possibile in modo asincrono, così che l’utente riceva un aggiornamento immediato dell’interfaccia utente, anche se è ancora in corso il caricamento della pagina stessa.
L’ottimizzazione dell’INP implica un check-up completo di script e plugin di terze parti che potrebbero rendere il tuo sito Web meno reattivo. DevTools anche qui si rivela un ottimo strumento per scoprire cosa sta succedendo nel thread principale della pagina e capire come ottimizzarlo.
INP – Ridurre l’Input Delay
Quando si esaminano i dati, è possibile esaminare la metrica Total Blocking Time per vedere se sono presenti attività in background che bloccano le interazioni dell’utente.
Se il codice di terze parti è responsabile delle attività in background, si può verificare se il codice è configurabile per ridurre la quantità di lavoro o se è possibile caricare lo script di terze parti solo quando necessario.
INP – Ridurre l’elaborazione del processore
Il modo in cui ottimizzi l’attività della CPU dipenderà in gran parte dal tuo sito. Devi indagare dove il browser trascorre la maggior parte del suo tempo e ottimizzare quelle parti. Dovresti evitare inutili ripetizioni dei tuoi componenti per velocizzare il tuo sito web.
Se molta attività della CPU consiste nel lavoro di layout, controlla come poter ridurre il re-layout.
Se è necessario eseguire un’elaborazione JavaScript pesante in risposta all’input dell’utente, prendere in considerazione l’aggiornamento dell’interfaccia utente prima di avviare l’attività della CPU. r
INP – Ridurre il ritardo nella presentazione
La quantità di ritardo nella presentazione della pagina dipenderà dalla sua complessità e dalla quantità di codice che si sta aggiornando. Se il rendering dei contenuti della pagina è lento, prendi in considerazione l’ipotesi di di mostrare prima solo i contenuti “above the fold” e poi il resto.
Cumulative Layout Shift, guida completa WordPress ai Core Web Vitals
La variazione cumulativa del layout si verifica quando il contenuto della tua pagina si sposta senza l’interazione dell’utente. Un esempio comune sono le pubblicità a caricamento ritardato, che probabilmente hai riscontrato sui diversi siti.
Come puoi immaginare, lo spostamento degli elementi all’interno della pagina, può generare il caos nella testa per i tuoi utenti.
Anche se non ci sono conseguenze dirette, molti cambiamenti di layout possono essere visivamente fastidiosi. In combinazione con il fatto che può rallentare i tempi di caricamento, questo problema apparentemente piccolo può avere gravi ripercussioni sull’esperienza utente (UX).
Come correggere lo “spostamento cumulativo del layout” in WordPress.
CLS – Dimensionare immagini, video e annunci
Se hai molti media sul tuo sito web, è probabile che ogni immagine e video abbia dimensioni diverse. Questo è probabilmente inevitabile, indipendentemente dal tipo di sito che gestisci. Fondamentalmente, questa variazione non influisce direttamente sul tuo punteggio CLS. Tuttavia, rappresenta ancora una minaccia: se non specifichi le dimensioni di immagini, video e annunci, si possono verificare problemi.
L’aggiunta delle dimensioni è essenziale perché fornisce istruzioni di caricamento vitali ai browser. Le informazioni sulle dimensioni aiutano i browser a riservare la quantità corretta di spazio per quella risorsa.
Se il browser non è in grado di eseguire questa operazione, potrebbe prevedere la quantità errata di spazio. Di conseguenza, potrebbero esserci delle correzioni dopo che la pagina è stata caricata, portando a uno spostamento del layout. Lo stesso principio si applica agli annunci o a qualsiasi materiale incorporato nel tuo sito.
Fortunatamente, le versioni recenti di WordPress si occupano in gran parte di questo problema. Se inserisci un’immagine tramite l’editor di WordPress, WordPress gestirà automaticamente la definizione delle sue dimensioni per te. Puoi vedere i risultati selezionando qualsiasi elemento multimediale:
Un problema molto più grande con CLS su WordPress è la pubblicità. Se inserisci annunci pubblicitari nei tuoi contenuti, dovrai assicurarti di riservare spazio per tali annunci per evitare l’effetto CLS.
Un modo per farlo è applicare le proprietà min-height e min-width attraverso i CSS applicato al “div” che contiene il tuo annuncio.
CLS – Precaricare i Font
Proprio come con i media, il tuo sito utilizza probabilmente molti caratteri diversi. Ciò significa che possono anche occupare quantità variabili di spazio. A differenza dei media, tuttavia, non è possibile impostare esattamente le dimensioni dei caratteri.
La soluzione è invece precaricare queste risorse. Includendo i font per prima cosa, elimini la necessità di uno spostamento correttivo dopo il caricamento della pagina.
Questo metodo può essere particolarmente critico se utilizzi molti font WordPress personalizzati . Questi possono variare notevolmente in termini di dimensioni rispetto ai caratteri normali, il che significa che questa semplice modifica può avere un grande impatto. Tuttavia, è probabile che anche i siti meno dipendenti dai caratteri riscontrino almeno un lieve miglioramento del punteggio CLS.
Molti plug-in per le prestazioni di WordPress includono opzioni per precaricare i caratteri. Ad esempio, Nitropak, Autoptimize, Asset CleanUp, Perfmatters e WP Rocket.
Potresti anche risolvere andando a modificare il file header.php (tema child).
CLS – Ottimizzare i contenuti dinamici
Infine, parliamo del contenuto dinamico del tuo sito. Contenuti dinamici come moduli di iscrizione alla newsletter, richieste di installazione di app, avvisi GDPR e così via possono causare cambiamenti di layout facendo sì che il browser si riadatti dopo che la pagina è già in gran parte caricata.
Ci sono due modi per risolvere questo problema:
Attiva i contenuti dinamici solo dopo l’interazione dell’utente.
Usa i CSS per riservare spazio a gli elementi dinamici, in modo simile a quanto discusso sopra.
Da Zero a SEO con i Core Web Vitals, conclusioni
Come previsto, non c’è una sola strada per arrivare al successo e quindi avere un sito performante, pienamente Web Vitals Friendly. La strada del successo deve essere percorsa a step, provando, verificando e ritestando ogni approccio.
