Best practice per le notifiche sui cookie

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

Questo articolo illustra in che modo le notifiche relative ai cookie possono influire su prestazioni, misurazione delle prestazioni e esperienza utente.

Esibizione

Le notifiche relative ai cookie possono avere un impatto significativo sulle prestazioni della pagina poiché in genere vengono caricate nelle prime fasi del processo di caricamento della pagina, vengono mostrate a tutti gli utenti e possono potenzialmente influire sul caricamento degli annunci e di altri contenuti delle pagine.

Ecco in che modo le notifiche relative ai cookie possono influire sulle metriche di Web Vitals:

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

• First Input Delay (FID): in generale, la soluzione per il consenso all'uso dei cookie di per sé dovrebbe avere un impatto minimo sul FID; il consenso all'uso dei cookie richiede poca esecuzione di JavaScript. Tuttavia, le tecnologie attivate da questi cookie, ovvero gli script pubblicitari e di monitoraggio, possono avere un impatto significativo sull'interattività delle pagine. Posticipare questi script fino all'accettazione dei cookie può servire come tecnica per ridurre First Input Delay (FID).

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

In generale, ci si può aspettare che una notifica relativa ai cookie da parte di fornitori di terze parti abbia un impatto maggiore sul rendimento rispetto a una notifica relativa ai cookie creata personalmente. Non si tratta di un problema specifico delle notifiche relative ai 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, ma non tutte, di queste best practice sono applicabili anche alle notifiche sui cookie proprietari.

Carica gli script delle notifiche sui cookie in modo asincrono

Gli script per le notifiche sui 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 non asincroni bloccano l'analizzatore sintattico del browser. Questo ritarda il caricamento della pagina e l'LCP. Per ulteriori informazioni, consulta la sezione Caricare in modo efficiente JavaScript di terze parti.

Carica direttamente gli script delle notifiche relative ai cookie

Gli script per le notifiche relative ai cookie devono essere caricati "direttamente" inserendo il tag script nel codice HTML del documento principale, anziché caricati da un gestore di tag o da un altro script. L'utilizzo di un gestore di tag o di uno script secondario per inserire lo script di notifica dei cookie ritarda il caricamento dello script di notifica dei cookie: lo script viene nascosto dall'analizzatore sintattico 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 i propri script di notifica sui cookie da una posizione di terze parti devono utilizzare gli hint delle risorse dns-prefetch o preconnect per stabilire una connessione anticipata con l'origine che ospita le risorse di notifica sui cookie. Per ulteriori informazioni, consulta Stabilire in anticipo le connessioni di rete per migliorare la velocità percepita delle pagine.

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

Precarica le notifiche sui cookie come opportuno

Alcuni siti potrebbero trarre vantaggio dall'utilizzo del suggerimento per le risorse preload per caricare lo script delle notifiche sui cookie. Il suggerimento per la risorsa preload indica al browser di avviare una richiesta anticipata 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 sui cookie varia a seconda della situazione.

Fai attenzione ai compromessi in termini di rendimento quando applichi uno stile alle notifiche relative ai cookie

La personalizzazione dell'aspetto di una notifica sui cookie di terze parti può comportare costi aggiuntivi in termini di 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 usate 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 come viene caricata la tua notifica relativa ai cookie e viene applicato lo stile e le risorse correlate.

Evita variazioni del layout

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

• Notifiche sui cookie nella parte superiore dello schermo: le notifiche relative ai cookie nella parte superiore dello schermo sono una fonte molto comune di variazioni del layout. Se nel DOM viene inserita una notifica relativa ai cookie dopo che la pagina circostante è stata già visualizzata, gli elementi di pagina sottostanti verranno spinti 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 non è una soluzione attuabile, 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 modale per visualizzare la notifica sui cookie. Poiché entrambi questi approcci alternativi visualizzano l'informativa sui cookie come un "overlay" nella parte superiore del resto della pagina, la notifica sui cookie non deve causare variazioni dei contenuti durante il caricamento.
• Animazioni: molte notifiche relative ai cookie utilizzano animazioni. Ad esempio, l'inserimento di una notifica sui cookie è un pattern comune. A seconda di come vengono implementati, questi effetti possono causare variazioni del layout. Per ulteriori informazioni, consulta la pagina Debug delle variazioni del layout.
• Caratteri: i caratteri caricati in ritardo possono bloccare il rendering e/o causare variazioni del layout. Questo fenomeno è più evidente nelle connessioni lente.

Ottimizzazioni avanzate del caricamento

Queste tecniche richiedono più lavoro da implementare, ma possono ottimizzare ulteriormente il caricamento degli script di notifica dei cookie:

• La memorizzazione nella cache e la pubblicazione di script di notifica dei cookie di terze parti dai tuoi server può migliorare la velocità di distribuzione di queste risorse.
• L'utilizzo dei service worker può offrirti un maggiore controllo sul recupero e sulla 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. In questa sezione vengono illustrate alcune di queste implicazioni e tecniche per attenuarle.

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 di utilizzare i cookie, questi strumenti non sono in grado di acquisire dati sulle prestazioni.

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

A seconda di come il tuo sito utilizza i cookie per raccogliere dati sul rendimento (ovvero se i cookie contengono informazioni personali), nonché della legislazione in questione, l'uso dei cookie per la misurazione delle prestazioni potrebbe non essere soggetto agli stessi requisiti legislativi di alcuni dei cookie utilizzati sul tuo sito per altri scopi, ad esempio i cookie per la pubblicità. Alcuni siti scelgono di suddividere i cookie relativi alle prestazioni come categoria separata di cookie quando viene richiesto il consenso dell'utente.

