I Tre Core Web Vitals nel 2026

Google misura tre metriche di campo principali per l'esperienza di pagina. Ognuna ha una soglia per le prestazioni "Buone":

• Largest Contentful Paint (LCP) — tempo per rendere l'elemento visibile più grande. Buono: sotto i 2,5 secondi.
• Interaction to Next Paint (INP) — reattività a tutte le interazioni dell'utente (ha sostituito FID nel marzo 2024). Buono: sotto i 200 ms.
• Cumulative Layout Shift (CLS) — stabilità visiva durante il caricamento. Buono: sotto 0,1.

Un banner di consenso che blocca il rendering, esegue JavaScript pesante al caricamento o inserisce tardivamente cambiamenti di layout può spingere ognuno di questi nella fascia "Necessita Miglioramento" o "Scarso" — e Google utilizza dati di campo di 28 giorni da utenti Chrome reali, quindi i problemi transitori diventano segnali di posizionamento persistenti.

Come i Banner di Consenso Danneggiano l'LCP

Il Largest Contentful Paint solitamente si attiva su un'immagine hero o un titolo principale. Diversi pattern di consenso lo ritardano inutilmente:

Script CMP che Bloccano il Rendering

Caricare il CMP in modo sincrono dall'intestazione del documento interrompe il parsing HTML finché lo script non viene scaricato ed eseguito. Se il CMP è ospitato su un CDN lento o ha una cache fredda, puoi aggiungere 200-800 ms all'LCP a livello globale.

Banner che Copre l'Hero

Se il banner di consenso è posizionato come overlay modale che copre l'elemento LCP, i browser misurano comunque l'LCP dall'elemento coperto. Tuttavia, se il banner è l'elemento dipinto più grande, diventa il candidato LCP — e se viene reso tramite JavaScript dopo il caricamento della pagina, l'LCP è artificialmente alto.

Soluzione: Caricamento Asincrono con Bootstrap Inline Piccolo

Carica il CMP completo in modo asincrono (`async` o `defer`), con solo un piccolo script inline per la visualizzazione iniziale del banner. Punta a un bootstrap inferiore a 5KB compresso. Logica comportamentale completa, elenchi di vendor e UI chrome possono essere caricati in lazy load dopo il primo rendering.

Come i Banner di Consenso Danneggiano l'INP

Interaction to Next Paint misura il peggior tempo di risposta per tutti i clic, tocchi e pressioni di tasti durante una sessione. Le interazioni con il consenso ai cookie sono spesso la prima interazione di un utente — quindi un pulsante Accetta lento rovina il punteggio.

Lavoro Pesante sull'Accettazione

Molti CMP eseguono lavori sincroni sull'Accettazione: caricano 40+ script di vendor, scrivono su localStorage, inviano eventi dataLayer, attivano aggiornamenti di Google Consent Mode. Se questo supera i 200 ms, l'INP ne risente.

Soluzione: Accodare il Lavoro Dopo il Rendering

Al clic di Accetta, nascondi immediatamente il banner e pianifica il lavoro pesante con `requestIdleCallback` o `setTimeout(0)`. L'utente vede il banner scomparire istantaneamente; gli script vendor si caricano in background senza bloccare l'interazione.

Come i Banner di Consenso Danneggiano il CLS

Il Cumulative Layout Shift traccia i movimenti visivi inaspettati. I banner sono una fonte classica di CLS quando vengono iniettati nel DOM dopo che il contenuto è stato dipinto.

Iniezione Tardiva del Banner

Se il banner appare 800 ms dopo l'LCP, spinge i contenuti verso il basso e genera un cambiamento di layout. Anche un piccolo banner può innescare un punteggio CLS di 0,1+ se influisce su una parte ampia del viewport.

Re-Render del Widget di Preferenze Cookie

I widget di preferenza nel footer che caricano loghi di vendor in modo asincrono possono far rifluire l'intero footer più volte, amplificando il CLS.

Soluzione: Riservare Spazio in Anticipo

Utilizza CSS per riservare lo spazio del banner fin dal primo rendering — segnaposto ad altezza fissa, `min-height` sul footer, o un banner fisso in basso che non spinge i contenuti. I CMP moderni dovrebbero offrire una configurazione senza CLS di default.

Google Consent Mode V2 e Prestazioni

Consent Mode V2 consente ai tag Google di funzionare in uno stato senza cookie prima del consenso, trasmettendo segnali tramite `gtag('consent', 'default', {...})`. Questo è ottimo per la continuità della misurazione, ma la libreria gtag.js stessa pesa 50-90KB. Caricala in modo asincrono e imposta i valori predefiniti il prima possibile per evitare condizioni di gara.

• Imposta i valori predefiniti prima che gtag venga caricato — inserisci la chiamata di default del consenso nell'intestazione, prima dello script gtag.js.
• Usa `analytics_storage: 'denied'` come predefinito — minimizza i dati raccolti prima del consenso.
• Aggiorna all'Accettazione tramite requestIdleCallback — evita il blocco del thread principale.

Misurare l'Impatto del CMP sui Core Web Vitals

Non indovinare — misura. Utilizza questi strumenti per quantificare l'impatto del tuo banner:

• PageSpeed Insights — dati di campo da Chrome UX Report più audit Lighthouse in laboratorio. Confronta i punteggi con e senza lo script CMP.
• Estensione Chrome Web Vitals — overlay LCP, INP, CLS in tempo reale durante i test locali.
• WebPageTest.org — vista filmstrip e waterfall che mostra esattamente quando viene reso il banner e cosa blocca.
• Report Core Web Vitals di Search Console — dati di campo di 28 giorni raggruppati per pattern URL. Controlla se le landing page con il tuo banner ottengono punteggi diversi rispetto alle pagine senza.

Come FlexyConsent Rimane Veloce