Best practice per le notifiche sui cookie

Ottimizza le notifiche relative ai cookie per migliorare le prestazioni e l'usabilità.

Katie Hempenius

Barry Pollard

Questo documento illustra in che modo le notifiche sui cookie possono influire sulle prestazioni, sulla misurazione delle prestazioni e sull'esperienza utente.

Rendimento

Le notifiche dei cookie possono avere un impatto significativo sulle prestazioni delle pagine perché in genere vengono caricate all'inizio del processo di caricamento della pagina, vengono mostrate a tutti gli utenti e possono potenzialmente influenzare il caricamento degli annunci e di altri contenuti della pagina.

Ecco come le notifiche sui cookie possono influire sulle metriche di Web Vitals:

• LCP (Largest Contentful Paint): la maggior parte delle notifiche per il consenso all'uso dei cookie è di dimensioni piuttosto ridotte, pertanto in genere non contiene l'elemento LCP di una pagina. Tuttavia, questo può accadere, in particolare sui dispositivi mobili. Sui dispositivi mobili, l'avviso di cookie occupa in genere una porzione più grande dello schermo. In genere questo si verifica quando una notifica sui cookie contiene un grande blocco di testo (anche i blocchi di testo possono essere elementi LCP).

• Interazione con Next Paint (INP): le notifiche sui cookie possono spesso essere una causa di un INP elevato, in quanto in genere aggiungono molti script di terze parti, se accettati. Il problema principale consiste spesso nell'eseguire l'interazione Accetta, perché comporta un'elaborazione eccessiva per aggiungere tutti gli script di terze parti in una sola volta. Per informazioni su come mitigare questo problema, consulta la sezione Best practice di seguito.

• Cumulative Layout Shift (CLS): le notifiche di consenso all'uso dei cookie sono una fonte molto comune di variazioni del layout.

In generale, è possibile che un avviso sui cookie da parte di fornitori di terze parti abbia un impatto maggiore sulle prestazioni rispetto a un avviso sui cookie creato da te. Non si tratta di un problema specifico delle notifiche sui cookie, ma piuttosto della natura degli script di terze parti in generale.

Best practice

Le best practice riportate in questa sezione si concentrano sulle notifiche relative ai cookie di terze parti. Alcune di queste best practice, ma non tutte, saranno applicabili anche alle notifiche relative ai cookie proprietari.

Comprendere l'impatto INP delle notifiche sui cookie

Come accennato in precedenza, il pulsante Accetta è spesso una causa particolare di problemi INP dovuti all'elevato volume di elaborazione che accade quando viene fatto clic.

Il team di Chrome ha collaborato con una serie di piattaforme di gestione del consenso (CMP) per il rendimento dopo aver fatto clic su Accetta per consentire al browser di accettare rapidamente questa accettazione nella visualizzazione successiva. Vedi questo case study di PubTech come esempio.

Se la tua CMP è interessata da questo problema, prova a contattarla per verificare se può allo stesso modo evitare problemi INP per i siti che la incorporano. Consulta l'articolo sull'ottimizzazione delle attività lunghe per informazioni sulle strategie efficaci.

Carica script di notifiche sui cookie in modo asincrono

Gli script di notifica cookie devono essere caricati in modo asincrono. Per farlo, aggiungi l'attributo async al tag script.

<script src="https://cookie-notice.com/script.js" async>

Gli script che non sono asincroni bloccano l'analizzatore sintattico del browser. Questo ritarda il caricamento della pagina e l'LCP. Per ulteriori informazioni, consulta Caricare JavaScript di terze parti in modo efficiente.

Nota: se devi utilizzare script sincroni (ad esempio, alcune notifiche sui cookie si basano su script sincroni per implementare il blocco dei cookie), devi assicurarti che questa richiesta venga caricata il più rapidamente possibile. Un modo per farlo è utilizzare gli hint delle risorse.

Carica direttamente gli script di avviso sui cookie

