Trackum

Cookie banner e tempo di caricamento: come rallenta la tua pagina

Molti cookie banner caricano script, file di lingua ed elenchi di provider da server esterni. Ecco come misurare quanto costa al tuo sito e come renderlo più leggero.

Guida · · 7 min di lettura · Scritto con l'IA, revisionato con l'aiuto dell'IA il

Cookie banner e tempo di caricamento: come rallenta la tua pagina
📷 Mike van den Bos · Unsplash

Sì, un cookie banner può allungare in modo sensibile il tempo di caricamento del tuo sito, soprattutto su smartphone e alla prima visita. Molti banner di provider noti caricano prima uno script, poi una configurazione, fogli di stile, font, traduzioni ed elenchi di tutti i servizi integrati, spesso da più server esterni. Il banner diventa visibile solo quando tutto questo è arrivato. Poiché compare su ogni pagina e per ogni nuovo visitatore, questo ritardo colpisce proprio la prima impressione. Chi vuole migliorare la velocità del sito web non deve quindi controllare solo immagini, tema e plugin, ma anche il cookie banner.

L'argomento viene spesso trascurato perché sul proprio computer il banner raramente si nota. L'hai già chiuso, la decisione è salvata e sulla veloce rete Wi-Fi dell'ufficio tutto si carica comunque in fretta. Un nuovo visitatore su smartphone in rete mobile vive invece l'intera catena di caricamento: area vuota, poi il banner, poi magari un salto nel layout. Proprio questo visitatore è il più importante per le campagne pubblicitarie.

Un cookie banner è spesso lento perché carica più di quanto serve. In realtà deve fare poco: mostrare un testo, offrire due o tre pulsanti, salvare la decisione e trasmetterla a Google e altri servizi. Molte soluzioni sono però costruite come piattaforme universali che devono coprire ogni lingua, ogni giurisdizione e centinaia di servizi. Questa versatilità costa in termini di tempo di caricamento, anche se la tua pagina ha bisogno solo di una frazione di queste funzioni.

  • Molti file: script, configurazione, foglio di stile, font e logo sono richieste separate.
  • Server esterni: ogni nuovo dominio richiede una nuova connessione prima che arrivi il primo file.
  • File di lingua ed elenchi di provider: vengono caricate lunghe descrizioni di tutti i servizi, anche se quasi nessuno apre i dettagli.
  • Script bloccante nell'head: se lo script è caricato in modo sincrono nell'head, il browser attende prima di costruire la pagina.
  • Nessuno spazio riservato: se il banner si inserisce a posteriori nel flusso della pagina, il contenuto salta verso il basso.

Ciascuno di questi punti, preso da solo, è piccolo. Insieme creano una catena in cui un file aspetta il successivo. In rete mobile in particolare non conta solo la dimensione in kilobyte, ma soprattutto il numero di richieste e connessioni, perché ognuna porta con sé un tempo di attesa.

→ Banner cookie con Consent Mode v2: conforme, senza canone mensile

Cosa fa il banner con LCP, INP e CLS

Un cookie banner lento peggiora direttamente i Core Web Vitals, tre metriche con cui Google valuta caricamento, reattività e stabilità di una pagina. Il Largest Contentful Paint (LCP) misura quando appare l'elemento visibile più grande nella prima schermata. Un valore fino a 2,5 secondi è considerato buono. Su mobile il cookie banner è spesso proprio questo elemento più grande, perché il suo blocco di testo occupa gran parte dello schermo. Se compare in ritardo, il valore LCP è scarso, indipendentemente da quanto sia veloce il resto della pagina.

Interaction to Next Paint (INP) ha sostituito il 12 marzo 2024 la precedente metrica First Input Delay (FID) e misura quanto velocemente la pagina reagisce ai clic. Un valore fino a 200 millisecondi è buono. Con il banner ci sono due momenti critici: mentre si carica, il suo script occupa il thread principale del browser. E dopo il clic su “Accetta tutto” spesso partono molti tag contemporaneamente. Se la pagina reagisce con un ritardo percepibile, l'INP ne risente.

