Core Web Vitals 2026: LCP, INP e CLS – Come Misurarli e Ottimizzarli

I Core Web Vitals sono le metriche con cui Google misura la qualità dell'esperienza utente su un sito web. Dal maggio 2021 influenzano il ranking, e nel 2026 il loro peso è aumentato. La novità più rilevante degli ultimi anni è l'introduzione di INP (Interaction to Next Paint) in sostituzione di FID, avvenuta nel marzo 2024.

Questa guida spiega cosa misura ciascuna metrica, quali sono le soglie attese da Google, come misurarle con gli strumenti corretti e soprattutto come ottimizzarle in modo pratico.

Le tre metriche Core Web Vitals nel 2026

LCP – Largest Contentful Paint

LCP misura il tempo necessario per renderizzare l'elemento più grande visibile nella viewport iniziale: tipicamente l'immagine hero, il titolo principale o un video. Misura la percezione di velocità di caricamento della pagina.

INP – Interaction to Next Paint

INP misura la reattività di una pagina alle interazioni dell'utente. Registra la latenza di ogni interazione (click, touch, input da tastiera) durante l'intera visita e restituisce il valore peggiore (o quasi peggiore) come punteggio. Ha sostituito FID nel marzo 2024 perché misura tutte le interazioni, non solo la prima.

CLS – Cumulative Layout Shift

CLS misura la stabilità visiva della pagina: quanto si sposta il contenuto in modo inaspettato durante il caricamento. Un'immagine che compare e sposta il testo, un banner che appare e fa saltare il bottone che stavi per cliccare: questi sono layout shift indesiderati.

I benchmark di Google nel 2026

Google definisce tre fasce per ciascuna metrica:

LCP

• Buono: sotto 2.5 secondi
• Da migliorare: tra 2.5 e 4 secondi
• Scarso: oltre 4 secondi

INP

• Buono: sotto 200 millisecondi
• Da migliorare: tra 200 e 500 ms
• Scarso: oltre 500 ms

CLS

• Buono: sotto 0.1
• Da migliorare: tra 0.1 e 0.25
• Scarso: oltre 0.25

La soglia "buono" è il target da raggiungere almeno per il 75° percentile degli utenti reali. Questi dati vengono dal Chrome User Experience Report (CrUX), che raccoglie dati reali dai browser Chrome.

Come misurare i Core Web Vitals

PageSpeed Insights

PageSpeed Insights è lo strumento gratuito di Google che mostra sia i dati di laboratorio (Lighthouse, simulazione) sia i dati di campo reali (CrUX). I dati di campo sono quelli che Google usa per il ranking. Testa sia mobile che desktop — i valori mobile sono spesso molto peggiori.

Google Search Console

Il rapporto "Esperienza" → "Core Web Vitals" in Search Console mostra le URL raggruppate per problema, con la distinzione tra mobile e desktop. È l'unico strumento che mostra quali URL specifiche hanno problemi basandosi sui dati CrUX del tuo sito.

Lighthouse in Chrome DevTools

Per test approfonditi in locale, apri Chrome DevTools → Lighthouse e analizza la pagina. Mostra anche opportunità di ottimizzazione specifiche con stime di miglioramento. Non riflette i dati reali degli utenti, ma è utile per diagnosticare problemi prima di pubblicare.

Come ottimizzare LCP

Ottimizzazione delle immagini

Il caso più comune di LCP lento è un'immagine hero non ottimizzata. Le azioni fondamentali:

• Converti le immagini in WebP o AVIF (risparmio 30-50% di peso a parità di qualità)
• Definisci esplicitamente width e height per evitare reflow
• Usa il tag <link rel="preload"> per l'immagine LCP, in modo che il browser la scarichi prima di processare il CSS
• Evita il lazy loading sull'immagine above the fold — il browser deve scaricarla immediatamente

Server response time e CDN

Un TTFB (Time to First Byte) alto rallenta tutto il resto. Target: TTFB sotto 800ms. Usa un'hosting performante, implementa caching lato server, valuta un CDN per servire le risorse statiche dall'edge più vicino all'utente.

Eliminare le risorse render-blocking

CSS e JavaScript che bloccano il rendering ritardano LCP. Usa il deferimento asincrono per i JS non critici (<script defer> o <script async>), e critica solo il CSS above-the-fold (inlining del CSS critico).

Come ottimizzare INP

INP è la metrica più complessa da ottimizzare perché dipende da quanto JavaScript viene eseguito sul thread principale del browser in risposta alle interazioni.

Ridurre il JavaScript e il long tasks

Ogni "long task" (blocco di JavaScript eseguito per più di 50ms) ritarda la risposta del browser alle interazioni. Usa Chrome DevTools → Performance per identificarli. L'obiettivo è spezzare i task lunghi in blocchi più piccoli con setTimeout, requestIdleCallback o scheduler.postTask.

Dati reali: un INP superiore a 300ms è associato a un calo della performance mobile del 31%. Gli utenti su smartphone con hardware mid-range sono i più colpiti.

Web Workers

Sposta le operazioni computazionalmente intensive (parsing JSON pesante, calcoli complessi, operazioni su array grandi) su Web Worker, che girano in thread separati senza bloccare il thread UI principale.

Ottimizzare gli event handler

Evita di eseguire operazioni pesanti direttamente negli event listener. Usa la tecnica del debounce per eventi ad alta frequenza (scroll, resize, input), e assicurati che i gestori click facciano il minimo indispensabile nel thread principale.

Come ottimizzare CLS

Dimensioni esplicite per immagini e video

La causa più comune di CLS è un'immagine o un video senza width e height dichiarati nell'HTML. Il browser non conosce le dimensioni prima di averli scaricati, quindi non riserva lo spazio e sposta il contenuto quando arrivano. Soluzione: definisci sempre width e height, e usa aspect-ratio in CSS.

Font display swap

Quando il browser carica un web font, sostituisce il testo con il font di sistema e poi con il font finale: questo può causare un layout shift visibile. Usa font-display: optional (nessun fallback, solo il font custom) o font-display: swap con dimensioni di fallback calibrate tramite size-adjust.

Contenuti dinamici above the fold

Banner cookie, notifiche e contenuti inseriti dinamicamente dopo il caricamento causano CLS se compaiono sopra il fold. Riserva lo spazio necessario con min-height dichiarato, o inserisci questi elementi sotto al contenuto principale.

Core Web Vitals e ranking SEO

Google ha confermato più volte che i Core Web Vitals sono un fattore di ranking, parte del sistema Page Experience. Non sono il fattore più importante (relevanza del contenuto e backlink pesano di più), ma possono essere il fattore discriminante tra due pagine di qualità simile.

Soprattutto per le SERP competitive dove molti siti hanno contenuti di buona qualità, avere Core Web Vitals nel range "buono" può fare la differenza. E su mobile, l'impatto è più pronunciato: Google usa il mobile-first indexing, quindi i dati CrUX da mobile influenzano il ranking per tutti.