Gli script di avviso dei cookie devono essere caricati "direttamente" inserendo il tag script nel codice HTML del documento principale, anziché essere caricati da un gestore di tag o da un altro script. L'utilizzo di un tag manager o di uno script secondario per inserire lo script di avviso sui cookie ritarda il caricamento dello script di avviso sui cookie: oscura lo script dall'analizzatore sintattico Lookahead del browser e impedisce il caricamento dello script prima dell'esecuzione di JavaScript.

Stabilisci una connessione anticipata con l'origine della notifica sui cookie

Tutti i siti che caricano gli script di notifica dei cookie da una località di terze parti devono utilizzare gli hint dns-prefetch o preconnect per stabilire una connessione anticipata con l'origine che ospita le risorse di notifica sui cookie. Per maggiori informazioni, consulta Stabilire in anticipo connessioni di rete per migliorare la velocità percepita delle pagine.

<link rel="preconnect" href="https://cdn.cookie-notice.com/">

Nota: capita spesso che le notifiche sui cookie carichino risorse da origini diverse, ad esempio il caricamento di risorse da www.cookie-notice.com e cdn.cookie-notice.com. Origini separate richiedono connessioni separate e quindi hint delle risorse separati.

Precarica le notifiche sui cookie in modo appropriato

Alcuni siti potrebbero trarre vantaggio dall'utilizzo del suggerimento delle risorse preload per caricare lo script di notifica dei cookie. Il suggerimento della risorsa preload indica al browser di avviare una richiesta in anteprima per la risorsa specificata.

<link rel="preload" href="https://www.cookie-notice.com/cookie-script.js">

preload è più potente quando il suo utilizzo è limitato al recupero di un paio di risorse chiave per pagina. Pertanto, l'utilità del precaricamento dello script di notifica dei cookie varierà a seconda della situazione.

Presta attenzione ai compromessi in termini di prestazioni quando definisci lo stile delle notifiche relative ai cookie

La personalizzazione dell'aspetto di un avviso relativo ai cookie di terze parti può comportare costi aggiuntivi per le prestazioni. Ad esempio, le notifiche relative ai cookie di terze parti non sono sempre in grado di riutilizzare le stesse risorse (ad esempio i caratteri web) che vengono utilizzate in altri punti della pagina. Inoltre, le notifiche relative ai cookie di terze parti tendono a caricare lo stile alla fine di lunghe catene di richieste. Per evitare sorprese, tieni presente il modo in cui la notifica sui cookie viene caricata e applica lo stile e le risorse correlate.

Evita variazioni del layout

Di seguito sono riportati alcuni dei problemi di variazione del layout più comuni associati alle notifiche relative ai cookie:

• Avvisi sui cookie nella parte superiore dello schermo: le notifiche sui cookie nella parte superiore dello schermo sono una causa molto comune di variazione del layout. Se viene inserita una notifica sui cookie nel DOM dopo che la pagina circostante è già stata visualizzata, gli elementi della pagina sottostanti verranno spostati più in basso nella pagina. Questo tipo di variazione del layout può essere eliminato riservando spazio nel DOM per l'informativa per il consenso. Se questa soluzione non è fattibile, ad esempio se le dimensioni della notifica sui cookie variano in base all'area geografica, valuta la possibilità di utilizzare un piè di pagina fisso o una finestra modale per visualizzare la notifica sui cookie. Poiché entrambi questi approcci alternativi mostrano la notifica sui cookie come "overlay" nella parte superiore della pagina, la notifica sui cookie non dovrebbe causare variazioni dei contenuti durante il caricamento.
• Animazioni: molte notifiche sui cookie utilizzano animazioni, ad esempio lo "scorrimento" in un avviso è un modello di progettazione comune. A seconda di come vengono implementati questi effetti, possono causare variazioni del layout. Per maggiori informazioni, consulta Debug delle variazioni del layout.
• Caratteri: il caricamento tardivo dei caratteri può bloccare il rendering e/o causare variazioni del layout. Questo fenomeno è più evidente in caso di connessioni lente.

