Le CLS (Cumulative Layout Shift) mesure notamment les décalages de mise en page perçus par l’utilisateur, lors du chargement de celle-ci.
Cet article a pour but d'adresser les sujets suivants :
quels sont les formats Engage pouvant générer du CLS
pourquoi cela arrive
comment le corriger directement dans le Dashboard Poool Engage
comment valider l’intégration côté site
les bonnes pratiques recommandées
Pourquoi Engage peut-il provoquer du CLS ?
Engage s’affiche dans un iframe, chargé de manière asynchrone - il existe 2 cas de figure principaux pouvant générer un décalage visuel :
Cas 1 — Affichage inline dans une div sans hauteur réservée
L’élément Engage apparaît dans le flux du contenu, mais le container n’a pas de hauteur définie (idem pour la largeur, bien que cela soit généralement moins problématique).
➡️Lorsque l’iframe se charge, le contenu “pousse” le reste de la page et génère du CLS indésirable.
Exemples de formats concernés :
Widget Inline / à l'intérieur d'un article entre deux paragraphes de contenu
Widgets intégrés dans une zone du site dédiée en-dehors du contenu (ex: bloc promo en sidebar)
💡Quel correctif appliquer ?
<div id="engage-zone" style="min-height: 300px;"></div>
NB : la valeur est ici indicative et doit être ajustée en fonction de la hauteur réelle prise par votre élément.
Cas 2 — Modale plein écran sans hauteur fixe
Les modales pleine page nécessitent une hauteur forcée dans l’iframe pour éviter un recalcul de layout au moment de l’affichage.
➡️Sans une configuration depuis le dashboard (ou en "dur" sur la div du site accueillant l'iframe) avec height: 100vh, l’iframe se redimensionne dynamiquement en fonction des composants chargés depuis le dashboard.
Ce phénomène est généralement imperceptible pour l'utilisateur mais les outils de mesure des Core Vitals peuvent indiquer une valeur de CLS non-négligeable.
💡Quel correctif appliquer ?
Réserver l’espace nécessaire depuis :
Modifier les propriétés de l'élément > Configuration avancée > CSS conteneur parent > #p3-parent-frame {min-height :100vh;}
Voici un exemple de modale plein écran et mesure du CLS avant mise en place du correctif :
Après correctif, le CLS observé est très inférieur :
Checklist rapide pour éviter le CLS
Pour les formats inline
Une hauteur réservée est définie
Tester le rendu sur mobile (où le CLS est plus visible)
Pour les modales pleine page
height: 100vh;ajouté dans le CSS parentPas d'animation CSS qui pourraient modifier la taille de l’iframe
Test sur les devices lents / connexions lentes
Côté site éditeur
S’assurer que le container se situe dans une zone stable du DOM
Le container configuré pour accueillir un élément n’est pas dépendant d'un chargement en lazy-loading ou méthode similaire
Comment tester si un élément Engage génère du CLS ?
Localement via Chrome DevTools :
Ouvrir les outils de développement de votre navigateur;
Se rendre sur l'onglet Performance;
Recharger la page;
Repérer la section dédiée au CLS et les emplacements responsables ("shifts") dans le html.
Pour obtenir des données réelles issues d'un échantillon d'utilisateurs, plusieurs outils existent. Si votre site est éligible, Google met notamment à disposition le Chrome User Experience Report (CrUX)
Avec ces bonnes pratiques, Poool Engage n’introduit aucun CLS perceptible et reste conforme aux recommandations Core Web Vitals !