Minimiser le décalage de la mise en page

Un décalage de mise en page se produit lorsqu'un élément visible sur votre page change de position ou de taille, ce qui affecte la position du contenu qui l'entoure. Parfois, ce changement est intentionnel, par exemple lorsqu'un conteneur se développe à la suite d'une action de l'utilisateur. Cependant, la nature dynamique des annonces peut entraîner des décalages de mise en page inattendus qui peuvent avoir un impact négatif sur l'expérience utilisateur et nuire gravement à la facilité d'utilisation.

Ce guide explique comment mesurer et minimiser le décalage de mise en page lorsque vous utilisez des tags Google Publisher Tag (GPT).

Comment les annonces provoquent un décalage de mise en page

Les annonces sont généralement demandées de manière asynchrone et ajoutent du contenu à votre page de manière dynamique pendant ou après le chargement de celle-ci. Pendant la récupération des annonces, le reste de la page continue de se charger, et l'utilisateur peut voir du contenu autre que des annonces. Si vous ne réservez pas suffisamment d'espace pour le chargement des annonces, celles-ci risquent de déplacer les contenus autres que les annonces visibles lorsqu'ils seront finalement ajoutés à la page.

Lorsque vous utilisez des tags Google Publisher Tag, un décalage de mise en page peut se produire dans le cycle de vie des annonces:

1. Lorsque la méthode display() est appelée. Un emplacement peut se développer ou se réduire, selon la configuration.
2. Lorsque le contenu de l'annonce s'affiche. Un emplacement peut être redimensionné s'il diffuse une annonce fluide ou si l'espace disponible est insuffisant. Un emplacement peut également se développer ou se réduire à ce stade, en fonction de 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 avoir été affichés sur la page.

N'oubliez pas que plus l'espace publicitaire se trouve en hauteur dans la fenêtre d'affichage, plus le contenu qu'il risque de déplacer est important. Faites particulièrement attention aux emplacements situés dans la partie supérieure de la fenêtre d'affichage initiale (au-dessus de la ligne de flottaison). Ces espaces peuvent entraîner un décalage de mise en page disproportionné, car ils sont plus susceptibles d'être visibles lorsque le contenu de leur annonce est chargé.

Mesurer le décalage de mise en page

Le CLS (Cumulative Layout Shift) est une métrique des signaux Web essentiels que vous pouvez utiliser pour quantifier l'impact des décalages de mise en page sur votre site, à la fois dans l'atelier et sur le terrain.

Important :Les normes pour les signaux Web essentiels 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, pas seulement ceux causés par les annonces.

Au laboratoire

Les outils de l'atelier mesurent le CLS de manière synthétique. Ils ne reposent donc pas sur une interaction réelle des utilisateurs, ce qui les rend adaptés aux workflows d'intégration continue et de développement local. Toutefois, ces outils ne mesurent généralement les performances que lors du chargement de la page et sont limités dans les conditions qu'ils peuvent simuler. Par conséquent, les valeurs enregistrées peuvent être inférieures à ce qu'un utilisateur réel ferait.

Les audits d'annonces d'éditeur pour Lighthouse permettent de mesurer le CLS spécifiquement attribuable aux annonces GPT. Pour en savoir plus, consultez la documentation de l'audit Réduire le décalage de mise en page lié aux annonces.

Vous pouvez également configurer les outils pour les développeurs Chrome pour mettre en évidence les décalages de mise en page lorsque vous parcourez 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 pratiques mesurent le CLS rencontré par les utilisateurs réels lorsqu'ils interagissent avec votre site. Ce processus est communément appelé surveillance des utilisateurs réels (RUM, Real User Monitoring ou surveillance des utilisateurs réels). Le RUM vous permet d'observer comment le CLS est affecté par des facteurs concrets, tels que les fonctionnalités de l'appareil, les conditions du réseau, les interactions de l'utilisateur et la personnalisation des pages, qui sont souvent difficiles, voire impossibles à simuler avec des tests synthétiques.

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

Réduire le décalage de mise en page

Le seul moyen d'éviter un décalage de mise en page est de réserver un espace suffisant pour un espace publicitaire donné à l'aide de CSS. Pour ce faire, il est plus efficace de définir une hauteur et une largeur fixes directement sur l'espace publicitaire div. Toutefois, même si cela fonctionne bien pour les espaces publicitaires 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 multitailles

Pour les espaces publicitaires qui acceptent plusieurs tailles, nous 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, en fonction de l'historique des données de remplissage issues des rapports Google Ad Manager.

