Cosa sono i Core Web Vitals? Come ottimizzare i Core Web Vitals di un sito?
Se non hai mai sentito parlare di Core Web Vitals e sei incuriosito da questi parametri, ti trovi nel posto giusto. Nella nostra guida SEO, ti spiegheremo nel dettaglio cosa sono i Core Web Vitals e quali sono le tecniche per ottimizzarli.
Ma partiamo dal principio.
Di Core Web Vitals si parla molto già dal 2020, quando Google ha annunciato che dall’anno successivo queste metriche sarebbero diventate importanti ai fini della ricerca, soprattutto per la parte mobile.
Fino ad ora, tuttavia, solo gli esperti del settore hanno avuto modo di approfondire e lavorare su parametri come velocità, interattività o stabilità visiva.
Chi ha un sito internet, però non può affatto ignorare metriche dalle funzioni fondamentali: se da un lato, infatti, i Core Vitals permettono di valutare l’esperienza dell’utente, dall’altro gli esperti sono concordi nel ritenerli fattori di ranking indispensabili ai fini del posizionamento sui motori di ricerca.
Partiamo con il nostro approfondimento sui Core Web Vitals.
Cosa sono i Core Web Vitals (Segnali web essenziali)
Già da tempo l’esperienza utente è diventata una dei fattori di ranking di maggior impatto agli occhi di Google. Il motore di ricerca, infatti, vuole offrire alle persone un’esperienza online di valore, senza interruzioni, ritardi o fastidi di nessun tipo.
Per poter monitorare la user experience, Google ha individuato dei fattori che influiscono sull’esperienza di navigazione dell’utente:
- caricamento;
- stabilità visiva;
- interattività.
Ad essi sono state associate delle metriche che permettono di misurare sul campo le prestazioni e l’efficienza del sito:
- Largest Contentful Paint (LCP);
- Cumulative Layout Shift (CLS).
Queste prime due metriche misurano rispettivamente il caricamento e la stabilità visiva di una pagina web. Più nello specifico, il Largest contentful paint misura la velocità di caricamento della pagina, che dovrebbe avvenire entro massimo 2,5 secondi.
Il parametro di riferimento è infatti rappresentato dall’elemento più pesante all’interno della pagina, che può essere costituito da un’immagine o da un video. Il Cumulative Layout Shift, invece, è la metrica che misura la stabilità visiva e non dovrebbe superare lo 0,1 in nessun caso.
Come avrai certamente notato, non ti abbiamo ancora indicato la metrica più importante: quella che misura l’interattività della pagina, ovvero in quanto tempo il sito riesce a rispondere alle richieste degli utenti. Secondo Google, il tempo di interazione (FID) non dovrebbe superare i 100 millisecondi.
Lo spostamento del layout è un aspetto spesso sottovalutato, ma che influisce pesantemente sull’esperienza utente, lasciandolo a cliccare nel vuoto o facendolo interagire con pulsanti a cui non era assolutamente interessato.
Fino adesso, la metrica responsabile di tale misurazione prendeva il nome di First Input Delay (FID). A partire dall’anno prossimo, il 2024, tale parametro verrà però sostituto da uno nuovo, denominato “Interaction to Next Paint” o, più semplicemente, INP. Una discorso che vale la pena approfondire.
INP, la nuova metrica che misura la reattività
I primi accenni relativi a questo grande cambiamento si ravvisavano già nel 2022, sebbene la questione sia divenuta ufficiale solo in seguito all’annuncio avvenuto nel corso della conferenza di Google I/O 2022. Ci sono voluti ben 12 mesi di test ed esperimenti, ma il cambio è ormai imminente e la nuova metrica INP è pronta a sostituire definitivamente l’ormai superata FID.
Ma come mai questo parametro è migliore rispetto a quello precedente? La risposta sta tutta nel significato del suo nome: INP è infatti l’acronimo di “Interaction to Next Paint” che, tradotto in italiano, suona più o meno come “interazione fino alla successiva visualizzazione”.
Ciò significa, in parole povere, che questa nuova metrica è in grado di misurare il ciclo di vita a pagina intera, tenendo cioè conto di tutte le interazioni, grazie al fatto di cambiare e di aggiornarsi continuamente. In aggiunta a questo, offre anche una misurazione molto più precisa ed efficace, registrandola solo ed esclusivamente quando l’utente abbandona la pagina.
Core Web Vitals per Mobile e per Desktop
Sebbene i Core Vitals siano fondamentali sia per chi si connette dai dispositivi mobili che da desktop, non è detto che essi siano buoni in entrambi i casi. Google, infatti, ha iniziato a valutare i segnali web essenziali su tutti i browser (mobile e desktop) nel 2022 ma i risultati sono molto diversi.
Tra i dispositivi mobili, al momento, ci sono una moltitudine di siti dalle performance scadenti, ossia che non rispettano i limiti indicati per i tre Core vitals. Il parametro sul quale è possibile riscontrare una certa uniformità è il Largest Contentful Paint mentre, per quanto riguarda CLS e FID, l’esperienza su mobile risulta più scadente rispetto al desktop. Un problema che, una volta che FID verrà sostituto da INP, non potrà che migliorare.
Ma quali sono, attualmente, i motivi di questa difformità? Ottimizzare i Core Web Vitals è certamente più difficile sui dispositivi mobili ma i parametri scadenti possono dipendere da vari fattori.
Il tempo di caricamento può essere rallentato da un tempo di risposta del server lento, da rendering bloccato da CSS e JavaScript, dal rendering lato client, da tempistiche lunghe per il caricamento dei file. L’interattività viene inficiata da pagine non ottimizzate, lunghe attese dovute all’esecuzione dei file JavaScript, JavaScript troppo pesanti, Script di terze parti.
La stabilità della pagina, invece, dipende da annunci che non hanno un layout fisso e dimensioni stabilite, comparsa del cookie banner, presenza di contenuti dinamici, utilizzo di font personalizzati, che possono provocare la comparsa di caratteri vuoti (fenomeno detto FOIT) oppure aumentare troppo la velocità di caricamento del contenuto (FOUT).
Queste problematiche sono decisive per l’esperienza utente sia da mobile che da desktop. Ma come si possono controllare i dati sui Core Web Vitals?
Dove si trovano i dati sui Core Web Vitals
Per capire come ottimizzare i Core Web Vitals si deve puntare all’utilizzo di strumenti di analisi specifici ed estensioni, che eseguano test e rilascino report dettagliati da prendere come riferimento.
Uno tra i più funzionali è il Search Console di Google, che permette di valutare l’esperienza utente attraverso i Core Web Vitals che abbiamo descritto, inserendo gli URL del sito. Quello che ne viene fuori è un Report esperienza sulle pagine molto dettagliato che, inizialmente, era riservato solo all’analisi dei siti mobili ma ora può essere utilizzato anche per i siti da desktop.
Gli strumenti di Google non si limitano solo a Search Console, ma includono anche altri tool, come:
- Chrome DevTools.
- Chrome UX Report.
- Lighthouse.
- PageSpeed Insights.
Nella nostra agenzia SEO utilizziamo anche altri tool professionali, come Screaming Frog, che offrono lo stesso tipo di funzionalità ma richiedono maggiori competenze.
Come si controllano i Core Web Vitals di un sito web
Come avrai capito, ci sono moltissimi tool per misurare le performance di un sito ma è fondamentale saper leggere i dati al meglio e utilizzarli per ottimizzare il sito.
Screaming Frog, ad esempio, è un tool a pagamento che necessita di una chiave API da PageSpeed Insights per poter eseguire l’analisi.
Per eseguire la scansione bisogna conoscere il nome del dominio e configurare la chiave API nella sezione Configurazione del tool.
Dopodiché vanno scelti i parametri da analizzare in un gruppo proposto proprio dal tool, che comprende panoramica, metriche CrUX, metriche Lighthouse, opportunità e diagnostica. È possibile anche ottenere risultati su tutte le metriche disponibili.
Scopri come possiamo aiutarti a ottenere più traffico sul tuo sito web o sul tuo negozio online.
- Strategia SEO
- Content Marketing
- Ottimizzazione sito/e-commerce
L’accesso alle statistiche avviene inserendo il dominio del sito web, e dal menù è possibile controllare i valori di ogni pagina.
Durante la lettura dei risultati, annotiamo su un foglio excel tutti gli errori da correggere che sono collegati ai Core Web Vitals.
La fase di controllo va portata avanti con molta attenzione e non è possibile trascurare nessun piccolo sbaglio per poter risolvere i problemi relativi ad ogni pagina del sito web.
Una volta finita la correzione degli errori emersi, ripetiamo la scansione per ottenere un risultato di qualità.
Ma come si ottimizzano i Core Web Vitals?
Come si ottimizzano i Core Web Vitals di un sito
Ricordi quando ti abbiamo parlato dei fattori che incidono sull’esperienza utente?
Un server che risponde lentamente, il rendering bloccato, la presenza del layout fisso, il cookie banner, i caratteri personalizzati sono alcuni dei motivi per cui un sito ha performance scarse.
Per fornire un’esperienza utente di qualità è necessario individuare le problematiche e lavorare in modo certosino su ognuna di esse.
Vediamo come si correggono gli sbagli e come ottimizzare i Core Web Vitals del sito.
Ridurre il tempo di risposta del server
Come migliorare il tempo di risposta del server? Come velocizzare il caricamento delle pagine?
Queste sono tra le domande che ci vengono poste più spesso durante una consulenza SEO perché è proprio dalla velocità di caricamento che dipende la permanenza sul sito.
Forse non sai che i primi 5 secondi sul sito incidono più degli altri sul tasso di conversione. I tassi di conversione migliori sono quelli ottenuti dalle pagine che hanno una velocità di caricamento tra lo 0 e i 2 secondi. Mentre, per ogni secondo aggiuntivo, le opportunità diminuiscono del 4,42%.
Per migliorare i tempi di risposta del server, però, non esiste una risposta univoca, perché sono molteplici i fattori che vanno ad incidere sulle tempistiche.
La nostra web agency di Milano Nextre Digital per prima cosa eseguiamo un upgrade del server, per poi eliminare le risorse contenute nella cache che non sono più necessarie.
Inoltre, ci muoviamo sui codici di terze parti, stabilendo una gerarchia delle connessioni. In ultimo, inviamo i visitatori verso una rete CDN, che permette di erogare i contenuti attraverso una rete per alleggerire il sito e velocizzare il caricamento delle pagine.
Eliminare i CSS e JS che bloccano il rendering delle pagine
I CSS e i file JavaScript possono influenzare negativamente la SEO del sito poiché riescono a bloccare il rendering delle pagine, rallentando il caricamento del sito. Per questo motivo è sempre meglio intervenire su entrambi i tipi di file e correggerli.
Per quanto riguarda i CSS, i nostri esperti SEO preferiscono usare query multimediali dinamiche, che riescono a creare stili adatti ad ogni tipo di finestra, e minimizzare il CSS attraverso un plugin apposito.
Dopodiché lavoriamo su CSS critico e CSS non critico, favorendo l’acquisizione del primo nella stringa <head> ed eliminando gli stili inutilizzati.
E i file JS come si correggono?
Per minimizzare i file Javascript dobbiamo intervenire sul codice, dove si cancellano le parti non necessarie. In questa fase si possono togliere definitivamente anche i codici scaricabili polyfill inutilizzati, che servono per le interfacce non implementate.
Correggere gli script di terze parti che bloccano il rendering
Gli script di terze parti possono avere un ruolo determinante nel blocco del rendering e nelle performance del sito stesso.
Con gli script di terze parti si può agire in due modi:
- In primis, è necessario aggiornare la versione per evitare blocchi e tenere sotto controllo le prestazioni del sito.
- Inoltre, bisogna valutare l’importanza dello script. Qualora non sia strettamente necessario è molto meglio eliminarlo. In alternativa, si deve accettare che ci siano prestazioni di qualità inferiore.
Migliorare il Rendering lato client
Per ottimizzare i Core Web Vitals, bisogna sempre tener conto degli ultimi aggiornamenti effettuati sul sito poiché potrebbero dar vita a problemi di rendering dal lato client.
Il campanello d’allarme relativo a questa problematica è costituito da un calo nel traffico del sito dopo un update.
Come si fa ad ottimizzare il rendering lato client?
In questo caso bisogna soffermarsi sull’origine della pagina web e confrontarla con l’HTML disponibile, che può contenere elementi in grado di influenzare il rendering lato client.
Per ottimizzare la pagina lato client, noi operiamo sul rendering lato server tramite il quale si eseguono i file JavaScript. Inoltre suddividiamo il codice, riducendo il JavaScript critico e utilizziamo la funzionalità di pre-rendering, che prepara il sito al prossimo click dell’utente, portando un miglioramento nei risultati sui motori di ricerca.
Ottimizzare i file sulla pagina
Tra le problematiche che riscontriamo più di frequente c’è la presenza di file non ottimizzati, che rallentano il caricamento della pagina.
Sebbene sia un procedimento semplice e basilare, ottimizzare i file nelle pagine migliora nettamente la velocità di caricamento e, di conseguenza, il punteggio dei Core Web Vitals.
L’ottimizzazione delle immagini e dei testi è uno dei punti cardine della SEO, che implica la compressione dei file e la loro codifica.
Considerando il customer journey, si comunica al browser di pre-caricare le risorse, in modo che il sito possa anticipare le operazioni da effettuare e rispondere immediatamente alle richieste degli utenti.
Un aspetto da controllare sempre sono le risorse contenute all’interno della cache, che possono essere selezionate come memorizzabili o meno.
Un ultimo step per migliorare la user experience è l’ottimizzazione del sito a seconda della connessione di cui dispone l’utente.
Migliorare l’interattività
Il First Input Delay (FID) è la metrica dei Core Web Vitals che descrive l’interattività del sito. Come abbiamo anticipato, misura quanto tempo passa tra l’input dell’utente e la risposta offerta dal browser.
Al di sotto dei 100 millisecondi, il FID è ottimale, mentre, viene considerato scarso, quando oltrepassa questa soglia.
Come si fa ad ottimizzare il FID?
Per migliorare il FID il primo step è comprendere quali siano le cause di un punteggio scarso.
La pagina non è ottimizzata? Allora è necessario ottimizzare la pagine, prestando particolare attenzione alla parte visibile, ovvero quella superiore.
Se i file o i pacchetti JavaScript sono troppo pesanti, vanno scomposti, creando blocchi più piccoli e leggeri.
Infine, si monitora il valore degli script di terze parti, che possono compromettere le performance del sito.
Ottimizzare i Core Web Vitals e migliorare la stabilità visiva del sito web
Ti è capitato di notare uno spostamento delle immagini durante il caricamento del sito?
Si tratta di un fenomeno che accade spesso quando si visualizza il cookie banner o nelle aree riservate agli annunci. Ed è molto fastidioso per gli utenti che si ritrovano a cliccare su aree a cui non erano affatto interessati.
Il Cumulative Layout Shift (CLS) è un Core Web Vitals decisivo perché misura la stabilità visiva del sito.
Per ottimizzare il CLS, in agenzia ci preoccupiamo di riservare delle aree specifiche agli annunci, in modo che non debbano essere compressi e non risultino privi di dimensioni.
Il discorso dimensioni incide anche sulle immagini, che vanno inserite specificando l’altezza (height) e la larghezza (width).
Gli aggiornamenti e i contenuti nuovi non devono sovrapporsi a quelli già esistenti per non creare l’effetto slittamento delle immagini.
Per non provocare disagio all’utente nella fruizione dei contenuti, i caratteri personalizzati vanno precaricati, in modo che non si creino spazi vuoti o che il sito scorra a velocità eccessiva.
Migliorare l’interattività grazie all’introduzione di INP
Come ti abbiamo già spiegato, a partire dall’anno prossimo il First Input Delay (FID) verrà definitivamente soppiantato dall’Interaction to Next Paint (INP), con conseguenti grossi miglioramenti nell’ambito della misurazione dell’interattività della pagina.
Diversamente dall’attuale parametro, infatti, l’INP sarà in grado di misurare il tempo che una pagina web necessita per rispondere alle interazioni dell’utente, vale a dire da quando l’utente inizia l’interazione fino al momento in cui il fotogramma successivo gli appare sullo schermo.
Alla base di questo cambiamento, del resto, vi è il bisogno di Google di ottenere una stima più accurata della reattività della pagina e, in generale, dell’esecuzione delle pagine web. Parliamo pertanto di un cambiamento positivo, dal quale sarà possibile trarre degli indubbi vantaggi, a patto ovviamente di prenderci un po’ la mano. Ed è proprio qui che entriamo in gioco noi di Nextre Digital.
Perché affidarsi a Nextre Digital
Se sei arrivato a leggere fino a qui, avrai certamente capito cosa sono i Core Web Vitals e quanto grande sia la loro importanza. Essi costituiscono infatti delle metriche indispensabili per misurare la velocità di caricamento, l’interattività e la stabilità visiva di un sito. Parliamo pertanto di elementi imprescindibili per trattenere gli utenti sul sito e migliorare la loro esperienza di navigazione.
Ecco perché saperne padroneggiare l’utilizzo è d’importanza fondamentale, sebbene non sia affatto facile. Grazie alla nostra esperienza quindicennale in qualità di agenzia SEO, noi di Nextre Digital siamo in grado di aiutarti a tenere sotto controllo e a monitorare i Core Web Vitals del tuo sito, mettendo a tua disposizione la migliore strumentazione e i professionisti più brillanti.
Forti di una squadra giovane e affiatata, ci impegneremo a studiare una strategia su misura, ottimizzando efficacemente i tuoi parametri e assicurando ai tuoi utenti una navigazione veloce, stabile e 100% interattiva. Quindi, se vivi l’imminente cambiamento con un po’ di ansia, affidati tranquillamente a noi: ti aiuteremo ad affrontarlo con maggiore serenità, trasformando il nuovo parametro in un’arma vincente al tuo servizio!
Seguici
