< Cookies | JavaScript />

Consentement et web performance : le guide pour bien choisir sa CMP

Eroan Boyer

28 mai 2023

16 minutes

Développeur face à un écran où une bannière de consentement recouvre un site d'actualité

Les plateformes de gestion du consentement, que nous désignerons par l’acronyme « CMP » (Consent Management Platform) dans la suite de cet article, occupent une position unique dans le chargement d’une page web : elles sont le premier élément que voit un nouveau visiteur, avant même votre contenu. Dès qu’un site dépose un traceur non strictement nécessaire, leur présence est imposée par le cadre RGPD / ePrivacy, et elles s’affichent donc sur la quasi-totalité des sites européens.

Cette position privilégiée a un coût : une CMP se charge tôt, s’exécute avant les scripts marketing auxquels elle transmet l’état du consentement, et se superpose à toutes les pages d’entrée. Selon les choix techniques de son éditeur et la manière dont elle est intégrée, elle peut dégrader l’ensemble des métriques Core Web Vitals :

  • Le LCP, lorsque son script bloque le rendu ou lorsque la bannière elle-même devient l’élément LCP de la page.
  • L’INP, le clic de consentement étant souvent l’interaction la plus lente de toute la session.
  • Le CLS, quand la bannière s’insère tardivement dans le flux de la page ou s’anime maladroitement.
  • La santé globale du DOM, certains outils injectant des centaines de nœuds pour lister leurs partenaires publicitaires.

En 2023, nous avions publié ici un comparatif de la performance de 11 CMP, notés sur 12 points de contrôle techniques. Trois ans plus tard, ce classement n’a plus de sens : l’INP a rejoint les Core Web Vitals en mars 2024, le Consent Mode v2 de Google et le TCF v2.2 de l’IAB ont rebattu les cartes, et la plupart des éditeurs ont retravaillé leurs scripts en profondeur. Nous avons donc entièrement réécrit cette page sous une forme plus durable : comprendre les mécanismes par lesquels une CMP dégrade la performance, pour être capable d’évaluer n’importe quel outil, aujourd’hui comme demain.

Pourquoi une CMP n’est pas un script tiers comme les autres ?

Un script de chat ou de heatmap peut être retardé sans conséquence fonctionnelle. Une CMP, non : elle doit s’exécuter avant les scripts qu’elle conditionne. C’est tout le principe du Consent Mode v2 de Google, obligatoire depuis mars 2024 pour les annonceurs européens : tant que le consentement n’est pas connu, les tags publicitaires et analytics fonctionnent en mode dégradé. De même, l’API __tcfapi du TCF de l’IAB Europe doit être disponible au plus tôt pour que la chaîne publicitaire programmatique fonctionne. Résultat : la CMP se retrouve mécaniquement dans le chemin critique du chargement.

Elle concerne par ailleurs 100 % des nouveaux visiteurs, sur leur page d’entrée, précisément celle où se jouent le LCP et la première impression. Là où un site fidélise, l’impact se dilue ; là où l’acquisition domine (SEO, Discover, campagnes), une part majeure des sessions commence par l’affichage de la bannière. C’est aussi l’expérience que mesurent par défaut Lighthouse et PageSpeed Insights, qui testent toujours une première visite vierge de tout consentement.

Enfin, une CMP chargée depuis un domaine tiers constitue un point de défaillance unique (SPOF) : SpeedCurve documente le cas d’un script de consentement synchrone dont le timeout a gelé le rendu de la page pendant plusieurs secondes. Quand l’infrastructure de l’éditeur tousse, c’est votre site qui devient blanc. Ce risque, commun à tous les scripts externes, est amplifié ici par la position de la CMP dans le chargement. Nous l’avons détaillé dans notre article sur l’impact des JavaScript tiers.

Six mécanismes par lesquels une CMP dégrade la performance

Pour choisir un outil en connaissance de cause, il faut comprendre par où passe la dégradation. Voici les six mécanismes que nous rencontrons systématiquement en audit, du plus évident au plus insidieux.

