Article sans layout shift
Cette page démontre comment éviter le CLS en réservant l'espace pour les éléments dynamiques. Notez comment le bouton ci-dessous ne bouge jamais, même quand les publicités et images apparaissent.
Espace publicitaire réservé (120px)
PUBLICITÉ
Chargée dans l'espace réservé !
Le secret est simple : définir une hauteur fixe ou un aspect-ratio pour tous les éléments qui se chargent dynamiquement.
Regardez l'image ci-dessous : elle a un aspect-ratio de 16:9 défini en CSS. Même avant que l'image charge, l'espace est réservé.
Espace publicitaire réservé (120px)
OFFRE SPÉCIALE
L'espace était déjà réservé !
✅ Techniques utilisées pour éviter le CLS
- Espaces publicitaires réservés : Hauteur fixe de 120px
- aspect-ratio :
aspect-ratio: 16 / 9;pour les images - width et height sur les images pour calculer le ratio
- Skeleton loaders : Animation pendant le chargement
- position: fixed pour le cookie banner (pas de push)
- Transitions opacity au lieu de height pour les apparitions
Comparaison des approches
❌ Mauvais (cause CLS)
<div class="ad-zone"> <!-- Pub injectée plus tard --> </div> <img src="..." /> <!-- Pas de dimensions -->
✅ Bon (pas de CLS)
<div class="ad-zone"
style="height: 120px;">
<!-- Espace réservé -->
</div>
<img src="..."
width="800" height="450"
style="aspect-ratio: 16/9" />