Le CLS se produit lorsque du contenu visible bouge après avoir déjà été peint, décalant ce que l'utilisateur regardait. La cause est presque toujours du contenu qui se charge sans espace réservé.
Le CLS se produit lorsque du contenu visible bouge après avoir déjà été peint, décalant ce que l'utilisateur regardait. La cause est presque toujours du contenu qui se charge sans espace réservé.
top, height) au lieu de transform.width/height (ou aspect-ratio) pour que l'espace soit réservé avant le chargement :<img src="/photo.jpg" width="1200" height="800" alt="..."> <!-- réserve la boîte -->
.hero { aspect-ratio: 16 / 9; } /* réserve le ratio pour un média responsive */
font-display: optional ou swap plus size-adjust/preload pour minimiser le reflow à l'arrivée de la web font.position: absolute) ou poussez depuis le bas.transform/opacity — elles sont composées et ne déclenchent pas de layout.Le CLS est le Core Web Vital le plus corrigeable — c'est généralement une poignée de dimensions manquantes. Les recruteurs s'en servent pour tester si vous comprenez le pipeline de rendu : réserver l'espace en amont signifie que le navigateur n'a jamais à refaire la mise en page, ce qui explique pourquoi transform l'emporte sur l'animation de top.
Une bibliothèque de questions d'entretien IT avec des réponses détaillées — du Junior au Senior.
Faire un don