1. Un script bloquant retarde tout le monde

Certaines CMP recommandent encore une intégration via une balise <script> synchrone, parfois placée tout en haut du <head>. Le navigateur interrompt alors la construction de la page le temps de télécharger et d’exécuter le script : FCP et LCP reculent d’autant, y compris pour les visiteurs qui ont déjà consenti et ne verront jamais la bannière. La recommandation officielle de web.dev est sans ambiguïté : chargement asynchrone (attribut async), appel direct dans le HTML, et connexion anticipée au domaine de la CMP via preconnect.

Le blocage peut aussi être indirect : beaucoup d’outils fonctionnent en cascade, avec un premier script « stub » qui charge le SDK complet, qui charge à son tour une configuration JSON, des traductions, parfois une feuille de style. Chaque maillon ajoute sa latence, et la bannière ne s’affiche qu’au bout de la chaîne. DebugBear illustre ce phénomène avec le couple otSDKStub.js / otBannerSdk.js de OneTrust, dont la seconde requête, en priorité basse, retarde considérablement l’apparition de la bannière.

Le pire scénario reste toutefois le chargement de la CMP via un tag manager. Un script injecté par Google Tag Manager n’est découvert qu’après le téléchargement et l’exécution de GTM lui-même : il échappe au parseur anticipé du navigateur, hérite d’une priorité réseau plus basse et s’ajoute en bout de chaîne de dépendances. La CMP, qui devrait être l’un des premiers scripts de la page, se retrouve dépriorisée sur le chemin critique qu’elle conditionne pourtant. web.dev le formule sans détour : le script de consentement s’appelle directement dans le HTML du document, jamais via un tag manager ni un script intermédiaire.

Ce détour est parfois imposé par l’organisation : CMP pilotée depuis Google Tag Manager, ou extrait inline qui injecte la balise <script> en asynchrone. Dans les deux cas, l’URL du script n’apparaît pas dans le HTML initial, et le preload scanner du navigateur ne peut donc pas la découvrir. Un <link rel="preconnect"> vers le domaine de la CMP permet alors d’ouvrir la connexion avant même la demande du script : résolution DNS, connexion TCP et négociation TLS sont déjà payées quand la requête part, autant de latence retranchée de l’affichage de la bannière. C’est le filet que recommande web.dev, en complément de l’appel direct, jamais à sa place.

2. L’overlay peut devenir votre LCP

Le LCP mesure l’instant d’affichage du plus grand élément visible dans le viewport, qu’il s’agisse d’une image ou d’un bloc de texte. Or une CMP affichée en overlay central contient souvent plusieurs paragraphes de texte juridique : sur mobile, où elle occupe une part importante de l’écran, ce bloc de texte devient fréquemment l’élément LCP de la page, au détriment de votre propre contenu.

Les conséquences sont doublement perverses. D’abord, comme la bannière s’affiche en fin de chaîne de requêtes, le LCP mesuré se dégrade : DebugBear montre un cas où il passe de 1,43 s à 3,61 s au moment où le texte OneTrust surpasse en taille l’image principale. Ensuite, votre mesure devient aveugle : tant que le LCP « officiel » est celui de la bannière, aucune optimisation de votre image hero n’apparaîtra dans les chiffres. SpeedCurve parle à juste titre de « mauvais élément LCP » : on croit mesurer son site, on mesure sa CMP.

Deux maquettes mobiles : sans CMP le LCP est l'image du contenu, avec overlay il devient le texte de la bannière
Sur mobile, le bloc de texte d’un overlay de consentement dépasse souvent la taille du contenu et devient l’élément LCP

Au moment du choix, ce mécanisme plaide pour une bannière compacte, de type bandeau discret en bas d’écran plutôt que modale plein écran saturée de texte. Un élément nettement plus petit que votre contenu principal ne sera jamais candidat LCP.

3. Les insertions tardives provoquent des layout shifts

