Bonnes pratiques concernant les notifications relatives aux cookies

Optimisez l'utilisation des cookies pour améliorer les performances et la facilité d'utilisation.

Ce document explique l'impact des notifications de cookies sur les performances, la mesure des performances et l'expérience utilisateur.

Performances

Les notifications relatives aux cookies peuvent avoir un impact significatif sur les performances des pages, car elles sont généralement chargées au début du processus de chargement de la page, sont présentées à tous les utilisateurs et peuvent potentiellement influencer le chargement des annonces et d'autres contenus de la page.

Voici l'impact des notifications de cookies sur les métriques des métriques Web Vitals:

• Largest Contentful Paint (LCP):la plupart des notifications de consentement pour les cookies sont assez petites et ne contiennent donc généralement pas l'élément LCP d'une page. Toutefois, cela peut se produire, en particulier sur les appareils mobiles. Sur les appareils mobiles, les notifications de cookies occupent généralement une plus grande partie de l'écran. Cela se produit généralement lorsqu'une notification de cookie contient un grand bloc de texte (les blocs de texte peuvent également être des éléments LCP).

• Interaction to Next Paint (INP):les notifications de cookies peuvent souvent être à l'origine d'un INP élevé, car elles ajoutent généralement de nombreux scripts tiers lorsqu'elles sont acceptées. Le principal problème consiste souvent à effectuer l'interaction Accept (Accepter), car l'ajout simultané de tous les scripts tiers entraîne un grand nombre de traitements. Consultez la section Bonnes pratiques ci-dessous pour savoir comment atténuer ce problème.

• Cumulative Layout Shift (CLS):les notifications de consentement aux cookies sont une source très courante de décalages de mise en page.

En règle générale, vous pouvez vous attendre à ce qu'une notification de cookie de la part de fournisseurs tiers ait un impact plus important sur les performances qu'une notification de cookie que vous créez vous-même. Ce problème n'est pas propre aux notifications relatives aux cookies, mais plutôt à la nature des scripts tiers en général.

Bonnes pratiques

Les bonnes pratiques présentées dans cette section sont axées sur les notifications relatives aux cookies tiers. Certaines de ces bonnes pratiques s'appliqueront également aux notifications concernant les cookies propriétaires.

Comprendre l'impact INP des notifications relatives aux cookies

Comme indiqué précédemment, le bouton Accept (Accepter) est souvent à l'origine de problèmes INP, en raison du temps de traitement nécessaire lorsqu'un utilisateur clique dessus.

L'équipe Chrome a collaboré avec un certain nombre de plates-formes de gestion du consentement (CMP, Consent Management Platform) pour lever le libellé après avoir cliqué sur "Accepter" afin de permettre au navigateur d'accepter rapidement cette acceptation dans le prochain tableau de bord. Consultez cette étude de cas PubTech à titre d'exemple.

Si votre CMP est concernée, essayez de la contacter pour savoir si elle peut éviter les problèmes INP pour les sites qui l'intègrent. Consultez l'article sur l'optimisation des longues tâches pour obtenir des conseils sur les stratégies de rendement.

Charger les scripts d'avis de cookies de manière asynchrone

Les scripts d'avis concernant les cookies doivent être chargés de manière asynchrone. Pour ce faire, ajoutez l'attribut async à la balise de script.

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

Les scripts qui ne sont pas asynchrones bloquent l'analyseur du navigateur. Cela retarde le chargement de la page et le LCP. Pour en savoir plus, consultez Charger efficacement un code JavaScript tiers.

Charger directement les scripts d'avis relatifs aux cookies

Les scripts de notification des cookies doivent être chargés "directement" en plaçant le tag de script dans le code HTML du document principal (plutôt que de les charger par un gestionnaire de balises ou un autre script). L'utilisation d'un gestionnaire de balises ou d'un script secondaire pour injecter le script de notification de cookie retarde le chargement de ce script: il masque le script de l'analyseur en avant-première du navigateur et empêche le chargement du script avant l'exécution du JavaScript.

Établir une connexion anticipée avec l'origine des notifications de cookies

Tous les sites qui chargent leurs scripts d'avis de cookies à partir d'un emplacement tiers doivent utiliser les indices de ressource dns-prefetch ou preconnect pour établir une connexion précoce avec l'origine qui héberge les ressources d'avis de cookies. Pour en savoir plus, consultez la section Établissez des connexions réseau tôt pour améliorer la vitesse perçue des pages.

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

