Core Web Vitals 2026: la Guida Tecnica Completa

Se nel 2026 il tuo sito ha i Core Web Vitals rossi, Google lo sta penalizzando nel ranking ogni singolo giorno. Non è un'opinione: è una metrica ufficiale di posizionamento confermata da Google dal giugno 2021. In questa guida tecnica trovi tutto quello che serve sapere su LCP, INP e CLS: cosa sono davvero, le soglie "Good", come misurarli con precisione e la checklist per riportarli nel verde — anche se il tuo sito è su WordPress con 40 plugin.

01Cosa sono i Core Web Vitals

I Core Web Vitals sono tre metriche di performance definite da Google per quantificare la qualità dell'esperienza utente di una pagina web. Non misurano "quanto è bello il sito": misurano come il sito reagisce fisicamente al visitatore: quanto ci mette ad apparire, quanto risponde al tocco, quanto si muove sotto il dito.

Sono stati introdotti a maggio 2020 e sono diventati ufficialmente un fattore di ranking Google con il "Page Experience Update" di giugno 2021. Da allora Google li ha rifiniti più volte: a marzo 2024 ha sostituito la metrica FID (First Input Delay) con INP (Interaction to Next Paint), più severa e realistica.

Nel 2026 le tre metriche ufficiali sono:

• LCP — Largest Contentful Paint — quanto ci mette il contenuto principale ad apparire
• INP — Interaction to Next Paint — quanto il sito risponde quando l'utente clicca o tocca
• CLS — Cumulative Layout Shift — quanto il contenuto si sposta sotto gli occhi dell'utente mentre carica

02LCP — Largest Contentful Paint

Perché è importante

LCP è la metrica che misura la percezione di velocità. Non importa quanto il tuo backend sia veloce: se l'immagine hero del tuo sito ci mette 4 secondi a caricare, per l'utente il tuo sito è lento. E Google lo tratta come tale.

Le cause più comuni di LCP alto

1. Immagini troppo pesanti — un hero da 2 MB può portare l'LCP a 5+ secondi su connessione mobile 4G
2. Server lento — hosting economico che risponde in 1-2 secondi solo per il TTFB (Time To First Byte)
3. Risorse bloccanti — CSS e JavaScript nel <head> che il browser deve scaricare prima di mostrare qualunque cosa
4. Font web da Google Fonts caricati sincroni — il browser aspetta il font prima di renderizzare il testo
5. Immagini senza dimensioni — il browser deve attendere il download per sapere quanto spazio riservare

Come migliorare l'LCP

• Converti le immagini in WebP o AVIF — risparmio tipico del 30-70% sul peso rispetto a JPG/PNG
• Aggiungi loading="eager" e fetchpriority="high" sull'immagine hero
• Specifica sempre width e height in HTML
• Precarica i font critici con <link rel="preload" as="font" crossorigin>
• Usa un hosting con CDN (Cloudflare, Netlify, Vercel) per abbattere il TTFB sotto 200 ms
• Rimuovi plugin inutili su WordPress — ogni plugin aggiunge CSS/JS al caricamento

03INP — Interaction to Next Paint

Perché è importante

INP è la metrica più "severa" delle tre perché viene calcolata sulle interazioni reali degli utenti durante la navigazione, non solo sul primo caricamento. Se un sito ha un menu che si apre in 400 ms, l'utente lo percepisce come "scattoso" — e Google lo sa. Dal marzo 2024, INP ha sostituito la vecchia metrica FID (First Input Delay) perché FID considerava solo la prima interazione, mentre INP valuta tutte le interazioni della sessione.

Le cause più comuni di INP alto

1. JavaScript pesante nel main thread — script che bloccano il browser per 300+ ms
2. Librerie JS enormi caricate completamente — jQuery + React + 3 framework di animazione contemporaneamente
3. Event handler non ottimizzati — click listener che fanno calcoli complessi in sincrono
4. Script di terze parti — pixel di tracking, chatbot, popup di consenso cookie mal configurati
5. Animazioni CSS/JS che forzano il reflow continuo del layout

Come migliorare l'INP

• Suddividi i task JS lunghi usando setTimeout o scheduler.yield() per non bloccare il main thread
• Rimanda lo script non critico con defer o async
• Carica i tracker in modo asincrono dopo l'interazione utente (consent-gating)
• Usa requestIdleCallback per operazioni non urgenti
• Riduci i plugin WordPress — ogni plugin è potenziale JavaScript extra
• Evita librerie animation pesanti quando basta una transizione CSS

04CLS — Cumulative Layout Shift

Perché è importante

CLS è l'incubo degli utenti mobile. Un sito con layout instabile fa cliccare per sbaglio, rende i form impossibili da compilare e trasmette un'impressione di qualità scadente. Google penalizza i siti con CLS alto perché distruggono l'esperienza utente in modo misurabile.

Le cause più comuni di CLS alto

1. Immagini senza width e height — il browser non sa quanto spazio riservare e sposta il contenuto quando l'immagine carica
2. Banner cookie o pubblicità inseriti dopo che il contenuto è già visibile
3. Font web che caricano in ritardo — il testo cambia dimensione quando il font arriva (FOUT — Flash of Unstyled Text)
4. iframe senza dimensioni fisse — video YouTube embed o mappe Google senza altezza esplicita
5. Contenuto dinamico inserito sopra contenuto esistente — "sei il visitatore numero 1000", notifiche push, chat widget

Come migliorare il CLS