Cumulative Layout Shift (CLS) misura quanto il contenuto salta durante il caricamento. Un valore fino a 0,1 è buono. Un banner posizionato come livello fisso sopra la pagina non sposta nulla. Un banner inserito in alto nel flusso della pagina spinge invece tutto verso il basso. Chi stava per toccare un link colpisce qualcos'altro. Questi momenti sono fastidiosi e portano i visitatori ad abbandonare la pagina più rapidamente.

Core Web Vitals e l'impatto del cookie banner
MetricaCosa misuraBuono fino aCome un banner lo peggiora
Largest Contentful Paint (LCP)Quando appare l'elemento più grande visibile2,5 secondiIl banner è spesso l'elemento più grande su smartphone e appare in ritardo
Interaction to Next Paint (INP)Quanto velocemente la pagina reagisce a clic e tocchi200 millisecondiLo script occupa il thread principale, dopo “Accetta tutto” partono molti tag insieme
Cumulative Layout Shift (CLS)Quanto il contenuto salta durante il caricamento0,1Il banner viene inserito nel flusso della pagina invece di essere un livello fisso sopra

Le prestazioni del cookie banner si misurano meglio mettendosi nei panni di un nuovo visitatore. Per una prima valutazione non servono strumenti specializzati: bastano il browser Chrome e PageSpeed Insights. Contano le condizioni: nessun consenso salvato, nessuna cache e una connessione simile a quella di uno smartphone fuori casa.

  • Apri PageSpeed Insights con la vista per dispositivi mobili e annota LCP, INP e CLS. I suggerimenti su codice di terze parti e risorse bloccanti spesso indicano direttamente il banner.
  • In una finestra di navigazione in incognito apri gli strumenti per sviluppatori di Chrome, disattiva la cache nella scheda Rete e imposta la limitazione su “Slow 4G”.
  • Ricarica la pagina e filtra per il dominio del provider del banner. Conta i file e somma i kilobyte trasferiti.
  • Nella scheda Prestazioni avvia una registrazione e leggi il momento in cui il banner diventa visibile.
  • Ripeti ogni misurazione più volte e usa il valore mediano, perché le singole esecuzioni variano molto.

Assicurati che le estensioni del browser, come gli ad blocker, siano disattivate nella finestra in incognito, altrimenti mancano delle richieste e il risultato sembra migliore della realtà. I dati sul campo in PageSpeed Insights provengono da utenti reali di Chrome negli ultimi 28 giorni e reagiscono quindi con ritardo alle modifiche. I dati di laboratorio riportati sotto mostrano subito se un intervento ha effetto.

→ Configurare correttamente Google Consent Mode v2: nessun avviso in Tag Assistant

Cosa mostra una misurazione su una pagina di test vuota

Una pagina di test vuota mostra quanto è veloce un cookie banner da solo. Si intende una pagina in cui, oltre al banner, non si carica nulla, così che nient'altro influisca sul risultato. Trackum ha misurato i banner in condizioni fisse: pagina di test vuota, emulazione smartphone, limitazione “Slow 4G”, mediana di 7 esecuzioni. Il banner snello di Trackum era visibile dopo 0,4 secondi. I banner di provider noti comparivano dopo un tempo da 1,3 a 4,3 secondi e per farlo caricavano da 7 a 15 file, per un totale da 150 a 210 KB.

Su una pagina reale i valori sono diversi, perché immagini, font e script competono per la stessa banda. Ma la direzione resta la stessa: meno file e server esterni servono a un banner, prima appare sullo schermo e meno rallenta il resto della pagina.

Esempio pratico: azienda artigianale con modulo di contatto

Una falegnameria fa pubblicità su Google Ads per armadi a muro su misura. Il sito gira su WordPress, le immagini sono compresse, il tema è snello. Eppure PageSpeed Insights mostra un valore LCP scarso su mobile. Nella scheda Rete si capisce perché: il banner carica una buona dozzina di file da due server esterni, tra cui traduzioni per lingue che sul sito non ci sono nemmeno. Solo dopo compare il testo informativo, che su smartphone è l'elemento più grande.