Quand une bannière s’insère dans le flux de la page (typiquement en haut d’écran) après que le contenu environnant s’est affiché, tout ce qui se trouve dessous est brutalement repoussé : c’est l’une des causes les plus répandues de mauvais CLS. web.dev recommande soit de réserver l’espace dans le DOM avant le rendu, soit d’afficher la bannière en overlay (sticky footer ou modale), qui ne déplace rien. Les animations d’apparition constituent le second piège : un « slide-in » animé via les propriétés top ou left génère des layout shifts à chaque frame, là où une animation en transform n’en produit aucun.

4. Le clic de consentement, souvent l’interaction la plus lente de la session

L’INP sanctionne l’interaction la plus lente d’une session (au 75e percentile des utilisateurs). Or le clic sur « Tout accepter » est structurellement coûteux : dans un même gestionnaire d’événement s’enchaînent l’écriture du consentement, l’encodage de la chaîne TCF, la notification de dizaines de callbacks tiers, le déclenchement en rafale de tous les tags marketing en attente, puis la fermeture et la suppression du DOM de l’interface.

Tant que cette longue tâche n’est pas terminée, l’écran ne se met pas à jour : la bannière semble figée, l’utilisateur re-clique, et l’INP s’envole. C’est d’autant plus pénalisant que ce clic est, pour beaucoup de visiteurs, la première interaction avec le site, celle-là même qui a de bonnes chances de devenir l’INP retenu pour la session.

Chronologie comparant une longue tâche unique à des tâches découpées par scheduler.yield après le clic de consentement
Sans découpage des tâches, l’interface ne se met à jour qu’en fin de traitement ; avec yield, l’affichage intervient dès la première étape

Ce problème est corrigeable par les éditeurs, et certains l’ont démontré. L’étude de cas publiée par Google avec PubTech détaille les techniques employées : découpage des longues tâches avec scheduler.yield() et scheduler.postTask() pour laisser le navigateur peindre entre deux étapes, et « lazy de-rendering », qui consiste à masquer immédiatement la bannière en display: none puis à ne supprimer ses nœuds DOM que plus tard, via requestIdleCallback. Résultat : un INP réduit jusqu’à 64 % chez leurs clients, et des longues tâches imputables à la librairie TCF réduites de 85 % sur mobile.

La leçon pour votre choix d’outil : demandez à l’éditeur ce qu’il fait de votre clic. Un fournisseur incapable de répondre « nous cédons la main au navigateur avant de traiter les tags » n’a probablement jamais mesuré son INP.

5. Des centaines de partenaires dans votre DOM

Les sites monétisés par la publicité programmatique s’appuient sur le TCF, dont la Global Vendor List référence plusieurs centaines de sociétés. Le TCF v2.2 impose en outre d’annoncer le nombre de partenaires dès le premier écran. Certaines CMP en tirent une conclusion désastreuse pour la performance : elles pré-construisent, dès le chargement initial, le panneau secondaire listant chaque partenaire avec sa case à cocher, son intitulé et son texte de finalité. Des centaines de lignes masquées, mais bien présentes dans le DOM.

Or la taille du DOM n’est jamais gratuite : chaque nœud alourdit les recalculs de style, le layout et la mémoire, et dégrade directement l’interactivité. Lighthouse considère qu’au-delà d’environ 1 400 nœuds, une page entre en zone critique. Une CMP qui injecte à elle seule plusieurs centaines de nœuds peut faire basculer une page saine dans le rouge.

Lors de notre comparatif 2023, les interfaces initiales s’échelonnaient de 40 à 210 nœuds, soit un facteur 5 entre le plus sobre et le plus verbeux, avant même d’ouvrir le panneau des partenaires. Les bonnes pratiques existent pourtant : construire la liste des partenaires à la demande, au moment où l’utilisateur ouvre le panneau, la paginer ou la virtualiser, et idéalement encapsuler l’interface dans un Shadow DOM pour isoler ses styles de ceux de la page.

