L'algoritmo di ricerca di Google privilegia i siti web con ottime prestazioni tecniche e una velocità di caricamento elevata. Ciò garantisce che le pagine con un posizionamento elevato nei risultati dei motori di ricerca si carichino rapidamente e offrano un'interattività fluida. Per valutare l'usabilità dei siti web, Google si basa su tre parametri denominati chiamati Core Web Vitals (CWV). Migliorando i Core Web Vitals del tuo sito web, puoi renderlo più accessibile agli utenti e aumentare le sue possibilità di ottenere un posizionamento più elevato nelle pagine dei risultati.
Cosa sono i Core Web Vitals?
I Core Web Vitals sono standard utilizzati da Google per valutare lo stato tecnico di un sito web e determinare il posizionamento nelle pagine dei risultati del motore di ricerca (SERP). L'algoritmo di Google valuta questi parametri per ogni pagina di un sito, il che significa che alcune pagine potrebbero ottenere punteggi più alti rispetto ad altre.
Esistono tre parametri Core Web Vitals:
1. Largest Contentful Paint (LCP)
L'LCP misura il tempo necessario per caricare l'immagine o il blocco di testo più grande di una pagina web, indicando la rapidità con cui gli utenti possono visualizzare contenuti significativi. Si basa sul principio secondo cui la forza di un sistema dipende dal suo anello più debole. Anche se il resto della pagina si carica rapidamente, un'immagine che impiega molto tempo a caricarsi può infastidire gli utenti.
2. First Input Delay (FID)
Il FID misura il tempo impiegato da una pagina per elaborare un'interazione dell'utente. Potrebbe trattarsi del tempo necessario alla pagina per rispondere al clic di un utente su un pulsante. Gli utenti e Google si aspettano che i siti web rispondano rapidamente agli input, in modo da risultare interattivi.
Il FID è una metrica fondamentale nei Core Web Vitals del tuo sito web, ma dal 2024 è stato sostituito dall'Interaction to Next Paint (INP). Anche l'INP misura la reattività, ma si concentra sul tempo necessario affinché venga fornito un feedback visivo dopo che un utente ha interagito con una pagina. Ad esempio, quando aggiungi un articolo al carrello, ti aspetti che l'icona del carrello si aggiorni, indicando che l'articolo è stato aggiunto.
3. Cumulative Layout Shift (CLS)
Il CLS misura la stabilità visiva di una pagina, ovvero se il layout del tuo sito web subisce spostamenti imprevisti dopo il caricamento. Ad esempio, se un blocco pubblicitario impiega più tempo a caricarsi rispetto al resto della pagina e, una volta caricato, sposta il testo verso il basso, ciò può creare frustrazione o confusione nell'utente che stava leggendo.
Il CLS è una metrica utilizzata da Google per valutare l'impatto del movimento di un elemento in relazione alle sue dimensioni sullo schermo. Più alto è il punteggio, peggiore è il CLS della tua pagina. Se un elemento come un'immagine di grandi dimensioni provoca lo spostamento dell'intera pagina durante il caricamento, ne risulterà un punteggio CLS più alto rispetto a un movimento minore causato da una singola riga di testo.
Come misurare i Core Web Vitals
Google mette a tua disposizone diversi strumenti gratuiti per eseguire una valutazione dei Core Web Vitals, a seconda dei tuoi obiettivi:
1. PageSpeed Insights
PageSpeed Insights (PSI) fornisce un'analisi approfondita per una singola pagina. Valuta non solo i Core Web Vitals, ma copre una gamma di parametri e fattori di prestazione tecnica, assegnando a ogni pagina un punteggio complessivo tra 0 (peggiore) e 100 (migliore). PSI presenta i risultati in un formato prioritario e operativo. Ad esempio, stima il tempo potenzialmente risparmiato apportando una modifica. La maggior parte degli utenti accede a PSI tramite web, ma è disponibile anche tramite API.
2. Google Search Console
Search Console ti consente di verificare le prestazioni dei Core Web Vitals su tutte le pagine del tuo sito contemporaneamente. La diagnostica di Search Console non è dettagliata come quella di PSI, ma controlla automaticamente tutte le pagine e tiene traccia delle prestazioni storiche, offrendoti una visione d'insieme di come si comporta il tuo sito e dove puoi migliorare.
3. CrUX Dashboard
I due strumenti precedenti sono indipendenti dal browser, il che significa che funzionano su qualsiasi browser web. Google fornisce una serie più specifica di diagnostiche su come i siti web si caricano su Chrome. Poiché Google possiede Chrome, può fornire un livello di specificità più elevato su come si carica un sito. Questa analisi più specifica è chiamata report Chrome User Experience (CrUX) e Google offre questi dati gratuitamente in CrUX D ashboard.
CrUX Dashboard è particolarmente utile quando hai bisogno di maggiori dettagli su come il tuo sito web si carica nel browser di un utente Chrome, o quando hai bisogno di una panoramica a tutto tondo delle prestazioni del tuo sito nel tempo.
Come migliorare i Core Web Vitals
Per migliorare i tuoi punteggi CWV, esamina i dati diagnostici disponibili su PageSpeed Insights, Search Console o in CrUX. Questi strumenti ti indicano quali Core Web Vitals richiedono maggiore attenzione e possono aiutarti a risolverli. Per ciascun Core Web Vital (LCP, FID e CLS), dovresti puntare a ottenere un punteggio “Buono” su PageSpeed Insights, che ti colloca nel 70° percentile delle pagine.
Ecco alcune delle soluzioni più efficaci per ogni aspetto dei Core Web Vitals:
Come migliorare i punteggi Largest Contentful Paint (LCP)
- Dai priorità alla risorsa LCP
- Assicurati che la risorsa LCP sia individuabile nell’HTML
- Implementa il lazy-loading
- Ottimizza le immagini
Seguite queste best practice per aumentare la velocità di caricamento LCP della vostra pagina:
Dai priorità alla risorsa LCP
Utilizza PSI per identificare la risorsa LCP della pagina (l'elemento più grande) e aggiungi un attributo fetchpriority="high" all'elemento a cui vuoi dare priorità. Questo garantisce che l'LCP si carichi prima di altri elementi HTML meno importanti.
Assicurati che la risorsa LCP sia individuabile nell'HTML
Alcune pagine basate su JavaScript forniscono immagini senza un tag <img>. Ciò rallenta il tempo LCP poiché il JavaScript sulla pagina deve caricarsi prima che l'immagine diventi visibile. Invece, carica l'immagine utilizzando un tag <img> con un attributo src standard.
Implementa il lazy-loading
Aggiungi un attributo di lazy-loading nativo (loading="lazy") alle tue risorse non LCP (la maggior parte delle immagini, iframe e JavaScript più piccoli o che non si caricano nella parte superiore della pagina) in modo che si carichino dopo la risorsa LCP.
Ottimizza le immagini
Crea immagini con una risoluzione inferiore. Ad esempio, salva un'immagine a 72 dpi (punti per pollice), che è lo standard per il web, invece di 300 dpi, che è lo standard per la stampa. Per evitare lunghi tempi di caricamento, crea immagini adattate alle dimensioni dello schermo. Utilizza l'estensione immagine appropriata, privilegiando JPG rispetto a PNG.
Come migliorare i punteggi First Input Delay (FID)
Il FID è solitamente causato dall'esecuzione continua di una grande quantità di codice JavaScript su una pagina. Il browser impiega del tempo per eseguire gli script, causando un ritardo quando gli utenti interagiscono con un elemento. Ecco come puoi migliorare il punteggio FID della tua pagina:
Riduci la quantità di JavaScript sulla pagina
Strumenti di analisi come PSI possono aiutarti a scoprire script non necessari, consentendoti di snellire la pagina e renderla più reattiva. Valuta la possibilità di centralizzare JavaScript in un unico file anziché in più file, se possibile. Evita di utilizzare troppi caricamenti JavaScript di terze parti per aumentare la velocità.
Condensa gli script
Strumenti di gestione dei tag come Google Tag Manager possono aiutarti a unificare i tuoi script in una singola riga di codice. Ciò può ridurre il lavoro che il browser deve fare in risposta all'interazione dell'utente.
Come migliorare i punteggi Cumulative Layout Shift (CLS)
Puoi minimizzare il vostro CLS utilizzando questi suggerimenti:
Imposta dimensioni esplicite per i contenuti caricati
Aggiungere attributi width, height e/o aspect-ratio alle tue immagini indica ai browser come impostare le dimensioni dell'immagine. Senza queste istruzioni, i browser precaricano per impostazione predefinita un'immagine il più piccola possibile e poi la espandono una volta completamente caricata, causando uno spostamento.
Evita animazioni che influenzano il layout
Le animazioni (movimento sulla pagina) aumentano il rischio di CLS per i siti web. Le animazioni che influenzano le proprietà di margine o bordo (ad esempio, un pulsante che si espande quando ci passi sopra con il mouse) probabilmente porteranno a problemi di CLS.
Come migliorare i Core Web Vitals: domande frequenti
In che modo i Core Web Vitals influenzano il posizionamento su Google?
I Core Web Vitals sono un fattore di posizionamento in Google Search. Punteggi elevati nei Core Web Vitals possono migliorare direttamente il tuo posizionamento, mentre punteggi bassi possono danneggiarlo.
I Core Web Vitals sono gli unici fattori che influenzano le prestazioni del sito web?
No, molti fattori influenzano le prestazioni del sito web. I Core Web Vitals sono gli aspetti più importanti di una suite più ampia di standard di prestazione dei siti web di Google, chiamata Web Vitals.
Dovrei dare priorità al miglioramento di tutti i Core Web Vitals in modo uguale?
I miglioramenti dei Core Web Vitals dovrebbero arrivare dopo le ottimizzazioni di base come tag, contenuti e struttura del sito. Punta a ottimizzare tutti e tre i Core Web Vitals per ottenere un punteggio nella fascia Buono in PageSpeed Insights. Dai priorità a qualsiasi aspetto dei Core Web Vitals in cui il tuo sito ottiene un punteggio Scarso o Necessita di miglioramento.
