I Core Web Vitals (CWV) sono tre metriche di esperienza utente che Google usa come segnale di ranking ufficiale dal maggio 2021: LCP (velocità di caricamento elemento principale), INP (reattività alle interazioni) e CLS (stabilità visiva della pagina). Nel 2026 superare le soglie "buone" su tutti e tre i CWV dà un vantaggio competitivo misurabile nei settori dove la qualità tecnica è mediocre.
LCP: Largest Contentful Paint — il caricamento percepito
LCP misura il tempo necessario perché l'elemento visivo più grande nella viewport sia visibile: quasi sempre un'immagine hero, un'immagine in evidenza o un titolo H1 molto grande. Soglie: buono < 2.5s, da migliorare 2.5-4s, scarso > 4s. Il 70% dei problemi LCP dipende da immagini non ottimizzate o da un server con TTFB (Time to First Byte) lento.
LCP è la metrica che impatta di più sull'esperienza percepita dell'utente: se il contenuto principale tarda 4-5 secondi ad apparire, la maggior parte degli utenti abbandona la pagina prima che si carichi completamente. Questo comportamento si traduce in tasso di rimbalzo elevato, che Google interpreta come segnale negativo di qualità.
Come migliorare LCP: le 5 azioni principali
- Converti le immagini hero in WebP/AVIF (riduzione peso 40-60% a parità di qualità visiva)
- Aggiungi fetchpriority="high" all'immagine LCP per precaricarla sopra tutto il resto
- Usa un CDN (Content Delivery Network) per ridurre la latenza geografica del server
- Ottimizza il TTFB: hosting veloce, caching server-side, riduzione redirect in ingresso
- Rimuovi CSS e JavaScript render-blocking nel <head> che ritardano il rendering iniziale
Nei siti che realizziamo con Next.js per la realizzazione siti web, l'Image Component di Next.js gestisce automaticamente conversione WebP, lazy loading, dimensioni responsive e priority loading per l'immagine LCP. Questo porta sistematicamente l'LCP sotto i 2 secondi anche su dispositivi mobili di fascia media.
INP: Interaction to Next Paint — la reattività ai click
INP ha sostituito FID (First Input Delay) nel marzo 2024 e misura la reattività di tutte le interazioni utente durante l'intera sessione di navigazione — non solo della prima. Soglia buona: < 200ms. Ogni click, tap o pressione di tasto viene misurato; INP riporta il percentile 98 di tutte le interazioni, quindi anche un singolo elemento lento impatta il punteggio.
I problemi INP sono spesso causati da: JavaScript pesante che blocca il main thread del browser (long tasks > 50ms), gestori di eventi inefficienti che fanno molto lavoro in risposta a un click, o componenti React/Vue/Angular con re-rendering non ottimizzato. Strumenti come Chrome DevTools Performance e web-vitals.js in produzione aiutano a identificare esattamente quali interazioni sono lente.
CLS: Cumulative Layout Shift — gli elementi che "saltano"
CLS misura l'instabilità visiva della pagina: elementi che si spostano inaspettatamente mentre la pagina si carica. Il caso classico: un banner pubblicitario che appare dopo il caricamento iniziale e spinge il testo verso il basso, facendo cliccare l'utente sulla cosa sbagliata. Soglia buona: < 0.1. Un CLS alto è frustrante e causa clic accidentali.
Le cause più comuni di CLS: immagini senza dimensioni width/height definite (il browser non riserva spazio prima del caricamento), font web che sostituiscono il fallback system font con dimensioni diverse (FOUT - Flash of Unstyled Text), e elementi inseriti dinamicamente via JavaScript sopra contenuto esistente. La soluzione in Next.js: Image component con width/height obbligatori, font precaricati con next/font che elimina FOUT.
Next.js e Core Web Vitals: il vantaggio nativo
Next.js è progettato con i Core Web Vitals come priorità nativa. Il componente Image ottimizza automaticamente le immagini in WebP con dimensioni responsive, riservando spazio nella pagina per eliminare CLS. Il sistema di font next/font elimina il layout shift durante il caricamento tipografico. Il rendering SSR/SSG riduce il TTFB consegnando HTML pre-renderizzato. Nei siti che realizziamo, raggiungiamo sistematicamente il verde su tutti e tre i CWV.
Come misurare i Core Web Vitals del tuo sito
- PageSpeed Insights (pagespeed.web.dev): analisi per URL singolo con dati reali CrUX e test di laboratorio
- Google Search Console > Core Web Vitals: panoramica di tutto il sito per mobile e desktop separati
- Chrome DevTools > Lighthouse: audit completo in laboratorio con suggerimenti specifici
- web-vitals.js: libreria JavaScript per misurare CWV reali dei tuoi utenti in produzione
- Semrush Site Audit: Core Web Vitals integrati nell'audit tecnico del sito
La differenza tra dati di laboratorio e dati reali (Field Data) è importante: il laboratorio simula condizioni standard, mentre i dati reali riflettono la distribuzione effettiva dei dispositivi e delle connessioni dei tuoi utenti. Per un sito con molti utenti su mobile lento (comune per business B2C italiani), i dati reali possono essere significativamente peggiori di quelli di laboratorio.
Quanto impattano i CWV sul ranking?
Google ha confermato che i CWV sono un fattore di ranking "tie-breaker": a parità di rilevanza dei contenuti e autorità del dominio, un sito con CWV ottimi batte uno con CWV scarsi. Nell'esperienza dei progetti che seguiamo, il passaggio da "da migliorare" a "buono" su LCP ha prodotto miglioramenti di posizione del 5-15% su keyword competitive nei 60-90 giorni successivi all'intervento.
L'impatto è più pronunciato per ricerche mobile, dove Google dà maggiore peso all'esperienza su smartphone. Con il 65% del traffico italiano ora da mobile, ottimizzare i CWV per dispositivi mobili non è opzionale: è fondamentale sia per il ranking che per le conversioni.
Piano d'azione per migliorare i Core Web Vitals
Il percorso ottimale: 1) Misura lo stato attuale con PageSpeed Insights per le 10 pagine principali. 2) Identifica il CWV peggiore (spesso LCP per siti con immagini non ottimizzate). 3) Applica le ottimizzazioni prioritarie per quel CWV. 4) Verifica il miglioramento con PageSpeed Insights. 5) Monitora l'evoluzione dei dati reali in Search Console nelle 4-6 settimane successive. 6) Ripeti per gli altri CWV.
Se il tuo sito ha problemi strutturali di performance (CMS pesante, hosting lento, template non ottimizzato), le ottimizzazioni puntuali non bastano: serve una realizzazione siti web su stack moderno. La nostra agenzia SEO include ottimizzazione Core Web Vitals in tutti i piani. Contattaci per un'analisi gratuita delle performance del tuo sito.