Précharger les notifications relatives aux cookies si nécessaire

Certains sites ont tout intérêt à utiliser l'indice de ressource preload pour charger leur script d'avis relatif aux cookies. L'indice de ressource preload indique au navigateur de lancer une requête anticipée pour la ressource spécifiée.

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

preload est particulièrement efficace lorsque son utilisation se limite à extraire quelques ressources clés par page. L'utilité du préchargement du script de notification de cookie varie donc en fonction de la situation.

Tenir compte des compromis en termes de performances lorsque vous définissez le style des notifications relatives aux cookies

La personnalisation de l'apparence d'un avis concernant les cookies tiers peut entraîner des coûts de performances supplémentaires. Par exemple, les avis de cookies tiers ne peuvent pas toujours réutiliser les mêmes ressources (comme les polices Web) que celles utilisées ailleurs sur la page. De plus, les notifications relatives aux cookies tiers ont tendance à se charger à la fin des longues chaînes de requêtes. Pour éviter toute mauvaise surprise, vérifiez comment votre notification de cookie se charge et applique les styles et les ressources associées.

Éviter les décalages de mise en page

Voici certains des problèmes de décalage de mise en page les plus courants associés aux notifications de cookies:

• Avis de cookies en haut de l'écran:les notifications de cookies en haut de l'écran sont une cause très courante de décalage de mise en page. Si une notification de cookie est insérée dans le DOM alors que la page environnante est déjà affichée, les éléments de la page situés en dessous sont poussés plus bas sur la page. Ce type de décalage de mise en page peut être éliminé en réservant de l'espace dans le DOM pour la notification de consentement. Si cette solution n'est pas réalisable (par exemple, si les dimensions de votre avis de cookie varient selon la zone géographique), envisagez d'utiliser un pied de page autocollant ou une fenêtre modale pour l'afficher. Étant donné que ces deux approches alternatives affichent l'avis de cookie en"superposition" sur le reste de la page, celui-ci ne devrait pas entraîner de décalage du contenu lors du chargement.
• Animations: de nombreuses notifications de cookies utilisent des animations. Par exemple, "glisser vers" une notification de cookie est un modèle de conception courant. Selon la façon dont ces effets sont implémentés, ils peuvent entraîner des décalages de mise en page. Pour en savoir plus, consultez Déboguer les décalages de mise en page.
• Polices: les polices qui se chargent tard peuvent bloquer l'affichage et/ou provoquer des décalages de mise en page. Ce phénomène est plus fréquent sur les connexions lentes.

Optimisations de chargement avancées

Ces techniques demandent plus de travail à mettre en œuvre, mais peuvent permettre d'optimiser le chargement des scripts de notification des cookies:

• La mise en cache et la diffusion de scripts d'avis de cookies tiers à partir de vos propres serveurs peuvent améliorer la vitesse de distribution de ces ressources.
• L'utilisation de service workers peut vous permettre de mieux contrôler l'extraction et la mise en cache des scripts tiers, tels que les scripts d'avis de cookies.

Mesure des performances

Les notifications de cookies peuvent avoir un impact sur la mesure des performances. Cette section décrit certaines de ces implications et les techniques permettant de les atténuer.

Surveillance des utilisateurs réels (RUM, Real User Monitoring)

Certains outils d'analyse et RUM utilisent des cookies pour collecter des données sur les performances. Si un utilisateur refuse les cookies, ces outils ne pourront pas collecter de données sur les performances.

Les sites doivent être conscients de ce phénomène. Il est également intéressant de comprendre les mécanismes utilisés par vos outils RUM pour collecter ses données. Toutefois, pour le site classique, cet écart n'est probablement pas une cause d'alerte, compte tenu de la direction et de l'ampleur du décalage de données. L'utilisation de cookies n'est pas une exigence technique pour mesurer les performances. La bibliothèque JavaScript web-vitals est un exemple de bibliothèque qui n'utilise pas de cookies.