Arbre DOM d'une page relié à un panneau CMP contenant une grille de dizaines de nœuds partenaires masqués
Une CMP qui pré-construit sa liste de partenaires peut injecter à elle seule plusieurs centaines de nœuds dans le DOM

6. Poids, domaines, cache et compression : les fondamentaux restent

Restent les fondamentaux de tout script tiers, où les écarts entre CMP demeurent considérables. Le volume de JavaScript d’abord : à fonctionnalité équivalente, nous avions mesuré en 2023 un rapport de 1 à 10 entre outils, certains dépassant 200 Ko compressés. Chaque kilo-octet se télécharge, se parse et s’exécute sur le CPU, souvent modeste, du mobile de vos visiteurs.

Les échanges annexes ensuite : configurations et fichiers de traduction JSON de plusieurs dizaines de Ko, feuilles de style obèses injectées en inline. La livraison enfin : un domaine unique servi par un CDN en HTTP/2 ou HTTP/3, une compression Brotli et une politique de cache navigateur d’au moins une journée devraient être des évidences. Nous avions pourtant relevé en 2023 des durées de cache de 11 minutes, imposant de re-télécharger le script à presque chaque session.

L’effet paradoxal : une CMP reporte aussi l’exécution des scripts tiers

Tout n’est pas à charge, et il faut le dire clairement : une CMP produit aussi un effet bénéfique sur le chargement initial. Tant que l’utilisateur n’a pas exprimé son choix, elle bloque ou reporte l’exécution des scripts tiers qu’elle conditionne. Certains sont intégralement absents de la page (aucun octet téléchargé, aucune tâche exécutée), tandis que d’autres, pilotés par le Consent Mode, ne se chargent que partiellement, en mode dégradé sans cookies. La première visite est donc mécaniquement allégée : moins de requêtes, moins de JavaScript, moins de longues tâches, tant que la bannière est à l’écran.

Cet allègement a toutefois un revers côté mesure : les tests synthétiques reproduisent précisément cet état. Lighthouse et PageSpeed Insights testent une première visite sans consentement, dans laquelle une grande partie des scripts tiers a tout simplement disparu. SpeedCurve chiffre l’écart sur un cas réel : l’expérience « consentie » du même site charge 73 requêtes tierces supplémentaires, avec l’activité CPU et les longues tâches qui les accompagnent. Le rapport de test décrit donc un site sensiblement plus performant qu’il ne l’est réellement pour la majorité de vos visiteurs, qui naviguent en état consenti.

La parade est toujours la même : tester les deux états (avant et après opt-in, en scriptant le clic ou en pré-positionnant le cookie de consentement) et, surtout, faire foi aux données de terrain. Le RUM et CrUX agrègent l’ensemble des sessions, consenties ou non : c’est là, et non dans un rapport Lighthouse, que se lit l’impact réel de votre CMP comme celui de vos scripts tiers.

Votre site est-il aussi rapide que vos visiteurs l’espèrent ?

Découvrez comment nous pouvons vous accompagner

Ce que notre comparatif 2023 avait mis en évidence

Notre comparatif de 2023 notait 11 outils (Axeptio, Cookiebot, Cookie Law, CookieYes, Didomi, Iubenda, OneTrust, Osano, Quantcast Choice, Sirdata, Usercentrics) sur 12 points de contrôle. Osano l’emportait avec 72 %, et aucun outil ne dépassait les trois quarts du score maximal. Surtout, chaque acteur échouait sur un point différent, illustrant chacun des mécanismes décrits plus haut :

  • Cookiebot fournissait un code d’intégration synchrone de 34 Ko, injectait 209 nœuds dans le DOM et servait son script avec un cache de 11 minutes, le plus court du panel.
  • Sirdata chargeait 146 Ko depuis un domaine hors CDN, en HTTP/1.1, seul acteur du panel dans ce cas.
  • Usercentrics et OneTrust téléchargeaient respectivement 206 et 124 Ko de JavaScript asynchrone.
  • Didomi injectait 80 Ko de CSS dans une balise <style>, Quantcast Choice échangeait 83 Ko de JSON dès le chargement, avant toute interaction.
  • Cookie Law et CookieYes gonflaient le DOM (208 et près de 140 nœuds, pour une médiane à 84), quand Axeptio chargeait 51,6 Ko d’images dans sa bannière.