Attention :Tenez compte de l'expansion de l'espace publicitaire et des paramètres de contraction, qui peuvent avoir une incidence sur les tailles pouvant être diffusées dans vos espaces publicitaires.

Choisir la bonne approche

Le moyen le plus efficace d'éliminer les décalages de mise en page consiste à réserver de l'espace pour la plus grande taille configurée pour la diffusion. Toutefois, cette méthode peut générer un espace vide supplémentaire autour de l'annonce si une création dont la taille est inférieure à la taille réservée est diffusée. Si vous réduisez l'espace publicitaire pour qu'il corresponde à la taille de la création diffusée, vous risquez d'entraîner un décalage de mise en page supplémentaire. Il est donc recommandé d'éviter cela. À la place, un centrage vertical et horizontal peut être utilisé pour réduire l'impact visuel de l'excès d'espaces vides.

En revanche, le fait de réserver de l'espace pour la plus petite taille configurée pour la diffusion permet d'éviter l'excès d'espace vide autour de votre annonce. Cette option peut être intéressante si votre espace publicitaire est généralement rempli de créations plus petites ou dans les cas où toutes les tailles acceptées par l'espace sont similaires. Cependant, 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 petits par rapport à l'absence de réservation d'espace).

Pour trouver le juste équilibre entre les espaces vides et les décalages de mise en page, vous pouvez réserver une quantité "moyenne" d'espace 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 cela réduit le score CLS au lieu de ne réserver aucun espace. Vous devez tester différentes tailles afin de trouver le meilleur équilibre pour votre site.

Lorsque vous déterminez l'espace à réserver pour un emplacement donné, l'analyse de l'historique des données de remplissage issues des rapports Google Ad Manager peut vous aider à prendre une décision éclairée. Pour illustrer cela, nous vous conseillons d'étudier quelques exemples.

Remarque :Les exemples présentés ici ne illustrent qu'une partie du processus permettant de déterminer l'espace à réserver. Une fois les modifications effectuées, veillez à examiner les données réelles et à continuer d'effectuer des ajustements jusqu'à ce que le CLS du 75e centile de votre site atteigne le benchmark de 0,1.

Exemple 1

Taille de la création (diffusée)	Impressions de l'ad server (%)
300x250	70 %
320x50	30%

Dans ce cas, la réservation verticale de 250px peut réduire considérablement le CLS, car la majorité des créations diffusées sont de type 300x250.

Exemple 2

Taille de la création (diffusée)	Impressions de l'ad server (%)
970x90	60 %
728x90	10 %
320x50	20%
728x250	5%
300x250	5%

Dans ce cas, la majorité des annonces ne mesurent pas plus de 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 de l'espace

Nous vous recommandons de résoudre ce problème en spécifiant la taille de votre espace publicitaire à l'aide des 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 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 tronqué lorsqu'une création plus grande est diffusée.

Vous pouvez combiner cette technique avec des requêtes média CSS afin de spécifier différentes valeurs minimales pour différentes tailles d'écran:

@media screen and (max-width: 960px) {
  #ad-slot {
    min-height: 100px;
  }
}

Évitez 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 permet d'éviter ce risque.

Espaces publicitaires fluides

Les espaces publicitaires fluides ne sont associés à aucun ensemble fixe de tailles compatibles. Ces espaces sont automatiquement redimensionnés pour s'adapter au contenu qui leur est diffusé et sont ainsi compatibles avec les créations dont la taille est indéterminée. Par conséquent, vous ne pouvez pas réserver de l'espace pour ces espaces avant de demander le contenu de l'annonce. De plus, 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 en dessous de la ligne de flottaison.
• Extrayez les emplacements fluides le plus tôt possible pour réduire la probabilité qu'un utilisateur les fasse défiler avant qu'ils ne soient redimensionnés.

Réduction et expansion des espaces publicitaires

La méthode collapseEmptyDivs() vous permet de réduire des é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 introduire des décalages de mise en page involontaires. Comme indiqué dans la section précédente, les espaces publicitaires réduits et développés peuvent entraîner des décalages de mise en page à deux étapes différentes 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 de remplissage historiques des rapports Ad Manager pour appliquer les bonnes pratiques suivantes:

• Les emplacements susceptibles d'être remplis doivent toujours commencer par développé.
• Les espaces peu susceptibles d'être remplis doivent toujours commencer par être réduits.

Pour obtenir un exemple de mise en œuvre, consultez l'exemple Réduire les espaces publicitaires vides.