Selon la manière dont votre site utilise les cookies pour collecter les données de performances (c'est-à-dire si les cookies contiennent des informations personnelles) et la législation en question, l'utilisation des cookies pour la mesure des performances peut ne pas être soumise aux mêmes exigences législatives que certains cookies utilisés sur votre site à d'autres fins, par exemple les cookies publicitaires. Certains sites choisissent de séparer les cookies de performances dans une catégorie de cookies distincte lorsqu'ils demandent le consentement des utilisateurs.

Surveillance synthétique

Sans configuration personnalisée, la plupart des outils synthétiques (tels que Lighthouse et WebPageTest) ne mesurent que l'expérience d'un nouvel utilisateur qui n'a pas répondu à une notification de consentement aux cookies. Toutefois, lorsque vous collectez des données sur les performances, vous devez tenir compte non seulement des variations de l'état de cache (par exemple, une visite initiale par rapport à une visite répétée), mais aussi des variations de l'état d'acceptation des cookies (accepté, refusé ou sans réponse).

Tester les notifications relatives aux cookies avec WebPageTest

Les sections suivantes traitent des paramètres WebPageTest et Lighthouse qui peuvent être utiles pour intégrer les notifications de cookies dans les workflows de mesure des performances. Cependant, les cookies et les avis de cookies ne sont que l'un des nombreux facteurs qui peuvent être difficiles à simuler parfaitement dans des environnements de laboratoire. Pour cette raison, il est important de faire des données de la classe RUM la pierre angulaire de votre analyse comparative des performances, plutôt que des outils synthétiques.

Utiliser l'écriture de script

Vous pouvez utiliser des scripts pour demander à un WebPageTest de "cliquer" sur la bannière de consentement aux cookies lors de la collecte d'une trace.

Ajoutez un script en accédant à l'onglet Script. Le script suivant accède à l'URL à tester, puis clique sur l'élément DOM avec id=cookieButton.

combineSteps
navigate    %URL%
clickAndWait    id=cookieButton

Lorsque vous utilisez ce script, gardez à l'esprit les points suivants:

• combineSteps indique à WebPageTest de "combiner" les résultats des étapes de script qui suivent dans un seul ensemble de traces et de mesures. L'exécution de ce script sans combineSteps peut également être utile. Des traces distinctes permettent de voir plus facilement si des ressources ont été chargées avant ou après l'acceptation des cookies.
• %URL% est une convention WebPageTest qui fait référence à l'URL en cours de test.
• clickAndWait indique à WebPageTest de cliquer sur l'élément indiqué par attribute=value et d'attendre la fin de l'activité ultérieure du navigateur. Il respecte le format clickAndWait attribute=Value.

Si vous avez correctement configuré ce script, la capture d'écran effectuée par WebPageTest ne devrait pas afficher de notification de cookie (celle-ci a été acceptée).

Pour en savoir plus sur les scripts WebPageTest, consultez la documentation WebPageTest.

Enregistrer des cookies

Pour exécuter WebPageTest avec un ensemble de cookies, accédez à l'onglet Avancé et ajoutez l'en-tête de cookie dans le champ En-têtes personnalisés:

Modifier l'emplacement du test

Pour modifier l'emplacement de test utilisé par WebPageTest, cliquez sur le menu déroulant Test Location (Emplacement de test) situé dans l'onglet Advanced Testing (Tests avancés).

Tester les notifications de cookies avec Lighthouse

La définition de cookies lors d'une exécution Lighthouse peut servir de mécanisme pour faire passer une page à un état particulier pour qu'elle soit testée par Lighthouse. Le comportement des cookies de Lighthouse varie légèrement en fonction du contexte (Outils de développement, CLI ou PageSpeed Insights).

DevTools

Les cookies ne sont pas effacés lorsque Lighthouse est exécuté à partir des outils de développement. Toutefois, les autres types de stockage sont effacés par défaut. Ce comportement peut être modifié à l'aide de l'option Clear Storage (Vider l'espace de stockage) dans le panneau de paramètres Lighthouse.

CLI

L'exécution de Lighthouse à partir de la CLI utilise une nouvelle instance Chrome. Par conséquent, aucun cookie n'est défini par défaut. Pour exécuter Lighthouse à partir de la CLI avec un ensemble de cookies spécifique, utilisez la commande suivante:

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

Pour en savoir plus sur la définition d'en-têtes de requêtes personnalisés dans la CLI Lighthouse, consultez Exécuter Lighthouse sur des pages authentifiées.

PageSpeed Insights

L'exécution de Lighthouse à partir de PageSpeed Insights utilise une nouvelle instance Chrome et ne définit aucun cookie. Impossible de configurer PageSeed Insights pour définir des cookies spécifiques.

Expérience utilisateur

L'expérience utilisateur des différentes notifications de consentement aux cookies découle principalement de deux décisions: l'emplacement de la notification de cookie sur la page et la mesure dans laquelle l'utilisateur peut personnaliser l'utilisation des cookies sur un site. Cette section présente des approches potentielles pour ces deux décisions.

Voici quelques points à prendre en compte lorsque vous envisagez de concevoir votre notification de cookie:

• UX: est-ce une bonne expérience utilisateur ? Comment cette conception particulière affectera-t-elle les éléments de page existants et les flux utilisateur ?
• Entreprise: quelle est la stratégie de votre site concernant les cookies ? Quels sont vos objectifs concernant la notification des cookies ?
• Juridique: est-ce conforme aux obligations légales ?
• Ingénierie: quelle charge de travail cela représenterait-il ? Dans quelle mesure serait-il difficile de le modifier ?

Emplacement

Les avis de cookies peuvent être affichés sous la forme d'un en-tête, d'un élément intégré ou d'un pied de page. Elles peuvent également être affichées en haut du contenu de la page à l'aide d'une fenêtre modale ou diffusées en tant qu'interstitiel.

Avis concernant les en-têtes, les pieds de page et les cookies intégrés

Les avis de cookies sont généralement placés dans l'en-tête ou le pied de page. Parmi ces deux options, l'emplacement du pied de page est généralement préférable, car il est discret, n'entre pas en concurrence pour attirer l'attention des bannières ou des notifications, et ne provoque généralement pas le CLS. De plus, il est courant d'y placer des règles de confidentialité et des conditions d'utilisation.

Bien que les avis de cookies intégrés soient une option, ils peuvent être difficiles à intégrer dans les interfaces utilisateur existantes et sont donc rares.

Modales

Les modales sont des avis de consentement aux cookies qui s'affichent en haut du contenu de la page. Les modales peuvent se présenter et fonctionner de manière très différente selon leur taille.

Les fenêtres modales d'écran partiel plus petites peuvent constituer une bonne alternative pour les sites qui ont du mal à implémenter les notifications de cookies d'une manière qui ne provoque pas de décalages de mise en page.

En revanche, les grandes modales qui masquent la majorité du contenu de la page doivent être utilisées avec précaution. En particulier, les petits sites peuvent constater que les utilisateurs rebondissent au lieu d'accepter la notification relative aux cookies d'un site inconnu dont le contenu est masqué. Bien qu'il ne s'agisse pas de concepts synonymes, si vous envisagez d'utiliser une fenêtre modale de consentement plein écran pour les cookies, vous devez connaître la législation concernant les murs de cookies.

Configurabilité

Les interfaces des notifications relatives aux cookies offrent aux utilisateurs différents niveaux de contrôle sur les cookies qu'ils acceptent.

Aucune configurabilité

Ces bannières de type "Notification" pour les cookies ne fournissent pas aux utilisateurs de commandes directes permettant de désactiver les cookies. À la place, ils incluent généralement un lien vers les règles relatives aux cookies du site, qui peut fournir aux utilisateurs des informations sur la gestion des cookies via leur navigateur Web. Ces notifications incluent généralement des boutons "Ignorer" et "Accepter".

Peu de configurabilité

Ces avis de cookies permettent à l'utilisateur de refuser les cookies, mais ne permettent pas d'effectuer des contrôles plus précis. Cette approche concernant les notifications relatives aux cookies est moins courante.

Configurabilité totale

Les notifications relatives aux cookies permettent aux utilisateurs de contrôler plus précisément la configuration de l'utilisation des cookies qu'ils acceptent.

• Expérience utilisateur:les contrôles de configuration de l'utilisation des cookies sont le plus souvent affichés dans une fenêtre modale distincte qui se lance lorsque l'utilisateur répond à la notification initiale de consentement aux cookies. Toutefois, si l'espace le permet, certains sites afficheront ces commandes de manière intégrée dans la notification initiale de consentement aux cookies.

• Précision:l'approche la plus courante pour configurer les cookies consiste à autoriser les utilisateurs à activer les cookies en fonction de leur "catégorie". Les cookies fonctionnels, de ciblage et de réseaux sociaux sont des exemples de catégories courantes de cookies.

  Cependant, certains sites vont plus loin et permettent aux utilisateurs d'activer les cookies au cas par cas. Une autre façon de fournir aux utilisateurs des contrôles plus spécifiques consiste à décomposer les catégories de cookies comme "Publicité" en cas d'utilisation spécifiques (par exemple, en leur permettant d'activer séparément les "annonces de base" et les "annonces personnalisées").