Fin 2023, nous avions complété cette photographie « laboratoire » par des données RUM collectées sur un large échantillon de sites, en classant les CMP par INP au 75e percentile : de 26 ms pour Usercentrics à 241 ms pour Cookiebot, en passant par CookiePro (49 ms), Cookie Law (58 ms), CookieYes (60 ms), Consentmanager (171 ms) et Funding Choices (200 ms). Deux enseignements : le classement terrain ne recoupait pas le classement laboratoire (Cookie Law, mal noté en lab, se comportait honorablement en field), et les positions bougeaient à mesure que les éditeurs mettaient à jour leurs scripts.

C’est précisément pourquoi nous ne republions pas de classement figé. Un score attribué un jour J photographie une version de script que l’éditeur peut remplacer le lendemain, et plusieurs acteurs cités ci-dessus ont d’ailleurs largement corrigé le tir depuis. Et votre propre configuration (mode d’intégration, langue, liste de partenaires, personnalisation graphique) pèse autant que l’outil lui-même. Un classement se périme ; une grille de critères se réutilise.

La grille de choix : 10 critères pour évaluer une CMP

Voici la grille que nous utilisons en audit et en accompagnement. Elle est directement dérivée des mécanismes décrits plus haut, et chaque critère se vérifie objectivement, outils de test à l’appui.

CritèreCe qu’il faut exiger
Mode de chargementScript asynchrone (async), appelé directement dans le HTML, jamais en synchrone ni via un tag manager
ConnexionsUn domaine unique, servi par un CDN, compatible preconnect
Poids JavaScriptQuelques dizaines de Ko compressés maximum, en Brotli
Chaîne de requêtesBannière affichable en une à deux requêtes, sans cascade de configurations ni traductions volumineuses
Cache navigateurCache-Control d’une journée minimum
AffichageBannière compacte (bandeau ou modale réduite), overlay ou espace réservé, animations en transform uniquement
DOM injectéInterface initiale de quelques dizaines de nœuds, liste des partenaires construite à l’ouverture du panneau, Shadow DOM apprécié
InteractionsRetour visuel immédiat au clic, traitement des tags découpé (scheduler.yield), suppression du DOM différée
Signaux de consentementConsent Mode v2 et, si votre monétisation l’exige, TCF v2.2 (__tcfapi) correctement exposés
Sobriété graphiquePas d’images ni de polices chargées depuis des domaines distants ; héritage des polices du site

Comment tester vous-même ?

Trois manipulations suffisent à départager des candidats. Un, comparer la première visite et la visite « consentie » : WebPageTest permet de scripter le clic sur la bannière ou de pré-positionner le cookie de consentement, et la différence entre les deux films révèle le coût réel de l’outil.

Deux, profiler le clic « Tout accepter » dans le panneau Performance des DevTools : la durée de traitement de l’interaction, et la liste des scripts qui s’y exécutent, ne mentent pas. Trois, en production, surveiller en RUM l’attribution de l’INP et des longues frames (API Long Animation Frames) : si le script de votre CMP ressort en tête des scripts bloquants, vous tenez votre coupable.

Gardez enfin en tête que les outils synthétiques ne testent que la première visite : seules les données de terrain reflètent la réalité d’un trafic majoritairement déjà consenti.

Ne laissez pas la CMP aveugler votre mesure

