Photo de Paul Delcloy, consultant en web performance
Photo de Paul Delcloy, consultant en web performance

Contourner les bannières de consentement aux cookies dans Lighthouse et WebPageTest

Publié le 17/09/2023 à 12:00, dernière mise à jour le 25/09/2023.

Lorsqu'il s'agit de tester des pages à l’aide de Lighthouse, WebPageTest ou d’autres outils similaires, les bannières de consentement aux cookies posent souvent problème.

Exemple d’illustration d’un bandeau cookie

Les Consent Management Platform (CMP) peuvent provoquer des décalages de mise en page (qui contribuent au CLS). Sur mobile la bannière est parfois même détectée comme l’élément principal pour le Largest Contentful Paint (LCP), elles obscurcissent visuellement d’autres parties de la page, et si elles sont correctement mises en œuvre, seules certaines ressources de la page seront chargées.

Lors de l’analyse de sites, l’une de mes premières étapes consiste à trouver comment contourner ces bannières de consentement afin d’obtenir une vision plus complète de la performance de la page au plus proche des utilisateurs réels.

Cet article aborde certains des problèmes de performance liés aux bannières de consentement, comment les contourner, et la méthode à adopter pour déterminer quels cookies ou éléments de localStorage il faut définir pour les bypasser.

Les défis des bannières de cookies

Le Layout shift, ou CLS

Certaines bannières s'affichent en haut de la page, avant le reste du contenu. Dans le cas où la bannière est insérée après le démarrage du rendu de la page, tout le contenu initial de la page va sauter vers le bas.

Filmstrip du site Twitch montrant un layout shift lorsque la bannière de consentement aux cookies est affichée

Dans le filmstrip de twitch.tv, un layout shift de 0.126 peut être constaté aux alentours de 4.0s, lorsque la CMP est affichée.

Pour éviter ce genre de problèmes, il faut que le code de la bannière soit dans le DOM initial de la page, et que la condition d’affichage soit calculée avant le rendu initial de la page.

Une autre possibilité pour éviter ce genre de problèmes est d’afficher le bandeau de consentement haut dessus du contenu de la page, dans une popin qui obsurcit le reste du contenu de la page, et rend le choix de l’utilisateur obligatoire pour accéder au contenu de la page. Cette astuce maximise également le taux de clic des CMP.

Le Largest Contentful Paint, ou LCP

Sur certaines pages, notamment sur mobile, la bannière de consentement aux cookies est détectée comme étant le LCP. Ce type de comportement peut gravement fausser les chiffres de performance de votre site.

Filmstrip du site Allianz qui montre que la bannière de consentement aux cookies est le LCP de la page

Un exemple sur le site d’allianz.fr sous OneTrust, où le LCP (encadré en rouge) est déclenché à l’affichage de la cookie banner.

Filmstrip d’une autre page du site Allianz qui montre que la bannière de consentement aux cookies n'est pas le LCP de la page

Il est important de tester les différents gabarits de page. Sur certaines pages, le LCP est bien l’image principale de la page comme sur la capture précédente.

Le test de l’INP

Depuis la mise à jour de Mars 2024, l’Interaction to Next Paint (INP) est un core web vitals à part entière. Lorsque vous testez votre INP avec un outil comme DebugBear INP Tester, les mesures peuvent se retrouver trompées par l’absence d’activation des scripts tiers tels que GTM ou d’autres outils d’analyse.

Dans des conditions réelles d’utilisation du site (notamment lorsque vous suivez des sessions en Real User Monitoring), le LCP ne sera détectée sur la CMP qu'une seule fois puisqu'elle n'est affichée qu'à la première page vue.

La mesure partielle

Dans les pays de l’Union Européenne, les CMP configurées correctement doivent empêcher le chargement des ressources tierces tant que l’utilisateur n'a pas donné son consentement à l’utilisation de ses données.

Si on teste la performance des pages sans accepter les cookies, la mesure ne reflètera pas l’expérience des utilisateurs qui acceptent les cookies sur votre site web.

En effet, les scripts tiers influent sur la performance du site web, à minima sur le poids de la page, mais ils ajoutent généralement du temps d’exécution Javascript (voir des long tasks), voire des layout shifts qui affectent négativement la webperf de vos pages.

Graphique de comparaison du poids de la homepage Allianz France
Comparaison du poids d’une page avec et sans cookies acceptés sur le site Allianz, la page est plus lourde après acceptation des cookies (en rouge)
Graphique de comparaison des métriques webperf de la homepage Allianz France
Comparaison des métriques webperf avec et sans cookies acceptés sur le site Allianz, les chiffres sont moins bons avec les cookies actifs (en rouge)

Sur ces captures, il est clairement visible que le poids des ressources et que les métriques de web performance sont moins bons lorsque les third parties sont injectés.

Comment tester correctement la webperf au travers d’un bandeau cookie ?

Pour accepter par défaut les cookies, plusieurs méthodes sont envisageables. Pour certaines CMP, vous pouvez simplement observer quels cookies sont ajoutés au navigateur à l’acceptation des cookies, et les ajouter dans votre outil de test de web performance.

Certains fournisseurs comme Quantcast s'appuient sur d’autres procédés comme le localStorage pour conserver le consentement utilisateur. Il faudra dans ce cas créer un script qui simule l’ajout des cookies mais aussi l’injection des données dans le localStorage.

Pour résumer

L’intégration de la CMP sur votre site pour être en conformité avec le RGPD peut avoir des impacts sur la performance du site web. Il est primordial de choisir correctement le fournisseur qui en fonction de différents critères donc la webperf doit faire partie.

Une fois le choix du provider effectué, assurez-vous d’intégrer des méthodes qui permettent de continuer à tester la performance réelle de votre site, en chargeant les third parties comme pour un utilisateur qui accepterait les cookies sur votre site.

Besoin d’aide ? depuis les coordonnées disponibles depuis ma page de références.

Je suis prêt à relever tous les défis, et vous ?