Dal 2021 Google utilizza i Core Web Vitals come fattore di ranking diretto. Nel 2025, con l'aggiornamento che ha sostituito FID con INP, le metriche si sono fatte ancora più esigenti. Vediamo cosa misurano, perché contano e come migliorarle in modo concreto.
Le tre metriche fondamentali
LCP — Largest Contentful Paint
Misura il tempo necessario affinché il contenuto più grande della pagina (solitamente un'immagine hero o un blocco di testo) diventi visibile. Target: sotto 2,5 secondi. Sotto 4s è nella fascia 'da migliorare', oltre è 'scarso'.
INP — Interaction to Next Paint
Ha sostituito FID nel marzo 2024. Misura la reattività del sito: quanto tempo passa tra un'interazione utente (click, tap, digitazione) e la risposta visiva della pagina. Target: sotto 200ms.
CLS — Cumulative Layout Shift
Misura la stabilità visiva: quanto gli elementi si spostano durante il caricamento della pagina. Un CLS alto significa elementi che saltano, testo che si sposta, bottoni che cambiano posizione. Target: sotto 0,1.
Le cause più comuni di LCP alto
- Immagini hero non ottimizzate (mancano fetchpriority='high' e preload)
- Font di Google caricati in modo bloccante
- TTFB alto per server lenti o CDN assente
- CSS render-blocking nel <head>
- Immagini in formato non ottimizzato (JPEG invece di WebP/AVIF)
Come migliorare LCP: strategie concrete
La singola cosa più impattante è aggiungere fetchpriority='high' all'immagine hero e, se possibile, un tag <link rel='preload'> nel <head>. Questo dice al browser di dare priorità assoluta al download di quella risorsa.
Seconda priorità: self-hostare i font invece di caricarli da Google Fonts. Una richiesta esterna in meno significa LCP migliore, specialmente su connessioni mobili.
Come migliorare INP
INP è spesso il più difficile da ottimizzare perché dipende da quanto JavaScript esegue il browser sul thread principale. Le strategie principali:
- Ridurre il JavaScript di terze parti (analytics, chat, widget)
- Usare requestIdleCallback per operazioni non urgenti
- Evitare animazioni CSS che triggerano layout (width, height, top, left)
- Preferire transform e opacity per le animazioni (GPU-accelerated)
- Caricare script non critici con defer o async
Come migliorare CLS
CLS è il più risolvibile. Il 90% dei problemi di CLS deriva da:
- Immagini senza attributi width e height — il browser non riserva lo spazio
- Font web che causano FOUT (Flash of Unstyled Text)
- Annunci e widget di terze parti senza dimensioni fisse
- Elementi inseriti dinamicamente sopra contenuto esistente
In un audit recente su un sito cliente, abbiamo ridotto il CLS da 0.42 a 0.02 semplicemente aggiungendo width e height espliciti a tutte le immagini e usando font-display: swap per i webfont.
Strumenti per misurare
Google PageSpeed Insights è il punto di partenza. Ma attenzione: misura dati di laboratorio (simulazione) e dati reali (CrUX). Per ottimizzare correttamente, guardate entrambi. WebPageTest offre un'analisi più dettagliata. Chrome DevTools Performance panel è indispensabile per diagnosticare INP.
Conclusione
I Core Web Vitals non sono solo metriche di ranking — sono un proxy dell'esperienza utente reale. Un sito veloce converte meglio, ha bounce rate più basso e fidelizza di più. L'ottimizzazione non è un'attività una-tantum: va monitorata nel tempo, soprattutto dopo ogni aggiornamento di contenuti o codice.