Dernier angle mort : la CMP conditionne aussi vos outils de mesure. Si votre solution RUM ou analytics est soumise au consentement, chaque refus est une session invisible : vos données de performance ne décrivent plus que les visiteurs consentants. web.dev rappelle que la mesure de performance ne nécessite techniquement aucun cookie (la librairie web-vitals en est un exemple), et qu’il peut être pertinent d’isoler la mesure d’audience dans une catégorie de consentement distincte, voire d’opter pour une solution exemptée de consentement au sens de la CNIL. Un critère de plus à mettre dans la balance au moment du choix.

Le cas WordPress : la CMP en extension, sans script distant

WordPress permet une approche structurellement différente : la CMP installée comme extension, qui génère la bannière depuis votre propre domaine, sans dépendre d’un service distant. Complianz en est l’exemple le plus abouti (l’extension revendique un fonctionnement intégralement auto-hébergé, sans appel d’API externe), et l’open source français tarteaucitron relève de la même logique.

Les bénéfices performance sont directs. Plus de résolution DNS ni de négociation TLS vers un domaine tiers, plus de SPOF externe : le script est servi par votre serveur, avec votre politique de cache, votre compression et votre protocole HTTP, aux côtés de vos autres ressources. Le poids embarqué est généralement d’un ordre de grandeur inférieur à celui d’une CMP SaaS. Et comme la bannière peut être rendue dans le HTML initial, l’espace peut être réservé dès le premier affichage : pas d’apparition tardive, pas de layout shift, pas de chaîne de requêtes.

Trois limites méritent cependant d’être posées. D’abord, une extension reste du code exécuté à chaque requête PHP et des assets ajoutés au front : sa qualité se vérifie comme celle d’un thème.

Ensuite, la configuration demande un profil technique : tarteaucitron embarque par exemple des dizaines de configurations de services qu’il faut élaguer pour ne pas charger du JavaScript inutile, et les extensions de cache ou d’optimisation doivent être configurées pour ne pas différer le script de consentement ; Complianz documente ces exclusions pour WP Rocket ou LiteSpeed.

Enfin, un éditeur de presse monétisé en programmatique aura besoin d’un enregistrement TCF complet que les extensions locales ne couvrent pas toutes : pour un parc de sites hétérogène ou des besoins juridiques avancés, la CMP SaaS garde sa pertinence.

Pour un site vitrine, un e-commerce ou un blog WordPress dont les traceurs se limitent à l’analytics et à quelques pixels marketing, notre position est claire : l’extension locale bien configurée est l’option la plus performante, tout simplement parce qu’elle supprime la plupart des mécanismes de dégradation décrits dans cet article au lieu de les atténuer.

Ce qu’il faut retenir

Une CMP est un passage obligé réglementaire, pas une fatalité performance. Les écarts entre outils sont majeurs, les mécanismes de dégradation sont connus, et chacun se teste objectivement :

  • Exigez un chargement asynchrone et direct, sans passer par un tag manager, depuis un domaine unique sur CDN, avec un cache long et un poids minimal.
  • Préférez une bannière compacte qui ne peut ni devenir votre LCP, ni provoquer de layout shift.
  • Profilez le clic de consentement : c’est lui qui fera votre INP auprès des nouveaux visiteurs.
  • Refusez les interfaces qui déversent leurs centaines de partenaires dans votre DOM dès le chargement.
  • Sur WordPress, étudiez sérieusement l’option de l’extension locale sans script distant.
  • Méfiez-vous des scores synthétiques flatteurs : sans consentement, une grande partie des scripts tiers ne se charge pas.
  • Mesurez en RUM, avant et après tout changement d’outil, et re-challengez votre CMP à chaque échéance contractuelle.

Comme en 2023, rappelons enfin que la performance n’est qu’un critère parmi d’autres, aux côtés de la conformité réglementaire, des fonctionnalités et du coût : ce guide éclaire un angle mort, il ne remplace ni votre juriste ni votre équipe marketing. Nous restons disponibles pour échanger et répondre à vos questions : n’hésitez pas à poster un commentaire ci-dessous ou à nous solliciter via le formulaire de contact.

Poursuivez votre lecture