Monitoraggio sintetico

Senza una configurazione personalizzata, la maggior parte degli strumenti sintetici (come Lighthouse e WebPageTest) misurerà solo l'esperienza di un nuovo utente che non ha risposto a un'informativa di consenso all'uso dei cookie. Tuttavia, non solo devono essere prese in considerazione solo variazioni dello stato della cache (ad esempio, una visita iniziale rispetto a una visita ripetuta) per la raccolta dei dati sul rendimento, ma anche variazioni dello stato di accettazione dei cookie (accettati, rifiutati o senza risposta).

Le seguenti sezioni descrivono le impostazioni di WebPageTest e Lighthouse che possono essere utili per incorporare le notifiche relative ai cookie nei flussi di lavoro di misurazione delle prestazioni. Tuttavia, le notifiche relative ai cookie sono solo uno dei tanti fattori che possono essere difficili da simulare perfettamente negli ambienti di laboratorio. Per questo motivo, è importante rendere i dati RUM la pietra miliare del benchmarking delle prestazioni, anziché degli strumenti sintetici.

Testare le notifiche relative ai cookie con WebPageTest

Definisci i tuoi contenuti

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

Aggiungi uno script nella scheda Script. Lo script riportato di seguito accede all'URL da testare e poi fa clic sull'elemento DOM con ID cookieButton.

combineSteps
navigate    %URL%
clickAndWait    id=cookieButton

Quando utilizzi questo script, tieni presente che:

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

Se lo script è stato configurato correttamente, lo screenshot acquisito da WebPageTest non dovrebbe mostrare un avviso relativo ai cookie (la notifica è stata accettata).

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

Imposta i cookie

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

Modificare la località del test

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

Test delle notifiche relative ai cookie con Lighthouse

L'impostazione dei cookie su un'esecuzione di Lighthouse può fungere da meccanismo per impostare una pagina in uno stato specifico per i test effettuati con Lighthouse. Il comportamento dei cookie di Lighthouse varia leggermente in base al contesto (DevTools, interfaccia a riga di comando o PageSpeed Insights).

DevTools

I cookie non vengono cancellati quando Lighthouse viene eseguito da DevTools. Tuttavia, altri tipi 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 un'istanza di Chrome aggiornata, quindi per impostazione predefinita non vengono impostati cookie. Per eseguire Lighthouse dall'interfaccia a riga di comando con un determinato insieme di cookie, utilizza il seguente 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 sulle pagine autenticate.

PageSpeed Insights

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

Esperienza utente

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

Quando prendi in considerazione potenziali design per la tua notifica relativa ai cookie, tieni presente quanto segue:

• UX: L'esperienza utente è positiva? In che modo questo particolare design influirà sugli elementi della pagina e sui flussi utente esistenti?
• Attività: qual è la strategia relativa ai cookie del tuo sito? Quali sono gli obiettivi della informativa sui cookie?
• Legale: è conforme ai requisiti legali?
• Ingegneria: quanto impegno ci vorrà per implementare e mantenere? Quanto sarebbe difficile cambiare?

Posizionamento

Le notifiche relative ai cookie possono essere visualizzate come intestazione, elemento in linea o piè di pagina. Possono essere visualizzate anche nella parte superiore dei contenuti della pagina utilizzando una finestra modale o pubblicate come interstitial.

Avvisi su intestazione, piè di pagina e cookie incorporati

Le notifiche relative ai cookie sono in genere posizionate nell'intestazione o nel piè di pagina. Di queste due opzioni, in genere è preferibile il posizionamento del piè di pagina in quanto non invadente, non compete per l'attenzione con gli annunci banner o le notifiche e in genere non causa una metrica CLS. Inoltre, è pratica comune inserire norme sulla privacy e Termini e condizioni d'uso.

Sebbene le notifiche relative ai cookie incorporati siano un'opzione, può essere difficile da integrare nelle interfacce utente esistenti e, di conseguenza, non sono comuni.

Modali

Le modalità sono avvisi per il consenso all'uso dei cookie che vengono visualizzati nella parte superiore dei contenuti della pagina. L'aspetto e le prestazioni dei modali possono essere diversi a seconda delle dimensioni.

Le finestre modali a schermo parziale più piccole possono essere una buona alternativa per i siti che faticano a implementare le notifiche dei cookie in modo da non causare variazioni del layout.

D'altra parte, le finestre modali di grandi dimensioni che oscurano la maggior parte dei contenuti della pagina devono essere usate con cautela. In particolare, per i siti più piccoli, gli utenti rimbalzano invece di accettare l'avviso relativo ai cookie di un sito sconosciuto con contenuti oscurati. Sebbene non siano necessariamente sinonimi, se stai considerando l'utilizzo di una modalità modale di consenso all'uso dei cookie a schermo intero, devi conoscere la legislazione in materia di wall di cookie.

Configurabilità

Le interfacce per le informative sui cookie offrono agli utenti diversi livelli di controllo sui cookie che 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 un link alle norme sui cookie del sito che possono fornire agli utenti informazioni su come gestire i cookie utilizzando il proprio browser web. In genere, queste notifiche includono un pulsante "Ignora" e/o "Accetta".

Una certa configurabilità

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

Configurabilità completa

Queste notifiche relative ai cookie offrono agli utenti controlli più granulari per configurare l'utilizzo dei cookie accettato.

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

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

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