Cosa misurano i Core Web Vitals?
Risposta breve: LCP misura la resa dell'elemento di contenuto visibile più grande, INP la reattività dopo un'interazione e CLS la stabilità del layout. Google consiglia di valutarli al 75° percentile, separatamente su dispositivi mobili e desktop.
Un sito può essere bello e ben scritto ma essere comunque difficile da utilizzare se mostra i contenuti in ritardo, risponde lentamente o sposta gli elementi.
Google utilizza i Core Web Vitals nei suoi sistemi legati all'esperienza sulla pagina. Precisa anche che un buon risultato non garantisce la prima posizione e che la pertinenza dei contenuti resta essenziale. Queste metriche sono quindi una parte di un audit SEO, non una formula di posizionamento.
75esimo
Google consiglia di valutare LCP, INP e CLS al 75° percentile dei carichi, separatamente su dispositivi mobili e desktop.
Le tre metriche vanno lette insieme e collegate alla relativa pagina. Un test di laboratorio aiuta a diagnosticare; i dati sul campo descrivono ciò che i visitatori effettivi hanno osservato quando è disponibile un volume sufficiente.
I 3 Core Web Vitals spiegati in modo semplice
- LCP: contenuto principaleIl momento in cui viene visualizzato l'elemento visibile più grande.
- INP: la risposta ad un'azioneIl tempo fino al prossimo aggiornamento visivo.
- CLS: stabilitàMovimento imprevisto del contenuto durante il caricamento.
LCP = Largest Contentful Paint (visualizzazione del contenuto più grande)
In parole semplici: quanto velocemente si carica il contenuto principale della tua pagina?
Quando apri un sito, all'inizio vedi uno spazio bianco. Poi compaiono poco a poco immagini, testo e altri elementi. L'LCP è il momento in cui viene visualizzata la «cosa più grande», di solito l'immagine principale o il titolo principale.
Soglia "buona" consigliata: 2,5 secondi o meno, al 75° percentile.
Esempio concreto: il tuo post sul blog mostra il suo contenuto principale in 1,2 secondi in un test o in 4 secondi. I dati sul campo ci permetteranno di vedere cosa effettivamente sperimentano i visitatori.
Innanzitutto identifica l'elemento effettivamente misurato come LCP. Se si tratta di un'immagine, controllane il formato, le dimensioni, la priorità di caricamento e il tempo di risposta prima di modificare il resto della pagina.
INP = Interaction to Next Paint (interattività)
In parole semplici: quanto velocemente risponde il tuo sito quando fai clic, digiti o esegui un'azione?
Dopo aver fatto clic su un pulsante, c'è un ritardo prima che accada qualcosa. L'INP misura questo ritardo.
Soglia "buona" consigliata: 200 millisecondi o meno, al 75° percentile.
Esempio concreto: fai clic su "Aggiungi al carrello" e il successivo aggiornamento visivo arriva in 150 ms in un test, o in 800 ms.
CLS = Cumulative Layout Shift (spostamento del layout)
In parole semplici: la tua pagina «si muove» durante il caricamento?
Immagina: leggi del testo, poi all'improvviso viene inserito un annuncio sopra, il testo scende e perdi la posizione. Frustrante, vero? E' il CLS.
Soglia “buona” consigliata: 0,1 o meno, al 75° percentile.
Esempio concreto: il contenuto della tua pagina rimane stabile con un CLS di 0,02 nella misura, o cambia con un CLS di 0,5.
Un'immagine senza dimensioni dichiarate può spostare il contenuto mentre si carica. Indicarne larghezza e altezza aiuta il browser a riservare lo spazio.
Perché è così importante?
Ricerca Google
I Core Web Vitals fanno parte dei segnali di esperienza sulla pagina. Non prevedono il posizionamento tra due pagine e non sostituiscono la pertinenza del contenuto.
Conversione
Le prestazioni possono influenzare il comportamento dei visitatori, ma nessuna percentuale universale si applica a tutti i siti. Misura l'effetto con i tuoi eventi, un periodo comparabile e un volume sufficiente.
Cellulare
Google utilizza principalmente la versione mobile del contenuto per l'indicizzazione. Su questa versione, controlla quindi la presenza dei contenuti utili, la loro accessibilità e le condizioni reali di caricamento.
Come misurare i tuoi Core Web Vitals
PageSpeed Insights (gratuito, ufficiale Google)
Vai su pagespeed.web.dev e incolla il tuo URL. In base ai dati disponibili, vedrai:
- Dati del campo CrUX se l'URL o l'origine hanno un volume sufficiente
- un test di laboratorio Lighthouse eseguito al momento dell'analisi
- Se sei in verde (buono), arancione (medio) o rosso (cattivo)
- suggerimenti di ottimizzazione da convalidare nel tuo contesto
Google Search Console (gratuita, per l'intero sito)
Search Console raggruppa gli URL in base ai dati sul campo quando il sito dispone di informazioni sufficienti.
Chrome DevTools, pannello Performance (gratuito)
Aprite il pannello Performance di Chrome DevTools per esaminare le misurazioni locali e, quando disponibili, i dati sul campo. Sostituisce la precedente estensione Web Vitals da gennaio 2025, come spiega la documentazione di Chrome.
Lighthouse (gratuito, integrato in Chrome)
Apri DevTools (F12), fai clic su "Lighthouse", avvia un controllo. Questo ti dà un punteggio complessivo + dettagli.
Soluzioni per ottimizzare l'LCP
Problema 1: immagine principale troppo pesante
Soluzione: adatta il peso, il formato e le dimensioni dell'immagine alla sua visualizzazione effettiva, quindi misura nuovamente in condizioni comparabili.
- Utilizza TinyPNG o ImageOptim
- Utilizza formati moderni (WebP invece di JPG)
- Ridimensiona le tue immagini alle dimensioni di visualizzazione (non è necessaria un'immagine 5000x3000 se la visualizzi in 800x600)
Problema 2: Troppo JavaScript rallenta
Soluzione: carica il tuo JS in modalità «lazy», cioè in un secondo momento, non all'avvio.
- Aggiungi l'attributo
deferagli script non critici - Usa
asyncper cose che possono aspettare
Problema 3: il server risponde lentamente (TTFB - Time to First Byte)
Soluzione:
- misura i tempi di risposta prima di decidere se l'hosting deve cambiare
- Usa un CDN (Cloudflare, Fastly) quando la posizione del pubblico e l'architettura del sito lo giustificano
- Memorizza le pagine nella cache (con un plugin di cache se usi WordPress)
Soluzioni per ottimizzare l'INP (Interattività)
Problema 1: JavaScript con blocco prolungato
Soluzione: individua le attività lunghe, elimina il lavoro inutile e suddividi l'elaborazione per restituire il controllo al browser tra un passaggio e l'altro.
Problema 2: elaborazione eccessiva al clic
Soluzione: semplifica le tue interazioni. Se facendo clic su un pulsante si attivano 10 operazioni, sono troppe. Basta fare immediatamente ciò che è necessario.
Problema 3: librerie JavaScript troppo pesanti
Soluzione: usa librerie più leggere oppure riduci il numero di librerie.
Soluzioni per ottimizzare CLS (Offset)
Problema 1: immagini senza dimensioni definite
Soluzione: dichiara sempre l'altezza e la larghezza delle tue immagini in HTML. Questo riserva spazio prima del caricamento.
<img src="photo.jpg" width="800" height="600" alt="...">
Problema 2: contenuto che viene caricato successivamente (annunci, incorporamenti)
Soluzione: riserva spazio anche per questo contenuto dinamico.
Problema 3: modifica dei caratteri
Soluzione: utilizzate font-display: swap per mostrare il testo con un carattere di riserva durante il caricamento. La sostituzione può comunque spostare il testo: scegliete un carattere di riserva con metriche simili e misurate il CLS dopo la sostituzione.
Priorità: da dove cominciare?
- Fase 1: stabilisci una situazione di partenza sul campo e in laboratorio, indicando le condizioni di misurazione.
- Passaggio 2: identifica la metrica e l'elemento che effettivamente causa il problema.
- Passaggio 3: applica una modifica alla volta, quindi controlla l'aspetto visivo e le funzioni.
- Fase 4: ripeti i test e osserva i dati sul campo per un periodo sufficiente.
Strumenti per l'ottimizzazione
Cloudflare e altri CDN
Una CDN e le regole di memorizzazione nella cache possono ridurre alcuni tempi di trasferimento. L'effetto dipende dall'origine, dal contenuto, dalle regole e dalla posizione dei visitatori. Misura prima e dopo.
WordPress: WP Rocket o LiteSpeed Cache
Su WordPress, queste estensioni possono aiutare a configurare la cache e alcune ottimizzazioni. Testa ogni opzione, poiché la compatibilità dipende dal tema e da altri plugin.
Vercel o Netlify (per statico/Next.js)
Queste piattaforme forniscono primitive utili per la distribuzione e la memorizzazione nella cache. Il codice, i media e gli script di terze parti rimangono fondamentali.
Audit o ottimizzazione: come proseguire?
Per inserire le prestazioni in un progetto completo, consulta il nostro approccio alla creazione di siti web. Se un problema è già stato misurato, esplora l'ottimizzazione delle prestazioni e dei Core Web Vitals. Se la causa resta sconosciuta, inizia con un audit delle prestazioni. Il piano parte da una situazione di riferimento e non promette un punteggio universale.
Conclusione: puoi farcela
I Core Web Vitals non sono una magia complicata. LCP = il contenuto si carica in fretta. INP = il sito risponde in fretta. CLS = gli elementi non si spostano. Tre cose semplici.
E le soluzioni sono anche semplici: comprimi le tue immagini, carica il tuo JS in modo intelligente, riserva spazio per contenuti dinamici.
Il tempo necessario dipende dalla causa. Un'immagine o una regola di cache possono essere corrette rapidamente, mentre un'architettura o script di terze parti richiedono più lavoro. Se il sito accumula troppo debito tecnico, può essere opportuno valutare un rifacimento.
Inizia oggi. Misura su PageSpeed Insights, ottimizza una cosa alla volta, misura nuovamente. Questo è ciò che conta.