Contourner les bannières de consentement aux cookies dans Lighthouse et WebPageTest
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.
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.
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.
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.
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.
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.