Comment accélérer le chargement d'Axeptio (sans casser le consentement)

Sur une connexion de bureau rapide, le bandeau Axeptio s'affiche presque aussitôt. Sur un téléphone dans la rue, les visiteurs lisent, font défiler et touchent l'écran avant qu'il n'apparaisse, parfois longtemps après la page elle-même. Pendant ce temps, vos balises attendent un consentement qui n'a pas encore été demandé, et le bandeau atterrit par-dessus une page que le visiteur utilise déjà.

Axeptio est rarement coupable à lui seul. Ce qui le retarde, c'est sa place dans la file d'attente. Ce guide montre ce dont le bandeau a besoin avant de pouvoir apparaître, ce qu'une vraie page fait à cette chaîne, et les leviers qui l'avancent sans toucher à ce que le consentement exige.

Ce qu'Axeptio charge avant que le bandeau n'apparaisse

Le bandeau est la dernière étape d'une courte chaîne, et chaque étape attend la précédente :

1. Les réglages : un petit script inline qui déclare window.axeptioSettings (l'id de votre projet et la version des cookies) et injecte le SDK.
2. Le SDK, un script servi depuis static.axept.io.
3. La configuration du projet : textes, fournisseurs et design, récupérés par le SDK une fois qu'il tourne.
4. Les styles et la police du widget, dont une feuille de style de police web servie depuis fonts.axept.io.
5. Le bandeau, affiché une fois que tout ce qui précède est là.

Aucun de ces fichiers n'est lourd. Le problème, c'est que sur une page chargée ils sont demandés alors que des dizaines d'autres fichiers sont déjà en cours de téléchargement, et sur une connexion mobile lente chaque requête de la file coûte un aller-retour.

Un cas réel : 16 secondes en Slow 4G

Nous avons mesuré une vraie landing page WordPress construite avec un page builder, environ 150 requêtes, avec Axeptio installé. Protocole : émulation téléphone en 390 × 844 pixels, cache du navigateur désactivé, aucun cookie de consentement, aucune interaction, cinq passages par réseau, médianes retenues.

• Sans bridage : premier affichage à 0,57 s, bandeau en place à 1,42 s.
• Fast 4G : premier affichage à 1,32 s, bandeau en place à 3,12 s.
• Slow 4G : premier affichage à 5,72 s, bandeau en place à 15,98 s.

Sur le profil lent, le visiteur a eu dix secondes de page avant qu'on lui demande quoi que ce soit. Chaque balise en attente du consentement a attendu avec lui.

Une version allégée de la même page, avec environ 80 requêtes au lieu de 150, avait son bandeau en place à 5,8 s en Slow 4G. Cette version changeait aussi la présentation du bandeau, donc la comparaison donne un ordre de grandeur plutôt qu'un gain exact. C'est l'ordre de grandeur qui compte : diviser la concurrence par deux a réduit l'attente d'environ deux tiers.

Levier 1 : alléger ce qui concurrence le bandeau

C'est le plus gros levier, et il n'a rien à voir avec les réglages d'Axeptio. Ouvrez le panneau Network sur un profil mobile bridé et listez ce qui se charge avant le bandeau : des feuilles de style du page builder utilisées sur d'autres templates, un script de slider pour un slider sous la ligne de flottaison, un widget de chat, plusieurs pixels marketing, des images en pleine taille tout en bas de la page.

• Reportez les scripts inutiles au chargement (chat, pop-ups, sliders sous la ligne de flottaison), en laissant l'outil de consentement hors du report (levier 2).
• Arrêtez de charger des ressources sur les templates qui ne les utilisent pas.
• Chargez en différé (lazy load) les images sous la ligne de flottaison, jamais l'image principale en haut.
• Réduisez le CSS à ce que la page utilise, pour que des feuilles de style moins nombreuses et plus légères attendent dans la file.

Chaque requête retirée du début du chargement est une place que la chaîne Axeptio obtient plus tôt.

Levier 2 : ne jamais reporter l'outil de consentement

Les outils de performance qui repoussent le JavaScript jusqu'à la première interaction sont une cause fréquente de bandeau qui n'apparaît qu'après un défilement ou un toucher. Si les réglages inline ou le SDK sont reportés, le bandeau attend que le visiteur bouge, et le consentement est demandé après coup.

Ajoutez les deux aux exceptions de votre outil de report : le script inline, que vous pouvez cibler par axeptioSettings, et le SDK, que vous pouvez cibler par axept.io. Vérifiez ensuite le résultat : rechargez en navigation privée, ne touchez à rien, et le bandeau doit apparaître tout seul. La méthode générale pour trouver ce qu'un report a cassé est dans notre guide sur le report du JavaScript.

Levier 3 : lancer la chaîne tôt

Placez le code d'intégration Axeptio haut dans le <head>, pas dans le pied de page ni derrière un autre script qui attend lui-même. Puis préparez la connexion vers l'hôte du SDK, pour que la première requête ne paie pas le DNS et le TLS en plus de sa place dans la file :

<link rel="preconnect" href="https://static.axept.io">

Limitez ces indications aux hôtes Axeptio que vous voyez réellement dans le panneau Network, et à un ou deux au total : chaque preconnect ouvre une connexion qui entre elle aussi en concurrence.

Levier 4 : la police que personne ne voit

Le widget injecte une feuille de style pour sa propre police web. Si votre bandeau utilise la police de votre site, cette requête est du pur gaspillage : un fichier de plus dans la file, et tout script qui attend document.fonts.ready l'attend aussi. Sur la page mesurée, un affichage du bandeau qui attendait les polices perdait 600 ms en Slow 4G à cause d'une police jamais affichée.

Si, et seulement si, votre bandeau n'utilise pas cette police, vous pouvez retirer la feuille de style dès qu'elle est insérée :

// Retire la feuille de police du widget dès qu'elle est ajoutée.
// Seulement si le bandeau utilise votre propre police.
(function () {
  function drop(node) {
    if (node.nodeType !== 1) return;
    if (node.tagName === 'LINK' && /fonts\.axept\.io/.test(node.getAttribute('href') || '')) { node.remove(); return; }
    if (node.querySelectorAll) node.querySelectorAll('link[href*="fonts.axept.io"]').forEach(function (l) { l.remove(); });
  }
  new MutationObserver(function (mutations) {
    mutations.forEach(function (m) { m.addedNodes.forEach(drop); });
  }).observe(document.documentElement, { childList: true, subtree: true });
})();

Vérifiez dans le panneau Network qu'il ne reste aucune requête vers fonts.axept.io, et que le texte du bandeau s'affiche dans votre police. Si votre outil de report réécrit les scripts inline, excluez aussi celui-ci.

Si vous personnalisez le bandeau

Beaucoup de sites restylent le bandeau aux couleurs de leur marque. Trois règles évitent que cette personnalisation vous coûte plus tard :

• Ciblez des points d'accroche stables. Les noms de classes du widget sont générés et changent d'une version à l'autre. Ciblez des id comme #axeptio_btn_acceptAll, ou un conteneur par son contenu (par exemple div:has(> #axeptio_btn_acceptAll)), jamais une classe générée.
• Gardez les textes dans le back-office Axeptio. Ce qui est affiché doit être ce qu'Axeptio enregistre comme montré au visiteur. Réécrire les textes en JavaScript fait diverger l'écran et la preuve de consentement.
• Réagissez au choix via le SDK, pas via le balisage. Les éléments du bandeau peuvent rester dans la page après la réponse du visiteur, donc attendre qu'ils disparaissent peut durer indéfiniment. Écoutez plutôt le SDK :

// S'exécute une fois que le visiteur a fait son choix.
window._axcb = window._axcb || [];
window._axcb.push(function (sdk) {
  sdk.on('cookies:complete', function (choices) {
    // choices contient les services acceptés par le visiteur.
  });
});

Et si vous masquez le bouton cookies flottant, donnez aux visiteurs un autre moyen de revenir à leurs choix, affiché seulement quand le SDK l'expose :

<a href="#" id="manage-cookies" hidden>Manage cookies</a>
<script>
  window._axcb = window._axcb || [];
  window._axcb.push(function () {
    var link = document.getElementById('manage-cookies');
    if (typeof window.openAxeptioCookies !== 'function' || !link) return;
    link.hidden = false;
    link.addEventListener('click', function (e) { e.preventDefault(); window.openAxeptioCookies(); });
  });
</script>

Mesurez-le comme le vit un nouveau visiteur

• Une fenêtre de navigation privée, pour qu'aucun cookie de consentement ne soit posé ; avec un cookie, le bandeau ne s'affiche jamais et vous ne mesurez rien.
• Les DevTools avec le cache désactivé et un profil mobile bridé, Slow 4G compris.
• Ne touchez à rien, et notez quand le bandeau est à l'écran, par exemple avec les captures du panneau Performance.
• Cinq passages par profil et la médiane, comme expliqué dans notre guide sur les données de labo et de terrain.
• Testez aussi avec un bloqueur de contenu : si Axeptio est bloqué, la page doit rester utilisable et ne jamais attendre un bandeau qui ne viendra pas.

Avec Mantys Core

En résumé

• Le bandeau Axeptio est le bout d'une chaîne de petites requêtes, et sur une page chargée cette chaîne attend son tour.
• Sur la page mesurée, le bandeau mettait 16 s en Slow 4G ; avec moitié moins de requêtes, moins de 6 s.
• Allégez ce qui fait concurrence, ne reportez jamais l'outil de consentement, chargez-le haut dans le head, et supprimez la police que vous n'affichez pas.
• Personnalisez via des id stables et le back-office, et réagissez au choix via le SDK.
• Mesurez comme un nouveau visiteur : navigation privée, cache coupé, mobile bridé, aucune interaction, plusieurs passages.