Optimisez l'utilisation des cookies pour améliorer les performances et la facilité d'utilisation.
Ce document explique comment les avis sur les cookies peuvent affecter les performances, la mesure des performances et l'expérience utilisateur.
Performances
Les avis sur les cookies peuvent avoir un impact significatif sur les performances des pages, car ils sont généralement chargés tôt dans le processus de chargement de la page, sont présentés à 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 Core Web Vitals:
Largest Contentful Paint (LCP) : la plupart des notifications de consentement aux 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 entraîner un INP élevé, car elles ajoutent généralement de nombreux scripts tiers lorsqu'elles sont acceptées. Le principal problème est souvent de réaliser l'interaction Accepter, car cela nécessite beaucoup de traitement pour ajouter ces scripts tiers en une seule fois. Reportez-vous à la section Bonnes pratiques pour découvrir comment limiter ce problème.
Cumulative Layout Shift (CLS) : les notifications de consentement aux cookies sont une source très courante de changements 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 ne concerne pas uniquement les avis sur les cookies, mais la nature des scripts tiers en général.
Bonnes pratiques
Les bonnes pratiques de cette section concernent les notifications sur les cookies tiers. Certaines de ces bonnes pratiques s'appliqueront également aux notifications de cookies propriétaires, mais pas toutes.
Comprendre l'impact INP des notifications relatives aux cookies
Comme indiqué précédemment, le bouton Accepter est souvent à l'origine de problèmes d'entrée utilisateur en raison de la grande quantité de traitement qui se produit lorsqu'il est cliqué.
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 de confirmer rapidement l'acceptation dans le tableau suivant. Consultez cette étude de cas PubTech à titre d'exemple.
Si votre CMP est concernée, essayez de la contacter pour voir si elle peut éviter les problèmes d'INP pour les sites qui l'intègrent. Consultez l'article Optimiser les tâches longues pour obtenir des conseils sur les tactiques de rendement.
Charger les scripts de notification concernant les cookies de manière asynchrone
Les scripts de notification de cookie doivent être chargés de manière asynchrone. Pour ce faire, ajoutez l'attribut async à la balise de script.
<script src="https://example.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 du code JavaScript tiers.
Charger directement les scripts de notification concernant les 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 d'avis sur les cookies retarde le chargement du script d'avis sur les cookies : il masque le script de l'analyseur d'anticipation du navigateur et empêche le script de se charger avant l'exécution JavaScript.
Établir une connexion précoce avec l'origine de la notification concernant les cookies
Tous les sites qui chargent leurs scripts de notification de cookies à partir d'un emplacement tiers doivent utiliser les indices de ressources dns-prefetch ou preconnect pour établir une connexion précoce avec l'origine qui héberge les ressources de notification de cookies. Pour en savoir plus, consultez Établir des connexions réseau à l'avance pour améliorer la vitesse de chargement perçue.
<link rel="preconnect" href="https://cdn.example.com/">
Précharger les notifications relatives aux cookies si nécessaire
Certains sites peuvent utiliser l'indice de ressource preload pour charger leur script de notification de cookie. L'indice de ressource preload informe le navigateur d'envoyer une requête anticipée pour la ressource spécifiée.
<link rel="preload" href="https://www.example.com/cookie-script.js">
preload est particulièrement efficace lorsque son utilisation se limite à extraire quelques ressources clés par page. Par conséquent, l'utilité du préchargement du script d'avis sur les cookies varie selon la situation.
Tenez compte des compromis sur les performances lorsque vous stylisez les notifications concernant les cookies
La personnalisation de l'apparence d'une notification de cookies tiers peut entraîner des coûts de performances supplémentaires. Par exemple, les avis sur les cookies tiers ne peuvent pas toujours réutiliser les mêmes ressources (par exemple, les polices Web) utilisées ailleurs sur la page. De plus, les notifications de cookies tiers ont tendance à charger le style à la fin de longues chaînes de requêtes. Pour éviter toute surprise, tenez compte de la façon dont votre avis sur les cookies se charge et applique le style et les ressources associées.
Éviter les changements de mise en page
Voici quelques-uns des problèmes de décalage de mise en page les plus courants associés aux notifications de cookies :
- Notifications sur les cookies en haut de l'écran : les notifications sur les cookies en haut de l'écran sont une source 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 ce n'est pas une solution envisageable (par exemple, si les dimensions de votre avis sur les cookies varient selon la zone géographique), envisagez d'utiliser un pied de page persistant ou un modal pour afficher l'avis sur les cookies. Étant donné que ces deux approches affichent la notification de cookies en tant que "superposition" au-dessus du reste de la page, elle ne devrait pas entraîner de décalage du contenu lors de son chargement.
- Animations : de nombreuses notifications relatives aux cookies utilisent des animations. Par exemple, l'affichage d'une notification relative aux cookies "en glissant" 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 la section Déboguer les décalages de mise en page.
- Polices : les polices chargées tardivement peuvent bloquer l'affichage et/ou entraîner des décalages de mise en page. Ce phénomène est plus visible sur les connexions lentes.
Optimisations de chargement avancées
Ces techniques sont plus difficiles à implémenter, mais elles peuvent optimiser davantage le chargement des scripts de notification de cookies :
- La mise en cache et la diffusion de scripts de notification de cookies tiers à partir de vos propres serveurs peuvent améliorer la vitesse de diffusion 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 avis sur les cookies peuvent avoir un impact sur les mesures des performances. Cette section décrit certaines de ces implications et les techniques permettant de les atténuer.
Surveillance des utilisateurs réels (RUM)
Certains outils d'analyse et de RUM utilisent des cookies pour collecter des données sur les performances. Si un utilisateur refuse l'utilisation des cookies, ces outils ne peuvent pas collecter de données sur les performances.
Les sites doivent être conscients de ce phénomène. Il est également utile de comprendre les mécanismes utilisés par vos outils RUM pour collecter leurs données. Toutefois, pour un site typique, cet écart n'est probablement pas alarmant compte tenu de la direction et de l'ampleur du décalage des données. L'utilisation de cookies n'est pas une exigence technique pour la mesure des performances. La bibliothèque JavaScript web-vitals est un exemple de bibliothèque qui n'utilise pas de cookies.
Selon la façon dont votre site utilise les cookies pour collecter des données sur les performances (c'est-à-dire si les cookies contiennent des informations personnelles), ainsi que la législation en question, l'utilisation des cookies pour mesurer les performances peut ne pas être soumise aux mêmes exigences législatives que certains des cookies utilisés sur votre site à d'autres fins (par exemple, les cookies publicitaires). Certains sites choisissent de distinguer les cookies de performances en tant que catégorie distincte de cookies 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 utilisateur novice qui n'a pas répondu à une notification de consentement aux cookies. Toutefois, les variations de l'état du cache (par exemple, une visite initiale par rapport à une visite répétée) doivent être prises en compte lors de la collecte des données de performances, mais aussi les variations de l'état d'acceptation des cookies (acceptés, refusés ou non répondus).
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 notifications de cookies ne sont que l'un des nombreux facteurs qui peuvent être difficiles à simuler parfaitement dans des environnements de laboratoire. C'est pourquoi il est important de faire des données RUM la pierre angulaire de votre analyse comparative des performances, plutôt que des outils synthétiques.
Utiliser des scripts
Vous pouvez utiliser des scripts pour demander à WebPageTest de "cliquer" sur la bannière de consentement aux cookies lors de la collecte d'une trace.
Pour ajouter un script, accédez à l'onglet Script. Le script suivant accède à l'URL à tester, puis clique sur l'élément DOM avec le id=cookieButton.
combineSteps
navigate %URL%
clickAndWait id=cookieButton
Lorsque vous utilisez ce script, tenez compte des points suivants :
combineStepsindique à WebPageTest de "combiner" les résultats des étapes de script qui suivent en un seul ensemble de traces et de mesures. L'exécution de ce script sanscombineStepspeut également être utile. Les traces distinctes permettent de voir plus facilement si les 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 testée.clickAndWaitindique à WebPageTest de cliquer sur l'élément indiqué parattribute=valueet d'attendre la fin de l'activité ultérieure du navigateur. Il suit le formatclickAndWait attribute=Value.
Si vous avez correctement configuré ce script, la capture d'écran prise par WebPageTest ne doit pas afficher de notification concernant les cookies (la notification concernant les cookies a été acceptée).
Pour en savoir plus sur l'écriture de scripts WebPageTest, consultez la documentation WebPageTest.
Enregistrer des cookies
Pour exécuter WebPageTest avec un cookie défini, accédez à l'onglet Advanced (Avancé) et ajoutez l'en-tête de cookie au champ Custom headers (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
Définir des cookies lors d'une analyse Lighthouse peut servir de mécanisme pour placer une page dans un état particulier à des fins de test par Lighthouse. Le comportement des cookies de Lighthouse varie légèrement selon le contexte (DevTools, CLI ou PageSpeed Insights).
Outils de développement
Les cookies ne sont pas effacés lorsque Lighthouse est exécuté à partir de DevTools. Toutefois, les autres types de stockage sont effacés par défaut. Vous pouvez modifier ce comportement à l'aide de l'option Effacer l'espace de stockage dans le panneau des paramètres de 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 particulier, 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ête personnalisés dans la CLI Lighthouse, consultez la section Exécuter Lighthouse sur des pages authentifiées.
PageSpeed Insights
L'exécution de Lighthouse à partir de PageSpeed Insights utilise une nouvelle instance de Chrome et ne définit aucun cookie. PageSeed Insights ne peut pas être configuré pour définir des cookies spécifiques.
Expérience utilisateur
L'expérience utilisateur (UX) des différentes notifications de consentement aux cookies est principalement le résultat de deux décisions : l'emplacement de la notification sur la page et l'étendue à laquelle l'utilisateur peut personnaliser l'utilisation des cookies par un site. Cette section présente les approches possibles pour ces deux décisions.
Voici quelques points à prendre en compte lorsque vous réfléchissez aux conceptions potentielles de votre avis sur les cookies :
- UX : S'agit-il d'une bonne expérience utilisateur ? Quel sera l'impact de cette conception particulière sur les éléments de page et les parcours utilisateur existants ?
- 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 : Combien de travail cela représenterait-il pour l'implémentation et la maintenance ? Dans quelle mesure le changement serait-il difficile ?
Emplacement
Les avis sur les cookies peuvent s'afficher 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.
En-têtes, pieds de page et notifications intégrées concernant les cookies
Les avis sur les cookies sont généralement placés dans l'en-tête ou le pied de page. De ces deux options, l'emplacement du pied de page est généralement préférable, car il est discret, ne lutte pas pour attirer l'attention avec des bannières publicitaires ou des notifications, et ne provoque généralement pas de CLS. De plus, il est courant d'y placer les règles de confidentialité et les conditions d'utilisation.
Bien que les avis sur les cookies intégrés soient une option, ils peuvent être difficiles à intégrer aux interfaces utilisateur existantes et sont donc peu courants.
Modales
Les boîtes de dialogue modales sont des notifications de consentement aux cookies qui s'affichent au-dessus du contenu de la page. L'apparence et le fonctionnement des boîtes de dialogue modales peuvent varier considérablement en fonction de 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 changements de mise en page.
En revanche, les fenêtres modales de grande taille 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 sur les cookies ne présentent pas aux utilisateurs de commandes d'UX directes pour désactiver les cookies. Ils incluent généralement un lien vers le règlement sur les cookies du site, qui peut fournir aux utilisateurs des informations sur la gestion des cookies à l'aide de leur navigateur Web. Ces notifications incluent généralement des boutons "Ignorer" et "Accepter".
Une certaine configurabilité
Ces avis sur les cookies permettent à l'utilisateur de refuser les cookies, mais ne sont pas compatibles avec des commandes plus précises. Cette approche des avis sur les cookies est moins courante.
Configurabilité complète
Ces avis sur les cookies offrent aux utilisateurs des commandes plus précises pour configurer l'utilisation des cookies qu'ils acceptent.
UX : 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 de cookies courantes.
Toutefois, certains sites vont plus loin et permettent aux utilisateurs d'activer les cookies par cookie. 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").
