Un décalage de mise en page se produit lorsqu'un élément visible de votre page change de position ou de taille, ce qui affecte la position du contenu qui l'entoure. Parfois, le décalage est intentionnel, par exemple lorsqu'un conteneur se développe en raison d'une action de l'utilisateur. Toutefois, la nature dynamique des annonces peut entraîner des déplacements de mise en page inattendus, qui ont un impact négatif sur l'expérience utilisateur et peuvent entraîner de graves problèmes d'usabilité.
Ce guide explique comment mesurer et minimiser le décalage de mise en page lorsque vous utilisez des balises Google Publisher Tag (GPT).
Comment les annonces provoquent un décalage de la mise en page
Les annonces sont généralement demandées de manière asynchrone et ajoutent dynamiquement du contenu à votre page pendant ou après le chargement de la page. Pendant l'extraction des annonces, le reste de la page continue de se charger et le contenu autre que les annonces peut devenir visible pour l'utilisateur. Si vous ne réservez pas suffisamment d'espace pour les annonces en cours de chargement, elles peuvent finir par déplacer le contenu visible autre que les annonces lorsqu'elles sont finalement ajoutées à la page.
Lorsque vous utilisez des tags d'emplacement publicitaire Google, plusieurs points du cycle de vie de l'annonce peuvent entraîner un décalage de mise en page:
- Lorsque
display()est appelé. Un emplacement peut se développer ou se réduire, selon la configuration. - Lorsque le contenu de l'annonce est affiché Un emplacement peut être redimensionné si une annonce fluide est diffusée ou si l'espace disponible est insuffisant. À ce stade, un emplacement peut également se développer ou se réduire, selon la configuration.
- Après l'affichage du contenu de l'annonce. Certains types de créations sont conçus pour se développer après leur apparition sur la page.
Gardez à l'esprit que plus un espace publicitaire est haut dans la fenêtre d'affichage, plus il peut déplacer du contenu. Faites particulièrement attention aux emplacements situés en haut de la fenêtre d'affichage initiale (au-dessus de la ligne de flottaison). Ces emplacements peuvent entraîner un décalage de mise en page disproportionné, car ils sont plus susceptibles d'être visibles lorsque leur contenu publicitaire est chargé.
Mesurer le décalage de mise en page
Le Cumulative Layout Shift (CLS) est une métrique Core Web Vitals que vous pouvez utiliser pour quantifier l'impact des décalages de mise en page sur votre site, à la fois en laboratoire et sur le terrain.
Au laboratoire
Les outils d'atelier mesurent le CLS de manière synthétique. Cela signifie qu'ils ne reposent pas sur une interaction réelle avec l'utilisateur, ce qui les rend particulièrement adaptés aux workflows d'intégration continue et de développement local. Toutefois, ces outils ne mesurent généralement que les performances lors du chargement de la page et sont limités dans les conditions qu'ils peuvent simuler. Par conséquent, les valeurs indiquées peuvent être inférieures à celles d'un utilisateur réel.
Les audits d'annonces d'éditeur pour Lighthouse sont un outil qui permet de mesurer le CLS spécifiquement attribuable aux annonces GPT. Pour en savoir plus, consultez la documentation d'audit Réduire le décalage de la mise en page lié aux annonces.
Chrome DevTools peut également être configuré pour mettre en évidence les changements de mise en page lorsque vous naviguez sur votre site. Vous pouvez ainsi identifier manuellement les décalages de mise en page qui se produisent à proximité des espaces publicitaires de votre page.
Sur le terrain
Les outils sur le terrain mesurent le CLS ressenti par des utilisateurs réels lorsqu'ils interagissent avec votre site. Ce processus est communément appelé surveillance des utilisateurs réels (RUM). Le RUM vous permet d'observer l'impact des facteurs réels sur le CLS, tels que les fonctionnalités de l'appareil, les conditions du réseau, les interactions utilisateur et la personnalisation des pages, qui sont souvent difficiles ou impossibles à simuler avec des tests synthétiques.
Réduire le décalage de mise en page
Le seul moyen garanti d'éviter le décalage de mise en page est de réserver une quantité d'espace suffisante pour un emplacement d'annonce donné à l'aide du CSS. Le moyen le plus efficace d'y parvenir consiste à définir une hauteur et une largeur fixes directement sur l'emplacement d'annonce div. Toutefois, bien que cette approche fonctionne bien pour les emplacements d'annonces statiques de taille fixe, des scénarios plus complexes peuvent nécessiter une approche plus nuancée. Certains scénarios courants sont expliqués dans les sections suivantes.
Espaces publicitaires multitaille
Pour les emplacements d'annonces qui acceptent plusieurs tailles, nous vous recommandons l'une des approches suivantes:
- Réservez de l'espace pour la plus grande taille configurée pour la diffusion.
- Réservez de l'espace pour la plus petite taille configurée pour la diffusion.
- Réservez de l'espace pour la taille la plus susceptible d'être diffusée, déterminée en examinant les données historiques de remplissage des rapports Google Ad Manager.
Choisir la bonne approche
Réserver de l'espace pour la plus grande taille configurée pour la diffusion est le moyen le plus efficace d'éliminer les décalages de mise en page. Toutefois, cette méthode peut entraîner un espace vide supplémentaire autour de l'annonce si une création plus petite que la taille réservée est diffusée. Réduire l'espace publicitaire pour qu'il corresponde à la taille de la création diffusée entraînerait un décalage de mise en page supplémentaire. Il est donc recommandé de ne pas le faire. À la place, vous pouvez utiliser le centrage vertical et horizontal pour réduire l'impact visuel d'un espace vide excessif.
En revanche, réserver de l'espace pour la plus petite taille configurée pour la diffusion évite d'avoir trop d'espace vide autour de votre annonce. Cette option peut être appropriée si votre espace publicitaire est généralement rempli de créations plus petites ou si toutes les tailles compatibles avec l'espace sont similaires. Toutefois, cette méthode entraîne un décalage de mise en page si une création plus grande que la taille réservée est diffusée (bien que ces décalages soient généralement plus faibles que si aucun espace n'est réservé).
Pour trouver le juste équilibre entre l'espace vide et les décalages de mise en page, vous pouvez réserver une quantité d'espace "moyenne" pour vos emplacements publicitaires. Par exemple, réserver 100px verticalement entraîne un petit espace vide lorsqu'une création 320x50 est diffusée, mais réduit le score CLS par rapport à la non-réservation d'espace. Vous devrez tester différentes tailles pour trouver l'équilibre optimal pour votre propre site.
Lorsque vous déterminez la quantité d'espace à réserver pour un emplacement donné, examiner l'historique des données de remplissage des rapports Google Ad Manager peut vous aider à prendre une décision plus éclairée. Pour mieux comprendre, examinons quelques exemples.
Exemple 1
| Taille de la création (diffusée) | Impressions générées par l'ad server (%) |
|---|---|
300x250 |
70 % |
320x50 |
30 % |
Dans ce cas, réserver 250px verticalement peut considérablement réduire le CLS, car la majorité des créations diffusées sont 300x250.
Exemple 2
| Taille de la création (diffusée) | Impressions générées par l'ad server (%) |
|---|---|
970x90 |
60 % |
728x90 |
10 % |
320x50 |
20 % |
728x250 |
5 % |
300x250 |
5 % |
Dans ce cas, la majorité des annonces mesurent au maximum 90px de haut. Par conséquent, réserver 90px verticalement devrait éviter un décalage de mise en page la plupart du temps.
Réserver un espace
Nous vous recommandons de résoudre ce problème en spécifiant la taille de votre emplacement d'annonce via les propriétés CSS min-height et min-width:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
L'utilisation des attributs min-height et min-width vous permet de réserver une quantité minimale d'espace pour votre espace publicitaire, tout en permettant au navigateur d'augmenter la taille du conteneur si nécessaire. Cela garantit qu'aucun contenu n'est coupé en cas de diffusion d'une création plus grande.
Vous pouvez combiner cette technique avec des requêtes média CSS pour spécifier des valeurs minimales différentes pour différentes tailles d'écran:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
Il est préférable d'éviter de réserver de l'espace avec JavaScript, car cela peut entraîner un décalage de mise en page au moment du chargement du script. Réserver de l'espace avec CSS évite ce risque.
Espaces publicitaires fluides
Les emplacements publicitaires fluides ne spécifient pas un ensemble fixe de tailles compatibles. Au lieu de cela, ces emplacements sont redimensionnés automatiquement pour s'adapter au contenu de la création qui leur est diffusé, ce qui leur permet d'accepter des créations de taille indéterminée. Par conséquent, il n'est pas possible de réserver de l'espace pour ces emplacements avant de demander du contenu publicitaire, et les annonces de taille fluide entraînent toujours des décalages de mise en page.
Pour limiter les effets des changements de mise en page lorsque vous utilisez des emplacements d'annonces fluides, nous vous recommandons de procéder comme suit:
- N'utilisez la taille
fluidque pour les emplacements situés sous le pli. - Récupérez les emplacements fluides le plus tôt possible pour réduire les risques qu'un utilisateur les fasse défiler avant qu'ils ne soient redimensionnés.
Réduire et développer les espaces publicitaires
La méthode collapseEmptyDivs() vous permet de réduire les éléments div de l'espace publicitaire afin qu'ils n'occupent pas d'espace sur la page lorsqu'il n'y a pas de contenu publicitaire à afficher. Toutefois, cette fonctionnalité doit être utilisée avec prudence, car elle peut entraîner des décalages de mise en page involontaires. Comme indiqué dans la section précédente, le repliage et le développement des emplacements d'annonces peuvent entraîner des changements de mise en page à deux moments différents du cycle de vie des annonces.
Si vous devez utiliser cette fonctionnalité, vous pouvez réduire l'impact des changements de mise en page en utilisant les données historiques de remplissage des rapports Ad Manager pour mettre en œuvre les bonnes pratiques suivantes:
- Les emplacements susceptibles d'être remplis doivent toujours être développés au départ.
- Les espaces publicitaires qui ne sont pas susceptibles d'être remplis doivent toujours être repliés au départ.
Pour obtenir un exemple d'implémentation, consultez l'exemple Réduire les emplacements d'annonces vides.