Google utilizza una serie di metriche (Core Web Vitals) per misurare e valutare le performance dei siti web.
Tra le metriche più importanti rientra il punteggio legato all’esperienza navigando le diverse pagine che compongono un sito web (Page Experience Scores).
Se non stai ottimizzando il tuo sito web tenendo conto di queste metriche, è bene cominciare, perché potresti compromettere il tuo lavoro di ottimizzazione per i motori di ricerca (SEO) e l’esperienza utente complessiva (UX).
La buona notizia è che una volta compreso cosa sono i Core Web Vitals e come misurarli, è possibile adottare diverse misure per migliorarli e soddisfare gli standard di Google per aumentare la tua visibilità sui motori di ricerca.
In questo articolo ti parleremo di cosa sono i Core Web Vitals di Google, del perché sono così importanti e di come funzionano. Ma prima, una breve panoramica su come funziona il Ranking di Google.
Leggi anche: Cosa Fanno le Persone sul tuo Sito Web? Scoprilo con Microsoft Clarity
4 Fattori Chiave del posizionamento su Google
Ci sono quattro fattori chiave di posizionamento da esaminare prima di iniziare a valutare le prestazioni del tuo sito internet e attuare miglioramenti.
Nello specifico, dovrai:
- rendere il tuo sito HTTPS, essenziale affinché il vostro sito stabilisca una connessione sicura tra il browser dell’utente e il webserver
- adattare la navigazione ai dispositivi mobili, per assicurare il corretto funzionamento su dispositivi di diversa natura
- evitare annunci fastidiosi e invasivi, come pop-up o banner, così da garantire agli utenti di esplorare contenuti sempre leggibili, non essere pressati dalla pubblicità o promozioni di marketing
- garantire una navigazione sicura, facendo attenzione a malware, virus, phishing, frodi e altre truffe
Le metriche Google per valutare le performance di un sito web [dicembre 2022]
Prima di esplorare il mondo dei Core Web Vitals, è bene che tu conosca le principali metriche che Google utilizza per valutare il tuo sito web, tra le quali rientrano:
1) Tempo di caricamento della pagina
Questa è una delle metriche chiave nel monitoraggio delle prestazioni web poiché tutto oggi verte sulla velocità. I millisecondi si traducono in euro, guadagnati o persi.
Il tempo di caricamento della pagina misura il tempo necessario per caricare il contenuto di una pagina web quando un utente clicca su un collegamento o digita un indirizzo web.
Puoi controllare il tempo di caricamento della tua pagina sullo strumento PageSpeed Insights di Google.
2) First Contentful Paint
Questa metrica misura il lasso di tempo che intercorre tra l’istante in cui un visitatore accede al tuo sito internet e il momento in cui il primo elemento di testo o di immagine viene visualizzato nella scheda del browser.
Questa e le seguenti due metriche hanno ultimamente acquisito una maggiore importanza dopo l’aggiornamento di Page Experience.
Google ha annunciato la sua nuova enfasi nel fornire un’esperienza di ricerca eccellente per i propri utenti, facendogli comparire i risultati di ricerca in grado di fornirgli un’esperienza di navigazione e un’esperienza utente di qualità superiore.
Puoi trovare e misurare questa metrica delle prestazioni web in Google Search Console o in PageSpeed Insights.
3) Largest Contentful Paint
La Largest Contentful Paint (LCP) è una metrica Core Web Vital che misura la velocità con cui il contenuto principale del tuo sito viene visualizzato sullo schermo dell’utente.
Se il tuo LCP è lento, potrebbe essere una buona indicazione che il tempo di risposta del tuo server è lento. Questa metrica può essere trovata e monitorata anche in Google Search Console o nello strumento Google PageSpeed Insights.
4) Tempo di avvio del rendering
Il momento in cui ha inizio il rendering indica l’istante in cui alcuni elementi vengono visualizzati sullo schermo, anche prima dell’inizio del caricamento del contenuto della pagina.
In effetti, potrebbe essere qualcosa di semplice come un colore di sfondo, o una scritta, e rappresenta il primo segnale che sta succedendo qualcosa su un sito web.
5) Frequenza di rimbalzo (bounce rate)
Le frequenze di rimbalzo misurano la percentuale di visitatori che abbandonano il sito dopo aver visualizzato una sola pagina.
Una frequenza di rimbalzo elevata di solito indica che i visitatori raggiungono il tuo sito, ma la scarsa velocità di caricamento sta danneggiando la loro esperienza utente e per questo non continuano la navigazione nel sito.
Anche contenuti scadenti, un design e un’interfaccia utente (UI) poco brillanti e la mancata comprensione delle intenzioni dell’utente possono influire sulla frequenza di rimbalzo.
6) Tempo di interazione
Il tempo di interazione è definito come il tempo che intercorre tra la richiesta dell’utente e il momento in cui può interagire con il sito, cliccando sui collegamenti, digitando campi di testo, scorrendo la pagina o eseguendo altre azioni sulla pagina.
Alcuni elementi come script e tracker potrebbero continuare a caricarsi durante il tempo di interazione.
7) Richieste al secondo
Questa metrica indica quante azioni vengono inviate al server di destinazione ogni secondo. Si considera “richiesta” qualsiasi interazione con le risorse della pagina, dalle pagine HTML, alle immagini, ai file multimediali, alle query di database,e così via.
8) Peso complessivo
Il numero totale di byte ricevuti dall’utente è indicato come peso complessivo del sito web.
Più importante del peso complessivo è la relazione tra ciascuna risorsa poiché una risorsa pesante può rallentare tutto il resto.
9) Tasso di errore
Il tasso di errore è una misura della percentuale di problemi che vengono a verificarsi su una o più pagine del tuo sito web.
Quando noti un picco nella frequenza di errore in un punto particolare in un test di carico significa che qualcosa sta impedendo al tuo sito web di funzionare correttamente.
10) Tempo di risposta
Questa è una metrica che esamina le anomalie del tempo di risposta medio, mostrando gli elementi che impiegano più tempo del normale per essere caricati.
Questa metrica offre un modo molto utile per individuare le applicazioni più lente del normale che dovrebbero essere esaminate ulteriormente.
Cosa sono i Core Web Vitals?
I Core Web Vitals rappresentano una serie di indicatori chiave di prestazione che Google utilizza per misurare la salute e la vitalità dei siti web.
Questi indicatori forniscono dati sull’esperienza di una data pagina per valutare l’esperienza complessiva che il tuo sito web offre e individuare le aree da migliorare.
I Core Web Vitals legati alla user experience sono:
- Largest Contentful Paint (LCP), metrica che misura il tempo necessario affinché il contenuto principale di una pagina Web venga visualizzato dagli utenti. Google consiglia un LCP inferiore a 2,5 secondi.
- First Input Delay (FID), che misura il tempo di risposta della tua pagina web quando un utente interagisce con la pagina per la prima volta. Ciò include clic sui collegamenti, tocchi di pulsanti e azioni JavaScript personalizzate. Google consiglia un FID inferiore a 100 millisecondi.
- Cumulative Layout Shift (CLS), che misura il numero di cambiamenti di layout che spostano inaspettatamente il contenuto principale della pagina web. Questi cambiamenti influiscono sulla capacità dell’utente di leggere i contenuti e interagire correttamente con la pagina. Google consiglia un punteggio CLS di 0,1 o inferiore.
Largest Contentful Paint (LCP)
La Largest Contentful Paint, come accennato in precedenza, misura le prestazioni di caricamento di un sito, ossia quanto velocemente vengono caricati i contenuti all’interno della piattaforma.
Con la Largest Contentful Paint si possono analizzare:
- immagini (elemento<img> )
- immagini all’interno di grafica vettoriale (un <image> incorporato in un <svg>)
- miniature video (un attributo poster impostato su un URL immagine all’interno di un elemento <video>)
- elementi con immagini di sfondo (tipicamente caricati con la proprietà CSS background-image url())
- elementi a livello di blocco contenenti testo
Gli strumenti per analizzare il Largest Contentful Paint
Per capire quale elemento della LCP scegliere per effettuare l’analisi devi utilizzare Il pannello DevTools Lighthouse, incluso nei browser basati su Chromium come Chrome, Edge, Brave, Opera e Vivaldi.
Dunque, apri DevTools dal menu del browser – solitamente cliccando su “Altri strumenti > Strumenti di sviluppo” oppure tenendo premuto sulla tastiera “Ctrl | Cmd + Shift + i” o “F12” – naviga fino alla scheda “Lighthouse” (se hai versioni precedenti questa sezione potrebbe chiamarsi “Audit”).
A questo punto, genera un rapporto prestazioni da mobile ed esamina la sezione “Prestazioni”. Il tempo di Largest Contentful Paint risultante viene mostrato con una sezione espandibile, che identifica l’elemento scelto:
Se non sei solito utilizzare browser basati su Chromium, puoi ottenere le stesse informazioni utilizzando gli strumenti online PageSpeed Insights e web.dev Measure.
Il pannello “Performance” di DevTools mostra anche un indicatore LCP.
Per iniziare, fate clic sull’icona circolare “Record”, ricaricate la pagina e poi fate clic sul pulsante “Stop” per visualizzare il rapporto.
Dopodiché, fate clic sull’icona LCP nella sezione Timings per identificare l’elemento e visualizzare un riassunto delle statistiche.
L’estensione Web Vitals è disponibile per Google Chrome ma può essere installata sulla maggior parte dei browser basati su Chromium. In questo modo potrai calcolare le metriche Core Web Vitals per ogni sito che visiti e l’icona identificativa diventerà verde, arancione o rossa a seconda del risultato. Puoi anche fare clic sull’icona dell’estensione per visualizzare più dettagli sul LCP.
Attraverso il Chrome User Experience Report potrai consultare le statistiche reali di utilizzo del sito, compreso l’LCP in diversi Paesi, connessioni e dispositivi.
Per utilizzarlo dovrai registrarti sulla Google Cloud Platform e fornire i dettagli di fatturazione.Questo rapporto ti sarà effettivamente utile solo se il tuo URL ha un livello di traffico ragionevolmente alto.
Infine, la libreria JavaScript web-vitals è un piccolo script di 1 kB che può calcolare LCP e altre metriche Core Web Vitals per utenti reali sul tuo sito online.
Puoi scaricarlo da un CDN ed aggiungere il seguente script al tuo HTML <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My page</title>
<script type="module">
import { getLCP } from 'https://unpkg.com/web-vitals?module';
getLCP(console.log);
</script>
<!-- rest of page →
La “getLCP()” è una funzione asincrona a cui viene passata una callback attivata quando il valore LCP è stato calcolato (anche se potrebbe non attivarsi mai se la pagina viene caricata in una scheda in background). Alla funzione di callback viene passato un oggetto contenente:
- name: il nome della metrica (“LCP” in questo caso)
- value: il valore calcolato
- id: un ID unico che rappresenta questa metrica per la pagina corrente
- delta: il delta tra il valore corrente e l’ultimo valore riportato
- entries: un array di voci usate nel calcolo del valore
Lo script qui sopra emette l’oggetto nella console, anche se è più pratico inviare i dati a un server o a Google Analytics per ulteriori analisi.
Le cause comuni di punteggi bassi per il Largest Contentful Paint
Bassi punteggi di LCP sono tipicamente causati da pagine che caricano lentamente e a fatica.
La risposta del server potrebbe essere lenta perché:
- il server è sovraccarico o sta facendo troppo lavoro per il rendering di una pagina e potrebbe dipendere anche dai limiti del server stesso, se stai utilizzando un servizio di hosting condiviso
- I CSS e i JavaScript ritardano il caricamento della pagina perché referenziati nell’HTML sopra il contenuto primario
- Altre risorse come immagini e video di grandi dimensioni riducono la larghezza di banda disponibile e richiedono più tempo per il rendering
Come Migliorare i Punteggi del Largest Contentful Paint
Un controllo accurato può aiutarti ad identificare i problemi di rendering di un sito web.
Di seguito una serie di consigli che ti aiuteranno a migliorare il punteggio LCP:
- Aggiorna il tuo server e/o il servizio di hosting e assicurati che la velocità di download rimanga alta anche nei momenti di utilizzo massimo
- Attiva la compressione del server e l’HTTP/2+.
- Riduci lo sforzo del server, rimuovendo il codice inutilizzato e i plugin CMS e attivando una cache efficace
- Assicurati che il browser possa memorizzare i file nella cache in modo efficace. Impostate Expires, Last-Modified e/o ETag hash appropriati nell’intestazione HTTP, in modo che i file non vengano richiesti di nuovo.
- Usa un Content Delivery Network (CDN) per dividere il carico e ospitare le risorse su server geograficamente più vicini agli utenti.
- Ottimizza le immagini, riducendo la loro dimensione ed usando un formato appropriato per minimizzare le dimensioni dei file
- Carica le immagini con la tecnica del lazy-loading aggiungendo un attributo loading=”lazy”. Aggiungi attributi di larghezza e altezza per assicurare che venga riservato lo spazio appropriato nella pagina prima che l’immagine completi il caricamento.
- Assicurati di caricare solo i web font richiesti, prediligendo i font web-safe per massimizzare le prestazioni del sito web
- Rimuovi i file JavaScript e CSS inutilizzati
- Evita le dichiarazioni CSS @import perché bloccano il rendering e caricano gli stili in serie
- Evita la codifica Base64 perché aumenta le dimensioni dei file e richiede un’elaborazione aggiuntiva
- Considera i CSS critici in linea. Incorpora il CSS essenziale “above-the-fold” in un blocco <link> all’inizio della pagina, poi caricate altri fogli di stile in modo asincrono.
- Usa JavaScript asincrono, differito o con modulo ES per eseguire gli script in un secondo momento ed esegui i processi JavaScript di lunga durata in un service worker
First Input Delay (FID)
Il miglioramento dei tempi di First Input Delay per il tuo sito Web consiste nell’ottimizzazione di JavaScript e nell’utilizzo di script di terze parti. Quest’ultimo in genere fa riferimento a strumenti di analisi dei siti Web e qualsiasi codice che richiede script da un altro sito Web.
Come accennato in precedenza, puoi ottimizzare l’utilizzo di JavaScript rimuovendo i caratteri non necessari dagli script e il codice non utilizzato e spostando il codice non necessario per il caricamento iniziale della pagina Web su una risorsa precaricata.
Per identificare quale codice può essere scaricato su una risorsa precaricata puoi avvalerti della funzione di copertura di Google Chrome DevTools.
Google consiglia UglifyJS per minimizzare JavaScript. Puoi anche minimizzare HTML con HTML Miniifier e CSS con CSSnano e csso.
Gli strumenti per analizzare il First Input Delay
Il First Input Delay non può essere simulato, ma solo misurato quando la pagina viene utilizzata da un utente reale e il risultato dipende dalla velocità e dalle capacità del processore del dispositivo su cui lo si testa.
L’estensione Web Vitals per Google Chrome può mostrare una metrica FID dopo aver interagito con la pagina tramite scroll o clic ed è possibile avere maggiori informazioni a riguardo cliccando sull’icona dell’estensione.
Come LCP, il Chrome User Experience Report vi permette di interrogare le statistiche FID reali registrate in diversi paesi, connessioni e dispositivi per un URL specifico.
Attraverso la libreria JavaScript web-vitals puoi anche calcolare in tempo reale le metriche FID per gli utenti reali che navigano sul sito.
Puoi aggiungere il seguente script al tuo <head> HTML per emettere le metriche FID su una funzione di callback:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My page</title>
<script type="module">
import { getFID } from 'https://unpkg.com/web-vitals?module';
getFID(console.log);
</script>
<!-- rest of page -->
Le cause comuni di punteggi bassi per il First Input Delay
Scarsi punteggi FID e TBT sono solitamente causati lati client da:
- Quantità significative di CSS e JavaScript che bloccano il rendering e fermano il caricamento della pagina mentre il codice viene scaricato e analizzato
- grandi script ad alta intensità di processo che vengono eseguiti appena la pagina viene caricata
- Compiti JavaScript di lunga durata o scarsamente ottimizzati
Generalmente, i browser funzionano su un singolo thread capace di elaborare un solo compito alla volta.
Se una funzione JavaScript impiega un secondo per essere eseguita, tutti gli altri processi di rendering vengono bloccati durante quel secondo, quindi la pagina non può reagire all’input dell’utente, aggiornare il DOM, mostrare animazioni e così via.
Come Migliorare i Punteggi di First Input Delay
Un controllo JavaScript lato client può identificare i problemi, anche se solitamente sono risolvibili rimuovendo il codice ridondante.
Di seguito una serie di consigli che ti aiuteranno a migliorare il punteggio LCP:
- Genera e memorizza in cache quanto più contenuto HTML statico possibile sul server
- Assicurati che il browser possa memorizzare i file nella cache in modo efficace, impostando gli hash appropriati Expires, Last-Modified, e/o ETag nell’intestazione HTTP, in modo che i file non vengano richiesti di nuovo
- Adotta tecniche di miglioramento progressivo, in modo che l’interfaccia sia utilizzabile in HTML e CSS prima che venga eseguito il JavaScript
- Rimuovi i file JavaScript e CSS inutilizzati
- Concatena e minimizza i file JavaScript e CSS
- Evita l’uso eccessivo di CSS come box-shadow e filter
- Usa JavaScript asincrono, differito o con modulo ES per eseguire gli script in un secondo momento.
- Riduci al minimo le richieste JavaScript di terze parti per l’analisi, i widget dei social media, i forum di discussione, ecc.
- Carica le immagini con la tecnica del lazy-loading aggiungendo un attributo loading=”lazy”. Aggiungi attributi di larghezza e altezza per assicurare che venga riservato lo spazio appropriato nella pagina prima che l’immagine completi il caricamento.
- Ritarda il caricamento degli script meno critici come gli strumenti di analisi, le pubblicità e i social media.
- Suddividi i compiti JavaScript di lunga durata in una serie di lavori più piccoli che vengono eseguiti dopo un breve ritardo, come requestIdleCallback, setTimeout, o requestAnimationFrame.
- Considera l’esecuzione di processi JavaScript di lunga durata in un web worker che utilizza un thread in background.
Cumulative Layout Shift (CLS)?
Per migliorare il punteggio CLS delle tue pagine web, devi indicare al browser quanto spazio dare agli elementi durante il caricamento, aggiungendo attributi di dimensione specifici a immagini e video.
In alternativa, puoi utilizzare le caselle delle proporzioni in CSS. Entrambi raggiungeranno l’obiettivo desiderato di prevenire uno spostamento imprevisto del contenuto durante il caricamento della pagina.
L’uso degli indicatori sulla pagina è consigliato anche per gli elementi che si sposteranno quando vengono caricati dopo che un utente ha interagito con la pagina.
Gli strumenti per analizzare il Cumulative Layout Shift
Le metriche CLS sono calcolate nel pannello DevTools di Lighthouse, in PageSpeed Insights e negli strumenti web.dev Measure:
Anche l’estensione Web Vitals di Google Chrome mostra la metrica CLS:
Come già visto per il LCP e il FID, il Chrome User Experience Report vi permette di interrogare le statistiche CLS reali registrate in diversi Paesi, connessioni e dispositivi per un URL specifico.
Anche la libreria JavaScript web-vitals può calcolare le metriche CLS per gli utenti reali sul vostro sito live, proprio come fa con LCP e FID. Il seguente script potrebbe essere aggiunto al vostro <head> HTML per emettere le metriche CLS su una funzione di callback.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My page</title>
<script type="module">
import { getCLS } from 'https://unpkg.com/web-vitals?module';
getCLS(console.log);
</script>
<!-- rest of page -->
Le cause comuni di punteggi bassi per il Cumulative Layout Shift
I bassi punteggi di CLS sono di solito causati da risorse di pagina che si caricano lentamente e da elementi DOM dinamici o non dimensionati, ad esempio:
- Lo spazio nella pagina non riservato a immagini, iframes, pubblicità, e così via
- Il contenuto iniettato dinamicamente nel DOM, di solito dopo una richiesta di rete per pubblicità, widget dei social media, ecc.
- Il caricamento di font web che genera un evidente Flash of Invisible Text (FOIT) o Flash of Unstyled Text (FOUT).
Come Migliorare i Punteggi di Cumulative Layout Shift
Un controllo lato client può identificare i problemi legati allo scarso punteggio, generalmente risolvibili assicurandosi che lo spazio venga riservato al contenuto prima di venire scaricato.
Di seguito una serie di consigli che ti aiuteranno a migliorare il punteggio CLS:
- AggiungI attributi di larghezza e altezza ai tag HTML <img> e <iframe> o usa la nuova proprietà CSS aspect-ratio per assicurarti che lo spazio appropriato sia riservato sulla pagina prima del download delle risorse.
- Imposta le dimensioni appropriate per gli elementi contenitore che racchiudono contenuti di terze parti che si caricano più lentamente, come pubblicità e widget.
- Assicurati che le immagini e le altre risorse che appaiono in cima alla pagina siano richieste il prima possibile (un pre-caricamento potrebbe essere utile)
- Riduci al minimo l’utilizzo di font-web e considera l’utilizzo di font OS comunemente disponibili, quando possibile.
- Carica i web-font e imposta il font-display CSS su opzionale o swap. Meglio usare un font di fallback di dimensioni simili per minimizzare lo spostamento del layout
- Evita di inserire elementi verso la parte superiore della pagina a meno che non rispondano a un’azione dell’utente come un clic.
- Assicurati che le interazioni dell’utente vengano completate entro 500 millisecondi dall’attivazione dell’input.
- Utilizza la trasformazione CSS e l’opacità per animazioni più efficienti che non incorrono in un ri-layout.
- Considera i CSS critici inline. Incorpora il CSS essenziale “above-the-fold” in un blocco <link> all’inizio della pagina, poi carica altri fogli di stile in modo asincrono.
- Dove necessario, considera il Containment, una nuova caratteristica CSS che vi permette di identificare i sottoinsiemi isolati di una pagina. Il browser può così ottimizzare l’elaborazione, rendendo – o non rendendo – specifici blocchi di contenuto DOM.
Perché affidare il miglioramento dei Core Web Vitals ad un’agenzia informatica?
Come avrai potuto notare nel corso di questo articolo, migliorare i core web vitals non è così semplice se non sei un programmatore o ne sai poco e niente di programmazione.
Azioni che potrebbero sembrare semplici potrebbero incappare in diverse complicanze, rischiando di ottenere il risultato opposto a quello desiderato.
Per queste ragioni, il mio suggerimento è di affidare queste attività a figure professionali e pratiche del campo, come il team di una web agency o di una software house (azienda informatica).
Esistono diversi tipi di aziende informatiche e, a seconda della tipologia, sono in grado di sviluppare:
- software standard o personalizzati
- software destinati all’uso interno all’azienda o ad uso esterno
- struttura, funzionalità e design di siti web, app e specifiche componenti software
In merito a quest’ultimo riferimento, se intendi migliorare i core web vitals del tuo sito web, suggerisco di affidarsi all’agenzia informatica con cui da anni collaboro: Armonia.io.
Una software house è in grado di gestire i progetti più facilmente grazie all’insieme di competenze, capacità e figure professionali di cui si compone e che assicurano un miglioramento ponderato dei progetti dei propri clienti.
Leggi anche: [GUIDA COMPLETA] Come essere in Prima Pagina su Google
