Come ridurre i Core Web Vitals e l'LCP
Cosa sono i Core Web Vitals?
I Core Web Vitals sono tre metriche di prestazione fondamentali definite da Google per misurare l'esperienza utente: LCP (Largest Contentful Paint — il tempo necessario affinché l’elemento di contenuto più grande appaia sullo schermo), INP (Interaction to Next Paint — la velocità di risposta all’interazione dell’utente) e CLS (Cumulative Layout Shift — la quantità di spostamento visivo che si verifica durante il caricamento della pagina). Queste tre metriche vengono misurate sulla base di dati reali degli utenti (field data); in altre parole, non derivano da test di laboratorio (ad es. un controllo una tantum), ma vengono calcolate a partire dai dati raccolti nelle condizioni effettive dei dispositivi e delle reti dei visitatori reali.
Queste tre metriche rappresentano diversi aspetti dell’esperienza utente: l’LCP fornisce la “sensazione di quanto velocemente si carichi la pagina”, l’INP risponde alla domanda “quanto velocemente la pagina reagisce all’interazione”, mentre il CLS misura se “la pagina salta davanti ai miei occhi”. Se non sono tutte e tre soddisfacenti, l’esperienza utente complessiva non può essere considerata pienamente «buona».
In questa guida ci si concentra in particolare sull’LCP perché è solitamente la metrica su cui è più facile intervenire e che offre il margine di miglioramento più concreto; un’immagine hero di grandi dimensioni o un video, da soli, possono ritardare l’LCP di diversi secondi.
Perché è importante?
Queste metriche riflettono direttamente l’esperienza utente: una pagina che si carica lentamente, che risponde in modo tardivo alle interazioni o che scorre continuamente allontana l’utente dal sito. Google utilizza i Core Web Vitals come uno dei segnali di ranking; l’impatto di queste metriche può essere particolarmente evidente nelle ricerche da dispositivi mobili, poiché i dispositivi e le reti mobili sono generalmente più limitati rispetto a quelli desktop.
Secondo le soglie attuali, affinché l’LCP sia considerato “buono”, deve essere inferiore a 2,5 secondi e tale valore deve essere raggiunto da almeno il 75% degli utenti reali. Un sito che supera questa soglia, anche se tecnicamente funzionante, rientra nella categoria dei siti “lenti” dal punto di vista dell’esperienza utente e ciò può influire negativamente sia sul tasso di conversione che sul posizionamento nei risultati di ricerca.
La causa della lentezza dell’LCP può variare da sito a sito: in alcuni casi è da attribuire a un’immagine di grandi dimensioni e non compressa, mentre in altri la causa principale è una risposta lenta del server (TTFB) o script di terze parti che bloccano il rendering (ad es. reti pubblicitarie, strumenti di analisi). Per questo motivo, prima di iniziare a ottimizzare, è importante individuare quale elemento viene identificato come LCP.
Come risolvere il problema?
- Ottimizzare l’immagine che costituisce l’elemento LCP (di solito l’immagine hero): dimensioni adeguate, formato moderno (WebP/AVIF), compressione.
- Aggiungi all’immagine LCP
<link rel="preload">per consentire al browser di individuarla tempestivamente; ciò garantisce che l’immagine venga scaricata in via prioritaria, anziché contemporaneamente alle altre risorse. - Riducete il tempo di risposta del server (TTFB): caching, hosting veloce, utilizzo di CDN.
- Riducete o rimandate (defer/async) i file CSS/JS che bloccano il rendering; il browser potrebbe sospendere il rendering della pagina finché non scarica ed esegue questi file.
- Riducete la latenza geografica distribuendo le risorse statiche tramite una CDN; rispondere dal server più vicino all’utente riduce la latenza.
Esempio
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
Esempio negativo: impostare il caricamento lento (lazy load) dell’immagine LCP <img src="hero.jpg" loading="lazy"> impostando il caricamento pigro (lazy load) — ciò impedisce al browser di scaricare immediatamente l’immagine durante il caricamento della pagina e allunga notevolmente il tempo dell’LCP.
Errori comuni
- Fornire l’immagine LCP in dimensioni eccessive e senza compressione.
- Unire tutto il CSS o il JS in un unico file di grandi dimensioni, bloccando così il rendering.
loading="lazy"Applicare per errore la proprietà all'immagine LCP (l'immagine visibile nella prima schermata) — ciò ritarda l'LCP poiché il browser rimanda il download fino a quando non visualizza l'immagine.- Trascurare il tempo di risposta del server e ottimizzare solo il front-end.
- Quando la misurazione dell’LCP nel report di Seoraporu.co supera i 2,5 secondi, è necessario innanzitutto individuare quale elemento è stato contrassegnato come LCP e dargli la priorità; un intervento mirato è più efficace di un approccio generico del tipo “ottimizza tutto”.
- Verificate regolarmente in che modo gli script di terze parti (pubblicità, analisi, widget di chat) influenzano l’ordine di caricamento della pagina; questi possono accumularsi nel tempo e ridurre gradualmente le prestazioni.
- Concentrarsi esclusivamente sull’LCP trascurando il CLS può causare uno spostamento improvviso dei contenuti durante il caricamento della pagina a causa di immagini o spazi pubblicitari di dimensioni non definite.