Ottimizzazioni del caricamento avanzate

L'implementazione di queste tecniche è più impegnativa, ma può ottimizzare ulteriormente il caricamento degli script di notifica dei cookie:

• La memorizzazione nella cache e la pubblicazione di script di avviso sui cookie di terze parti provenienti dai tuoi server possono migliorare la velocità di distribuzione di queste risorse.
• L'uso dei service worker può consentirti un maggiore controllo su il recupero e la memorizzazione nella cache di script di terze parti come gli script di notifica dei cookie.

Misurazione del rendimento

Le notifiche relative ai cookie possono influire sulle misurazioni delle prestazioni. Questa sezione illustra alcune di queste implicazioni e tecniche per ridurle.

Monitoraggio degli utenti reali (RUM)

Alcuni strumenti di analisi e RUM utilizzano i cookie per raccogliere dati sulle prestazioni. Nel caso in cui un utente rifiuta l'utilizzo dei cookie, questi strumenti non possono acquisire i dati sulle prestazioni.

I siti dovrebbero essere a conoscenza di questo fenomeno; è anche utile conoscere i meccanismi utilizzati dagli strumenti RUM per raccogliere i dati. Tuttavia, per il sito tipico, questa discrepanza probabilmente non è motivo di allerta, date la direzione e l'entità del disallineamento dei dati. L'uso dei cookie non è un requisito tecnico per la misurazione delle prestazioni. La libreria JavaScript web-vitals è un esempio di libreria che non utilizza cookie.

A seconda del modo in cui il tuo sito utilizza i cookie per raccogliere i dati sul rendimento (ovvero se i cookie contengono informazioni personali), e in base alla legislazione in questione, l'uso dei cookie per la misurazione del rendimento potrebbe non essere soggetto agli stessi requisiti normativi di alcuni dei cookie usati sul tuo sito per altri scopi, ad esempio i cookie per la pubblicità. Alcuni siti scelgono di suddividere i cookie per il rendimento come categoria separata di cookie quando chiedono il consenso dell'utente.

Monitoraggio sintetico

Senza la configurazione personalizzata, la maggior parte degli strumenti sintetici (come Lighthouse e WebPageTest) misureranno solo l'esperienza di un nuovo utente che non ha risposto a un'informativa per il consenso all'uso dei cookie. Tuttavia, non solo devono essere prese in considerazione le variazioni dello stato della cache (ad esempio, una visita iniziale rispetto a una visita ripetuta) quando si raccolgono i dati sulle prestazioni, ma anche le variazioni dello stato di accettazione dei cookie (accettate, rifiutate o senza risposta).

Testare le notifiche relative ai cookie con WebPageTest

Le sezioni seguenti trattano le impostazioni di WebPageTest e Lighthouse che possono essere utili per incorporare gli avvisi sui cookie nei flussi di lavoro di misurazione delle prestazioni. Tuttavia, i cookie e le relative notifiche sono solo uno dei tanti fattori che possono essere difficili da simulare perfettamente in ambienti di lab. Per questo motivo, è importante considerare i dati RUM come pietra miliare del benchmarking delle prestazioni, anziché utilizzare strumenti sintetici.

Utilizzare lo scripting

Puoi utilizzare lo scripting per fare in modo che WebPageTest "clic" sul banner del consenso all'uso dei cookie durante la raccolta di una traccia.

Per aggiungere uno script, vai alla scheda Script. Lo script seguente consente di accedere all'URL da testare, quindi fa clic sull'elemento DOM con id=cookieButton.

Attenzione : gli script WebPageTest sono delimitato da tabulazioni.

combineSteps
navigate    %URL%
clickAndWait    id=cookieButton

Quando utilizzi questo script, tieni presente che:

• combineSteps indica a WebPageTest di "combinare" i risultati dei passaggi di script che seguono in un unico set di tracce e misurazioni. Anche eseguire questo script senza combineSteps può essere utile: grazie a tracce separate è più semplice verificare se le risorse sono state caricate prima o dopo l'accettazione dei cookie.
• %URL% è una convenzione di WebPageTest che fa riferimento all'URL in fase di test.
• clickAndWait indica a WebPageTest di fare clic sull'elemento indicato da attribute=value e di attendere il completamento della successiva attività del browser. Segue il formato clickAndWait attribute=Value.

Se hai configurato correttamente questo script, lo screenshot acquisito da WebPageTest non dovrebbe mostrare un avviso sui cookie (l'avviso sui cookie è stata accettata).

Per ulteriori informazioni sullo scripting di WebPageTest, consulta la documentazione di WebPageTest.

Imposta cookie

Per eseguire WebPageTest con un set di cookie, vai alla scheda Avanzate e aggiungi l'intestazione dei cookie nel campo Intestazioni personalizzate:

Cambiare la località del test

Per modificare la località di test utilizzata da WebPageTest, fai clic sul menu a discesa Località di test nella scheda Test avanzati.

Testare le notifiche dei cookie con Lighthouse

L'impostazione dei cookie in un'esecuzione di Lighthouse può fungere da meccanismo per portare una pagina in un determinato stato per il test da parte di Lighthouse. Il comportamento dei cookie di Lighthouse varia leggermente in base al contesto (DevTools, CLI o PageSpeed Insights).

DevTools

I cookie non vengono cancellati quando Lighthouse viene eseguito da DevTools. Tuttavia, altri tipi di spazio di archiviazione vengono cancellati per impostazione predefinita. Questo comportamento può essere modificato utilizzando l'opzione Cancella dati archiviati nel riquadro delle impostazioni di Lighthouse.

CLI

L'esecuzione di Lighthouse dall'interfaccia a riga di comando utilizza una nuova istanza di Chrome, quindi non viene impostato nessun cookie per impostazione predefinita. Per eseguire Lighthouse dall'interfaccia a riga di comando con un determinato insieme di cookie, utilizza questo comando:

lighthouse <url> --extra-headers "{\"Cookie\":\"cookie1=abc; cookie2=def; \_id=foo\"}"

Per maggiori informazioni sull'impostazione di intestazioni delle richieste personalizzate nell'interfaccia a riga di comando di Lighthouse, consulta Esecuzione di Lighthouse su pagine autenticate.

PageSpeed Insights

L'esecuzione di Lighthouse da PageSpeed Insights utilizza una nuova istanza di Chrome e non imposta alcun cookie. PageSeed Insights non può essere configurato per impostare cookie specifici.

Esperienza utente

L'esperienza utente (UX) di diverse notifiche per il consenso all'uso dei cookie è principalmente il risultato di due decisioni: la posizione dell'informativa sui cookie all'interno della pagina e la misura in cui l'utente può personalizzare l'utilizzo dei cookie da parte di un sito. Questa sezione illustra i potenziali approcci a queste due decisioni.

Attenzione : l'esperienza utente relativa agli avvisi relativi ai cookie è spesso fortemente influenzata dalla legislazione, che può variare notevolmente in base all'area geografica. Pertanto, alcuni dei pattern di progettazione discussi in questa sezione potrebbero non essere pertinenti alla tua situazione specifica. Questo documento non deve essere considerato un sostituto di una consulenza legale.

Quando prendi in considerazione potenziali design per la tua notifica sui cookie, ecco alcuni aspetti da considerare:

• UX: è una buona esperienza utente? In che modo questo particolare design influirà sugli elementi della pagina e sui flussi utente esistenti?
• Attività: qual è la strategia per i cookie del tuo sito? Quali sono gli obiettivi della notifica sui cookie?
• Legale: rispetta i requisiti legali?
• Ingegneria: quanto lavoro sarebbe necessario implementare e mantenere? Quanto sarebbe difficile cambiare?

Posizionamento

Le notifiche relative ai cookie possono essere visualizzate come intestazione, elemento incorporato o piè di pagina. Possono anche essere visualizzate nella parte superiore dei contenuti della pagina tramite un modale o pubblicati come interstitial.

Notifiche di intestazione, piè di pagina e cookie incorporati

Le notifiche relative ai cookie vengono generalmente inserite nell'intestazione o nel piè di pagina. Di queste due opzioni, il posizionamento del piè di pagina è generalmente preferibile perché non è invasivo, non compete per l'attenzione con annunci banner o notifiche e, in genere, non causa CLS. Inoltre, è una sezione comune per posizionare norme sulla privacy e Termini e condizioni d'uso.

Sebbene gli avvisi sui cookie incorporati siano un'opzione, può essere difficile da integrare nelle interfacce utente esistenti e, di conseguenza, sono rari.

Modali

I modali sono informative per il consenso all'uso dei cookie che vengono visualizzate nella parte superiore dei contenuti della pagina. I modali possono avere un aspetto e un rendimento molto diversi a seconda delle loro dimensioni.

I modelli modali più piccoli a schermo parziale possono essere una buona alternativa per i siti che hanno difficoltà a implementare le notifiche dei cookie in un modo che non causi variazioni del layout.

D'altra parte, è necessario utilizzare con attenzione i modali di grandi dimensioni che oscurano la maggior parte dei contenuti della pagina. In particolare, per i siti più piccoli gli utenti potrebbero rimbalzare invece di accettare l'avviso sui cookie di un sito sconosciuto con contenuti oscurati. Anche se non sono concetti necessariamente simili, se stai prendendo in considerazione l'utilizzo di una finestra modale di consenso all'uso dei cookie a schermo intero, dovresti essere a conoscenza della legislazione in merito ai cookie wall.

Nota: le finestre modali di grandi dimensioni possono essere considerate un tipo di interstitial. La Ricerca Google non penalizza l'utilizzo degli interstitial quando vengono utilizzati per rispettare normative legali, come nel caso dei banner dei cookie. Tuttavia, il loro utilizzo di interstitial in altri contesti, in particolare se sono invasivi o creano un'esperienza utente scadente, potrebbe essere penalizzato.

Configurabilità

Le interfacce di notifica dei cookie offrono agli utenti diversi livelli di controllo su quali cookie accettano.

Nessuna configurabilità

Questi banner dei cookie in stile notifica non offrono agli utenti controlli UX diretti per la disattivazione dei cookie. In genere includono invece un link alle norme sui cookie del sito che possono fornire agli utenti informazioni sulla gestione dei cookie utilizzando il browser web. Queste notifiche in genere includono i pulsanti "Ignora" e "Accetta".

Alcune configurabilità

Queste notifiche sui cookie offrono all'utente la possibilità di rifiutare i cookie, ma non supportano controlli più granulari. Questo approccio alle notifiche sui cookie è meno comune.

Configurabilità completa

Queste notifiche sui cookie forniscono agli utenti controlli più granulari per configurare l'utilizzo dei cookie accettati.

• Esperienza utente: i controlli per la configurazione dell'utilizzo dei cookie vengono solitamente visualizzati utilizzando una finestra modale separata che viene avviata quando l'utente risponde alla notifica iniziale per il consenso all'uso dei cookie. Tuttavia, se lo spazio lo consente, alcuni siti mostrano questi controlli in linea nell'informativa per il consenso all'uso dei cookie iniziale.

• Granularità: l'approccio più comune alla configurabilità dei cookie è consentire agli utenti di attivare i cookie per "categoria". Esempi di categorie di cookie comuni includono cookie funzionali, di targeting e di social media.

  Tuttavia, alcuni siti fanno un passo in più e consentono agli utenti di eseguire l'attivazione in base al cookie. In alternativa, un altro modo per fornire agli utenti controlli più specifici è suddividere le categorie di cookie come "pubblicità" in casi d'uso specifici, ad esempio consentendo agli utenti di attivare separatamente "annunci di base" e "annunci personalizzati".