Comment améliorer le CLS (Cumulative Layout Shift) dans Webflow ?
Apprenez à corriger le CLS dans Webflow sous 0,1 : dimensions d'images, transform CSS, banneaux et fonts.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment corriger le CLS (Cumulative Layout Shift) dans Webflow. Le CLS mesure les décalages visuels inattendus : Google considère qu'il doit être inférieur à 0,1.
| Cause fréquente de CLS | Solution Webflow |
|---|---|
| Images sans dimensions définies | Définir width + height ou aspect-ratio |
| Fonts qui remplacent la font système | font-display: swap + preload |
| Bandeaux cookies/banners qui apparaissent | Réserver l'espace via min-height ou position fixed |
| Embeds tiers sans dimensions | Conteneur avec aspect-ratio fixe |
| Animations qui déplacent des éléments | Utiliser transform plutôt que top/left/margin |
1. Identifiez les éléments responsables du CLS
Dans Chrome DevTools > Performance, enregistrez le chargement de la page. Les éléments avec un CLS élevé apparaissent en rouge dans le rapport Layout Shift. PageSpeed Insights indique également les éléments responsables dans la section "Avoid large layout shifts".
2. Définissez des dimensions sur toutes vos images
Dans Webflow, utilisez l'option Aspect Ratio sur le conteneur d'image plutôt que de laisser l'image définir sa propre hauteur. Exemple : un conteneur en width 100% + aspect-ratio 16/9 réserve l'espace avant le chargement de l'image.
3. Utilisez transform pour vos animations
Les animations qui modifient top, left, margin ou padding déclenchent un recalcul du layout et contribuent au CLS. Remplacez-les par transform: translateY() ou transform: translateX() qui ne modifient pas le flux du document.
4. Gérez l'apparition des banneaux et pop-ups
Les banneaux cookies et pop-ups qui poussent le contenu vers le bas sont une source majeure de CLS. Utilisez position: fixed pour qu'ils flottent au-dessus du contenu sans le déplacer.
Conclusion
Un CLS inférieur à 0,1 est indispensable pour une bonne expérience utilisateur. Cas d'usage :
- Pages avec images chargées dynamiquement
- Sites avec banneaux cookies ou pop-ups
- Pages avec animations d'entrée sur les éléments
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
