I Core Web Vitals sono un insieme di metriche definite da Google per misurare l'esperienza utente di una pagina web. Dal 2021, queste metriche fanno parte dei segnali di classificazione di Google — il che significa che un punteggio scarso può penalizzare il tuo SEO. Le immagini sono uno dei principali fattori che influenzano questi punteggi, in positivo come in negativo.
Le tre metriche Core Web Vitals
Google misura tre dimensioni dell'esperienza utente attraverso i Core Web Vitals:
| Metrica | Cosa misura | Soglia "Buono" | Soglia "Da migliorare" |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Tempo di caricamento dell'elemento visibile più grande | ≤ 2,5 secondi | 2,5 a 4 secondi |
| INP (Interaction to Next Paint) | Reattività alle interazioni dell'utente | ≤ 200 ms | 200 a 500 ms |
| CLS (Cumulative Layout Shift) | Stabilità visiva del layout | ≤ 0,1 | 0,1 a 0,25 |
LCP e immagini: il collegamento diretto
L'LCP (Largest Contentful Paint) misura il tempo necessario per visualizzare l'elemento visibile più grande nel viewport del browser. Nella grande maggioranza delle pagine web, questo elemento è un'immagine — immagine hero, banner principale, foto prodotto. Un'immagine pesante o mal caricata è quindi direttamente responsabile di un punteggio LCP scadente.
Per migliorare l'LCP legato alle immagini:
- Usare formati moderni: WebP e AVIF sono significativamente più leggeri di JPEG e PNG a parità di qualità visiva
- Precaricare l'immagine LCP: aggiungi un tag <link rel="preload"> nel <head> per forzare il browser a caricare l'immagine hero in modo prioritario
- Evitare il lazy loading sull'immagine LCP: non applicare mai loading="lazy" all'immagine che sarà il tuo LCP — questo ritarda esattamente ciò che Google misura
- Servire le immagini da un CDN: la vicinanza geografica del server riduce il Time to First Byte (TTFB) che impatta direttamente sull'LCP
- Dimensionare correttamente le immagini: non servire mai un'immagine di 3000px di larghezza per una visualizzazione di 800px
Lo sapevi? puoi identificare quale immagine costituisce il tuo LCP tramite PageSpeed Insights o Chrome DevTools (scheda Prestazioni → clicca sul marcatore LCP). Questa identificazione è il primo passo indispensabile prima di qualsiasi ottimizzazione.
CLS e immagini: gli spostamenti di layout
Il CLS (Cumulative Layout Shift) misura gli spostamenti inaspettati del layout durante il caricamento. Le immagini senza dimensioni definite sono una delle cause più frequenti di un punteggio CLS scadente: il browser non conosce le dimensioni dell'immagine prima che venga caricata, causando un "salto" della pagina quando appare.
La soluzione è semplice e universale: specificare sempre gli attributi width e height sui tag img. Questo consente al browser di riservare lo spazio esatto necessario ancora prima che l'immagine venga scaricata.
INP e immagini: un impatto indiretto
L'INP (Interaction to Next Paint) misura la reattività della pagina alle interazioni dell'utente (clic, input). Le immagini non impattano direttamente l'INP, ma immagini molto pesanti che monopolizzano il thread principale del browser possono indirettamente degradare questa metrica bloccando l'elaborazione degli eventi JavaScript.
La decodifica di immagini voluminose (PNG di diversi megabyte, TIFF ad alta risoluzione) può provocare blocchi del thread principale. L'attributo decoding="async" consente di differire questa decodifica per non bloccare le interazioni.
Best practice per le immagini nei Core Web Vitals
- Formato: usa WebP o AVIF per tutte le immagini di contenuto
- Dimensioni: specifica sempre width e height su tutti i tag img
- Lazy loading: usa loading="lazy" su tutte le immagini fuori schermo, eccetto l'immagine LCP
- Preload: precarica solo l'immagine LCP con <link rel="preload" as="image">
- Immagini responsive: usa l'attributo srcset per servire la dimensione adatta a ogni risoluzione dello schermo
- Compressione: comprimi tutte le immagini con uno strumento come Squoosh, Sharp o ImageMagick prima di caricarle
- CDN: ospita le immagini su un CDN per ridurre la latenza di caricamento geografica
Lo sapevi? Google PageSpeed Insights e Lighthouse sono gli strumenti di riferimento per misurare i tuoi Core Web Vitals e identificare le immagini problematiche. Google Search Console offre anche un report Core Web Vitals basato su dati reali dei tuoi visitatori (CrUX — Chrome User Experience Report), più affidabile dei test di laboratorio per valutare l'esperienza reale dei tuoi utenti.