Optimisez les avis de cookies pour les performances et la facilité d'utilisation.
Cet article explique comment les notifications relatives aux cookies peuvent affecter les performances, la mesure des performances et l'expérience utilisateur.
Performances
Les notifications de cookies peuvent avoir un impact significatif sur les performances des pages. En effet, elles sont généralement chargées au début du processus de chargement de la page, sont visibles par tous les utilisateurs, et peuvent potentiellement influer sur le chargement des annonces et d'autres contenus de la page.
Voici comment les avis de cookies peuvent avoir un impact sur les métriques Core Web Vitals:
Largest Contentful Paint (LCP) : la plupart des notifications de consentement concernant les cookies sont relativement petites et ne contiennent donc généralement pas d'élément LCP d'une page. Cela peut toutefois se produire, en particulier sur les appareils mobiles. Sur les appareils mobiles, une notification relative aux cookies occupe 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).
First Input Delay (FID) : en règle générale, votre solution de consentement pour les cookies ne devrait avoir qu'un impact minimal sur le FID. Le consentement pour les cookies nécessite peu d'exécution JavaScript. Toutefois, les technologies activées par ces cookies, à savoir les scripts publicitaires et de suivi, peuvent avoir un impact significatif sur l'interactivité sur les pages. Retarder ces scripts jusqu'à l'acceptation des cookies peut servir de technique pour réduire le First Input Delay (FID).
CLS (Cumulative Layout Shift) : les notifications de consentement pour les cookies sont une source très courante de décalages de mise en page.
De manière générale, vous pouvez vous attendre à ce qu'une notification relative aux cookies provenant de fournisseurs tiers ait un impact plus important sur les performances qu'une notification que vous créez vous-même. Ce n'est pas un problème propre aux notifications de cookies, mais 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 avis concernant les cookies tiers. Certaines de ces bonnes pratiques, mais pas toutes, s'appliqueront également aux notifications concernant les cookies propriétaires.
Charger les scripts de détection des cookies de manière asynchrone
Les scripts de notification des cookies doivent être chargés de manière asynchrone. Pour ce faire, ajoutez l'attribut async au tag de script.
<script src="https://cookie-notice.com/script.js" async>
Les scripts qui ne sont pas asynchrones bloquent l'analyseur de navigateur. Cela retarde le chargement de la page et le LCP. Pour en savoir plus, consultez la section Charger efficacement des fichiers JavaScript tiers.
Charger directement les scripts de notification relative 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 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 des cookies retarde son chargement: il empêche l'analyseur de prévisualisation du navigateur de le charger et empêche son chargement avant son exécution.
Établir rapidement une connexion avec l'origine de la notification relative aux cookies
Tous les sites qui chargent leurs scripts d'avis sur les cookies à partir d'un emplacement tiers doivent utiliser les indices de ressources dns-prefetch ou preconnect pour établir une connexion anticipée avec l'origine qui héberge les ressources de notification des cookies. Pour en savoir plus, consultez la section Établir 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
Il peut être utile d'utiliser l'indice de ressource preload pour charger le script de notification des cookies sur certains sites. L'indice de ressource preload indique au navigateur qu'il doit 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 performant lorsqu'il se limite à extraire quelques ressources clés par page. Ainsi, l'utilité du préchargement du script de notification des cookies varie en fonction de la situation.
Tenez compte des compromis en termes de performances lorsque vous définissez le style des notifications relatives aux cookies.
La personnalisation de l'apparence d'une notification de cookie 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 (par exemple, des polices Web) que celles utilisées ailleurs sur la page. En outre, les notifications de cookies tiers ont tendance à se charger à la fin des longues chaînes de requêtes. Pour éviter toute mauvaise surprise, vérifiez comment la notification relative aux cookies se charge et applique un style et les ressources associées.
Éviter les décalages 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:
- Avis de cookies en haut de l'écran:les avis de 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 après que la page environnante est déjà affichée, les éléments de la page en dessous seront 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 possible (par exemple, si les dimensions de l'avis de cookie varient en fonction de la zone géographique), envisagez d'utiliser un pied de page ou une fenêtre modale fixe pour afficher la notification. Étant donné que ces deux approches alternatives affichent la notification relative aux cookies sous la forme d'une "superposition" au-dessus du reste de la page, la notification relative aux cookies ne doit pas entraîner de décalage du contenu lors de son chargement.
- Animations: de nombreuses notifications de cookie utilisent des animations (par exemple, "glisser" une notification de cookie est un schéma 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 à chargement tardif peuvent bloquer l'affichage et/ou entraîner des décalages de mise en page. Ce phénomène se produit surtout avec les connexions lentes.
Optimisations avancées du chargement
L'implémentation de ces techniques demande plus de travail, mais peut encore 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 diffusion de ces ressources.
- L'utilisation de service workers peut vous permettre de mieux contrôler la récupération et la mise en cache des scripts tiers tels que les scripts d'avis sur les 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 techniques pour les atténuer.
Surveillance des utilisateurs réels (RUM)
Certains outils d'analyse et de RUM utilisent des cookies pour collecter les données de performances. Si un utilisateur refuse l'utilisation des cookies, ces outils ne peuvent pas capturer les données de performances.
Les sites doivent être informés de ce phénomène. Il est également utile 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 raison de s'inquiéter étant donné la direction et l'ampleur du décalage de données. L'utilisation des 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.
En fonction de la manière dont votre site utilise des cookies pour collecter des données sur les performances (par exemple, si les cookies contiennent des informations personnelles) et de la législation en question, l'utilisation de cookies pour mesurer les 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 en une catégorie distincte lorsqu'ils demandent le consentement de l'utilisateur.
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 n'ayant pas répondu à un avis de consentement aux cookies. Toutefois, non seulement les variations de l'état du cache (par exemple, une visite initiale ou une visite répétée) doivent être prises en compte lors de la collecte des données sur les performances, mais aussi les variations de l'état d'acceptation des cookies (accepté, refusé ou sans réponse).
Les sections suivantes décrivent les paramètres WebPageTest et Lighthouse qui peuvent être utiles pour intégrer les notifications relatives aux cookies dans les workflows de mesure des performances. Toutefois, les avis relatifs aux cookies ne sont que l'un des nombreux facteurs qui peuvent être difficiles à simuler parfaitement dans les environnements de laboratoire. Pour cette raison, 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.
Tester les notifications de cookies avec WebPageTest
Script
Vous pouvez utiliser des scripts pour qu'un WebPageTest "clique" sur la bannière de consentement pour les cookies tout en collectant une trace.
Accédez à l'onglet Script pour ajouter un script. Le script ci-dessous accède à l'URL à tester, puis clique sur l'élément DOM ayant l'ID cookieButton.
combineSteps
navigate %URL%
clickAndWait id=cookieButton
Lorsque vous utilisez ce script, gardez à l'esprit les points suivants:
combineStepsindique à WebPageTest de "combiner" les résultats des étapes de script qui se suivent en un seul ensemble de traces et de mesures. Exécuter ce script sanscombineStepspeut également être utile. Des traces distinctes permettent de voir 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 en cours de test.clickAndWaitindique à WebPageTest de cliquer sur l'élément indiqué parattribute=valueet d'attendre la fin de l'activité de navigateur suivante. Il respecte le formatclickAndWait attribute=Value.
Si vous avez correctement configuré ce script, la capture d'écran effectuée par WebPageTest ne doit pas afficher de notification de cookie (celle-ci a été acceptée).
Pour en savoir plus sur les scripts WebPageTest, consultez la documentation de WebPageTest.
Définir les cookies
Pour exécuter WebPageTest avec un ensemble de cookies, accédez à l'onglet Advanced (Avancé) et ajoutez l'en-tête de cookie dans le champ Custom En-têtes (En-têtes personnalisés) :
Modifier l'emplacement du test
Pour modifier l'emplacement de test utilisé par WebPageTest, cliquez sur la liste déroulante Test Location (Emplacement de test) dans l'onglet Advanced Testing (Tests avancés).
Tester les avis de cookie avec Lighthouse
La définition de cookies sur une exécution Lighthouse peut servir de mécanisme pour amener une page à 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).
DevTools
Les cookies ne sont pas supprimés lorsque Lighthouse est exécuté depuis les outils de développement. Toutefois, d'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 des 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 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êtes personnalisés dans la CLI Lighthouse, consultez la page 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 liée aux différentes notifications de consentement pour les cookies dépend principalement de deux décisions: l'emplacement de la notification sur la page et la possibilité pour l'utilisateur de personnaliser l'utilisation des cookies sur un site. Cette section présente des approches potentielles concernant ces deux décisions.
Lorsque vous envisagez des conceptions potentielles pour votre notification relative aux cookies, voici quelques points à prendre en compte:
- Expérience utilisateur: est-ce une bonne expérience utilisateur ? Comment cette conception particulière affectera-t-elle les éléments de page et les flux utilisateur existants ?
- Entreprise: quelle est la stratégie de votre site concernant les cookies ? Quels sont vos objectifs pour la notification des cookies ?
- Mentions légales: est-ce conforme aux obligations légales ?
- Ingénierie: combien de travail cela implique-t-il pour la mise en œuvre et la maintenance ? Dans quelle mesure serait-il difficile de changer ?
Emplacement
Les avis relatifs aux 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 s'afficher en haut du contenu de la page à l'aide d'une fenêtre modale ou être diffusées comme interstitiels.
Avis concernant les en-têtes, pieds de page et cookies intégrés
Les avis relatifs aux 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, ne met pas en concurrence l'attention avec les bannières ou les notifications et ne provoque généralement pas de CLS. Les règles de confidentialité et les conditions d'utilisation y figurent également fréquemment.
Bien que les notifications de cookies intégrés soient une option, elles peuvent être difficiles à intégrer dans les interfaces utilisateur existantes et sont donc peu courantes.
Modales
Les fenêtres modales sont des notifications de consentement aux cookies qui s'affichent en haut du contenu de la page. L'apparence et les performances des fenêtres modales varient en fonction de leur taille.
Des fenêtres modales plus petites et sur une partie de l'écran 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 grandes fenêtres modales qui masquent la majorité du contenu de la page doivent être utilisées avec précaution. En particulier, les sites de petite taille peuvent constater que les utilisateurs rebondissent au lieu d'accepter la notification de cookie d'un site qu'ils ne connaissent pas et dont le contenu est obscurci. Bien qu'il ne s'agisse pas nécessairement de concepts similaires, si vous envisagez d'utiliser une fenêtre modale de consentement en plein écran pour les cookies, vous devez connaître la législation concernant les écrans de cookies.
Configurabilité
Les interfaces de notification des cookies offrent aux utilisateurs différents niveaux de contrôle sur les cookies qu'ils acceptent.
Aucune configurabilité
Ces bannières de style d'avis ne proposent pas aux utilisateurs de commandes d'expérience utilisateur directes pour désactiver les cookies. À la place, ils incluent généralement un lien vers la politique des 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 un bouton "Ignorer" et/ou "Accepter".
Configurabilité
Ces avis permettent à l'utilisateur de refuser les cookies, mais ne permettent pas de contrôles plus précis. Cette approche de la notification des cookies est moins courante.
Configurabilité complète
Ces notifications permettent aux utilisateurs de contrôler plus précisément l'utilisation des cookies qu'ils acceptent.
Expérience utilisateur:les commandes de configuration de l'utilisation des cookies s'affichent le plus souvent à l'aide d'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 façon intégrée dans la notification initiale de consentement aux cookies.
Précision:l'approche la plus courante concernant la configurabilité des cookies consiste à permettre aux utilisateurs d'activer les cookies par "catégorie". Les cookies fonctionnels, de ciblage et de réseaux sociaux sont des exemples de catégories courantes.
Cependant, certains sites iront plus loin et autoriseront les utilisateurs à activer cette option pour chaque cookie. Une autre façon de fournir des contrôles plus spécifiques aux utilisateurs consiste à répartir les catégories de cookies (par exemple, "publicité") en cas d'utilisation spécifiques (par exemple, en leur permettant d'activer séparément les "annonces standards" et les "annonces personnalisées").