Caricare semplicemente il banner più tardi non sarebbe una soluzione. Il valore predefinito per il Google Consent Mode v2, cioè l'interfaccia attraverso cui i tag di Google ricevono la decisione del visitatore, deve essere impostato prima che il primo tag si attivi. Altrimenti vengono inviati dati senza consenso. La soluzione è un banner che pesa poco fin dall'inizio. Dopo il passaggio a una versione snella, il banner appare prima sullo schermo e il modulo di contatto viene misurato correttamente con e senza consenso.

  • Un unico file di pochi kilobyte invece di una catena di caricamenti successivi.
  • Nessun caricamento da server esterni per testi, font o elenchi.
  • Solo le lingue che la tua pagina usa davvero.
  • Un livello posizionato fisso che non sposta il contenuto.
  • Consent Mode v2 integrato direttamente, senza script aggiuntivo.
  • “Rifiuta tutto” con lo stesso rilievo di “Accetta tutto”, già al primo livello.

Un cookie banner snello non è un banner ridotto all'osso. Deve comunque raccogliere, salvare, documentare e trasmettere il consenso a Google e agli altri servizi. Lo fa solo senza giri inutili. Se valuti un provider, carica una pagina di test con solo il suo banner e misura tu stesso, invece di fidarti delle promesse pubblicitarie.

Migliorare il tempo di caricamento senza mettere a rischio il consenso

Il banner di Trackum è un unico file da 6,6 KB, non carica altro, parla tedesco e inglese, include il Consent Mode v2 e mostra “Rifiuta tutto” con lo stesso rilievo già al primo livello. Le prove del consenso vengono salvate nell'UE senza indirizzo IP. Il banner costa 50 € una tantum più 4,90 € al mese ed è già incluso nell'abbonamento da 19 € al mese. Tutti i prezzi sono IVA esclusa.

Se prima vuoi sapere a che punto è il tuo sito, il check gratuito di Trackum lo verifica in un browser reale, mostra il banner, il consenso e i tag attivati e indica un prezzo fisso per ogni problema rilevato. Ci vogliono circa due minuti e non serve registrarsi.

Domande frequenti

Come faccio a sapere se il mio cookie banner rallenta la pagina?

Apri la pagina in una finestra di navigazione in incognito, attiva negli strumenti per sviluppatori di Chrome la limitazione “Slow 4G” e filtra la scheda Rete in base al dominio del provider del banner. Conta i file e i kilobyte e controlla nella scheda Prestazioni quando il banner diventa visibile.

Posso caricare lo script del banner più tardi per rendere la pagina più veloce?

Il caricamento asincrono va bene, purché il valore predefinito del consenso sia impostato prima che i tag si attivino. Caricare apposta il banner in ritardo sposta solo il problema: compare più tardi, può causare uno spostamento del layout e i tag aspettano più a lungo una decisione.

Un cookie banner può essere l'elemento LCP?

Sì. Se il banner è il blocco di testo più grande visibile al primo caricamento, il browser lo misura come Largest Contentful Paint. Se appare in ritardo, il valore LCP peggiora direttamente.

Un cookie banner più veloce migliora il mio posizionamento su Google?

I Core Web Vitals sono uno dei tanti segnali che Google usa per valutare l'esperienza sulla pagina. Un banner veloce da solo non ti fa salire nei risultati, ma un banner lento può impedire buoni valori su mobile e far scappare i visitatori.

Fonti

  1. web.dev: Web Vitals (Core Web Vitals e soglie) web.dev
  2. web.dev: Largest Contentful Paint (LCP) web.dev
  3. web.dev: Interaction to Next Paint diventa Core Web Vital il 12 marzo 2024 web.dev
  4. Google for Developers: Informazioni su PageSpeed Insights (dati di campo e di laboratorio) developers.google.com
  5. Chrome DevTools: Esaminare e limitare l'attività di rete developer.chrome.com

Continua a leggere

Help