Core Web Vitals: guida completa 2026

I Core Web Vitals (CWV) sono l'insieme di metriche di Google che misura l'esperienza reale degli utenti: velocità di caricamento, reattività dell'interfaccia e stabilità visiva. Da maggio 2021 fanno parte di Page Experience ed entrano nel posizionamento.

Tutte e tre le metriche vengono valutate per URL — punteggi ottimi sulla homepage non aiutano le pagine prodotto. Google attinge i dati dal Chrome UX Report (utenti reali), non da simulazioni di laboratorio.

zoom_in

Cosa sono i Core Web Vitals

Storia: da FID a INP

Google ha introdotto i Core Web Vitals nel 2020 con tre metriche: LCP, FID (First Input Delay) e CLS. Il FID misurava il ritardo del primo tocco — utile, ma copriva solo una frazione dell'interattività della pagina.

LCP — Largest Contentful Paint

L'LCP registra il momento in cui il più grande blocco di contenuto visibile della pagina viene dipinto completamente. In genere è un'immagine hero, la copertina di un articolo o un grande titolo H1.

Cause comuni di un LCP lento

• TTFB lento (server, CDN, niente cache) — rappresenta fino al 40% del tempo LCP
• Immagine hero non prioritizzata: manca fetchpriority="high"
• Immagine hero non in preload (<link rel="preload">)
• CSS/JS render-blocking che ritardano il primo paint
• Immagini troppo grandi: niente WebP/AVIF, niente srcset
• Elemento LCP dietro rendering JS (React SSR non completato al momento dell'LCP)

<!-- Prioritise the LCP image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

<img
  src="/hero.webp"
  alt="Hero"
  fetchpriority="high"
  loading="eager"
  decoding="async"
  width="1280"
  height="720"
/>

INP — Interaction to Next Paint

L'INP misura il ritardo fra qualsiasi interazione dell'utente (clic, tasto, tocco) e il successivo paint visivo della pagina. A differenza del FID, l'INP traccia tutte le interazioni della sessione e usa il caso peggiore (con ripulitura degli outlier).

Cosa rompe l'INP

• I Long Task oltre 50 ms bloccano il main thread — il browser non riesce a gestire l'input
• Event handler pesanti: setState sincrono in React, aggiornamenti DOM massicci
• Nessun scheduler.yield() o setTimeout(0) per spezzare i task lunghi
• Script di terze parti (chat, ads, analytics) occupano il main thread
• Animazioni guidate da JS invece di transform/opacity CSS

// Breaking up a Long Task with scheduler.yield()
async function processLargeList(items) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i]);
    // Yield to the main thread every 50 items
    if (i % 50 === 0) {
      await scheduler.yield();
    }
  }
}

CLS — Cumulative Layout Shift

Il CLS è una metrica senza unità che descrive lo spostamento totale inatteso degli elementi della pagina. Formula: frazione di impatto × frazione di distanza. Lo spostamento di un pulsante premuto non conta — solo gli elementi che si spostano senza azione dell'utente.

Fonti comuni di CLS

• Immagini senza attributi width e height — il browser non conosce la dimensione prima del caricamento
• Web font senza font-display: optional o swap — il FOUT sposta il testo
• Banner iniettati dinamicamente, avvisi cookie in cima alla pagina
• Animazioni CSS che modificano top/left/margin invece di transform
• Pubblicità senza spazio riservato (min-height sul container)

/* Reserve space for an ad slot */
.ad-container {
  min-height: 250px;
  width: 100%;
}

/* Animation without CLS: transform and opacity only */
.card:hover {
  transform: translateY(-4px);
  /* Wrong: margin-top: -4px — this shifts layout */
}

Impatto sul posizionamento

Google ha confermato: i CWV sono uno dei segnali di Page Experience che partecipa al posizionamento. Ma sono un tiebreaker, non il fattore primario. Una pagina con contenuti ottimi e CWV scadenti batte una pagina con CWV ottimi e contenuti deboli.

Conta di più l'effetto indiretto: le pagine veloci riducono la frequenza di rimbalzo, aumentano profondità di sessione e conversione. Il business case dei CWV è più forte del case SEO. Amazon ha scoperto: +100 ms di LCP = −1% di ricavi.

Come misurare i CWV

Esistono due tipi di dati: dati di laboratorio (simulazione — Lighthouse, WebPageTest) e dati da campo (utenti reali — CrUX, GSC). Google posiziona in base ai dati da campo. Il lab serve per la diagnosi.

Strumenti di diagnosi

// web-vitals v4 — collect real CWV
import { onLCP, onINP, onCLS } from 'web-vitals';

function sendToAnalytics({ name, value, id }) {
  // Send to GA4
  gtag('event', name, {
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    metric_id: id,
    metric_delta: value,
  });
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

Checklist di ottimizzazione

zoom_in

LCP

• Aggiungi fetchpriority="high" e rimuovi loading="lazy" dall'immagine hero
• Aggiungi <link rel="preload" as="image"> per l'hero in <head>
• Converti le immagini in WebP o AVIF, configura srcset
• Riduci il TTFB a ≤ 800 ms: CDN, cache, Edge SSR
• Rimuovi gli script render-blocking da <head> (async/defer/module)
• Imposta Cache-Control: max-age=31536000 per gli asset statici

INP

• Profilai Long Task in Chrome DevTools → Performance → Main Thread
• Spezza i task oltre 50 ms con scheduler.yield() o setTimeout(0)
• Debounca gli handler di input / scroll (16–100 ms)
• Ottimizza React: useMemo, useCallback, React.memo, virtualizzazione delle liste
• Sposta gli script di terze parti nei Web Worker o caricali dopo l'LCP
• Animazioni CSS solo via transform e opacity

CLS

• Imposta width e height su tutti gli elementi <img> — il browser riserva lo spazio
• Usa aspect-ratio per i container con dimensioni sconosciute
• Configura font-display: optional per i font critici
• Riserva min-height per gli slot pubblicitari e i contenuti dinamici
• Metti gli avvisi (cookie, banner) in fondo, non in cima alla pagina
• Controlla il FOUT: i font senza fallback spostano il testo al caricamento