Minimiser le décalage de la mise en page

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. Cependant, la nature dynamique des annonces peut entraîner des décalages de mise en page inattendus, qui ont un effet négatif sur l'expérience utilisateur et peuvent entraîner de sérieux 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 son chargement. 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, celles-ci peuvent finir par déplacer le contenu visible non publicitaire une fois qu'elles sont ajoutées à la page.

Lorsque vous utilisez des tags Google Publisher Tag, un décalage de mise en page peut se produire à certains moments du cycle de vie de l'annonce:

1. Lorsque display() est appelé. Un emplacement peut se développer ou se réduire, selon sa configuration.
2. Lors de l'affichage du contenu de l'annonce. 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.
3. 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 fentes situées en haut de la fenêtre d'affichage initiale (au-dessus du pli). 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é.

Mesure du 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.

Important :Les normes Core Web Vitals recommandent que le CLS du 75e centile de votre site soit inférieur à 0,1 pour être considéré comme "satisfaisant". Cette norme couvre tous les décalages de mise en page sur votre site, et pas seulement ceux causés par les annonces.

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 de la page, qui sont souvent difficiles ou impossibles à simuler avec des tests synthétiques.

Remarque :Vous pouvez également utiliser l'API Layout Instability pour mesurer manuellement le CLS sur le terrain.

Réduire le décalage de mise en page

Le seul moyen d'éviter le décalage de mise en page consiste à réserver un espace suffisant pour un espace publicitaire donné à l'aide de 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.

Attention :Tenez compte des paramètres d'expansion et de contraction des espaces publicitaires, qui peuvent affecter la plage de tailles pouvant être diffusées dans vos espaces publicitaires.

Choisir la bonne approche

Réserver de l'espace à 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 générer un espace vide supplémentaire autour de l'annonce, dans le cas où une création d'une taille inférieure à la taille réservée serait 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 des espaces vides en trop.

En revanche, vous pouvez réserver de l'espace à la plus petite taille configurée pour la diffusion afin d'éviter un espace vide excessif autour de votre annonce. Cette option est utile si votre espace publicitaire contient généralement des créations plus petites ou si toutes les tailles acceptées par 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 un équilibre entre les espaces vides et les décalages de mise en page, vous pouvez réserver un espace "moyen" pour vos espaces publicitaires. Par exemple, la réservation verticale de 100px entraîne un petit espace vide lors de la diffusion d'une création 320x50, mais réduit le score CLS par rapport à la réservation d'espace vide. Vous devrez tester différentes tailles pour trouver l'équilibre idéal pour votre propre site.

Lorsque vous déterminez l'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. Voici quelques exemples pour mieux illustrer cette approche.

Remarque :Les exemples présentés ici n'illustrent qu'une partie du processus de détermination de l'espace à réserver. Après avoir apporté des modifications, veillez à examiner les données sur le terrain et à continuer à effectuer des ajustements jusqu'à ce que le CLS au 75e percentile de votre site atteigne le benchmark de 0,1.

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 espace publicitaire via les propriétés CSS min-height et min-width:

<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>

Les attributs min-height et min-width vous permettent de réserver un espace minimal 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é si une création plus grande est diffusée.

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. À la place, 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 atténuer les effets des décalages de mise en page lorsque vous utilisez des espaces publicitaires fluides, nous vous recommandons de procéder comme suit:

• N'utilisez la taille fluid que 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, les espaces publicitaires réduits et dépliants peuvent entraîner des décalages de mise en page à deux moments différents du cycle de vie de l'annonce.

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 espaces publicitaires susceptibles d'être remplis doivent toujours commencer par développés.
• Les espaces publicitaires qui ont peu de chances de se remplir doivent toujours commencer par être réduits.

Pour obtenir un exemple d'implémentation, consultez l'exemple Réduire les emplacements d'annonces vides.