• Specifica SEMPRE width e height sulle immagini (o usa aspect-ratio in CSS)
• Riserva spazio per annunci e banner con contenitori di dimensione fissa
• Preload dei font critici + font-display: optional per evitare FOUT
• Posiziona il banner cookie in overlay, non nel flusso del contenuto
• Usa transform invece di top/left per animazioni di elementi
• Carica le immagini al di fuori del viewport in lazy, ma con contenitore già dimensionato

05Come misurare i Core Web Vitals

Esistono quattro tool principali, ciascuno con pro e contro:

Dati Field vs Lab: i dati "field" sono misurazioni reali raccolte dagli utenti Chrome che hanno accettato di condividere dati di utilizzo (CrUX dataset). I dati "lab" sono simulazioni fatte da Lighthouse. Google usa i field data per il ranking, quindi sono quelli che contano davvero.

06Checklist tecnica: ottimizzare i Core Web Vitals

Ecco la checklist che applichiamo quando prendiamo in carico un sito con Core Web Vitals rossi. Nell'ordine di impatto, dal più grande al più piccolo:

Priorità 1 — Hosting e immagini

• Verifica il TTFB (Time to First Byte): deve essere sotto 200 ms. Se è sopra, cambia hosting o aggiungi CDN
• Converti tutte le immagini in WebP o AVIF
• Aggiungi width e height a ogni <img>
• Precarica l'immagine hero con <link rel="preload" as="image" href="..." fetchpriority="high">
• Lazy load su tutte le immagini below-the-fold con loading="lazy"

Priorità 2 — JavaScript e script di terze parti

• Audit di tutti i plugin WordPress → elimina quelli non essenziali
• Carica Meta Pixel, GA4, chatbot solo dopo consenso cookie (consent-gating)
• Aggiungi defer a tutti gli script non critici
• Rimuovi jQuery se non strettamente necessario
• Minimizza e combina CSS/JS (plugin WP Rocket, Autoptimize)

Priorità 3 — Font e CSS

• Precarica solo i font web effettivamente usati above-the-fold
• Imposta font-display: swap (o optional per CLS zero)
• Rimuovi CSS non utilizzato (PurgeCSS, UnCSS)
• Inlining del CSS critico nel <head>

Priorità 4 — Layout e stabilità

• Riserva spazio per ad e iframe con contenitori a dimensione fissa
• Cookie banner in overlay (position fixed), mai nel flusso
• Mai inserire contenuti sopra elementi esistenti dopo il caricamento

07I numeri che contano davvero

Non vale la pena ottimizzare i Core Web Vitals solo "per Google". Vale la pena perché gli utenti li percepiscono. Dati reali del 2026:

Se vendi online, un sito veloce non è solo "una cosa buona": è il tuo canale di acquisizione più sottovalutato. Molte aziende spendono 2.000€/mese in Meta Ads senza accorgersi che il loro sito è talmente lento che il 60% delle persone che pagano per far arrivare se ne vanno prima ancora di vedere il prodotto.

08Chi deve preoccuparsene (e chi no)

I Core Web Vitals sono critici per:

• E-commerce di qualunque dimensione
• Siti vetrina che fanno lead generation
• Blog e portali di contenuto che vivono di traffico organico
• SaaS con landing page
• Qualsiasi sito che punta a posizionarsi su keyword competitive

I Core Web Vitals sono meno urgenti per:

• Siti puramente informativi istituzionali con zero obiettivo commerciale
• Portali già posizionati su keyword no-competition brand
• Siti interni ad accesso autenticato (intranet aziendali)

Ma attenzione: anche se non sei un e-commerce, un sito lento racconta qualcosa di te al visitatore. Un sito professionale veloce comunica cura, affidabilità, serietà. Un sito lento comunica l'esatto opposto.

09Da dove iniziare se parti da zero

Se non hai mai controllato i Core Web Vitals del tuo sito, questi sono i passi concreti nelle prossime 48 ore:

1. Vai su pagespeed.web.dev e inserisci l'URL della tua homepage
2. Guarda il punteggio mobile (è quello che conta di più per Google oggi)
3. Se vedi tre pallini verdi (LCP, INP, CLS): complimenti, sei a posto
4. Se vedi anche solo un pallino rosso o arancione: hai lavoro da fare
5. Vai in Google Search Console → Esperienza → Core Web Vitals: controlla quante pagine totali sono "Poor"
6. Se stai perdendo potenziale traffico, chiedi a un professionista

10In sintesi

Riassumiamo i numeri reali del 2026:

• LCP: target < 2.5 secondi
• INP: target < 200 millisecondi
• CLS: target < 0.1
• Google misura dati reali degli utenti Chrome, non simulazioni
• Almeno il 75% delle visite deve rispettare le soglie per essere "Good"
• Verificare in continuo, non solo una volta all'anno

Non è un argomento sexy, ma è uno dei fattori più sottovalutati del digital marketing nel 2026. Mentre tutti rincorrono le ultime novità su AI generativa e algoritmi social, Google continua a premiare i siti tecnicamente ben fatti.

Se vuoi un esempio concreto di sito ottimizzato, questo stesso blog ha un LCP sotto 1.8 secondi, INP sotto 50 ms e CLS a 0. Puoi verificarlo tu stesso su PageSpeed Insights.

E se ti interessa capire quanto costa realmente avere un sito professionale veloce e ottimizzato, abbiamo scritto una guida dedicata: quanto costa un sito web professionale nel 2026.