Le CLS : réserver la place avant que l’image arriveCLS: reserve the space before the image lands

Vous commencez à lire un paragraphe, une image finit de charger au-dessus, et le texte descend de deux centimètres. Vous perdez votre ligne. C’est ce que mesure le CLS, et c’est toujours évitable.You start reading a paragraph, an image finishes loading above it, and the text drops two centimetres. You lose your line. That is what CLS measures, and it is always avoidable.

Source numéro un : les images sans dimensionsCulprit one: images with no dimensions

Une image sans attributs de largeur et de hauteur occupe zéro pixel tant qu’elle n’est pas chargée, puis prend brusquement sa place. Déclarer les dimensions réelles suffit : le navigateur calcule le rapport, réserve le bloc, et rien ne bouge. C’est une correction d’une minute pour un gain visible.An image with no width and height attributes occupies zero pixels until it loads, then abruptly claims its space. Declaring the real dimensions is enough: the browser computes the ratio, reserves the block, and nothing moves. It is a one-minute fix for a visible gain.

Source numéro deux : les policesCulprit two: fonts

Le passage de la police de repli à la police définitive change la largeur des mots, donc les retours à la ligne, donc la hauteur du bloc. Le remède tient dans le choix d’une police de repli aux proportions voisines, et dans l’ajustement des métriques de substitution quand l’écart reste visible.Swapping from the fallback to the final font changes word widths, so line breaks, so block height. The remedy lies in choosing a fallback with similar proportions, and in tuning the substitution metrics when the gap is still visible.

Source numéro trois : tout ce qui s'insère après coupCulprit three: everything inserted afterwards

• Les bannières publicitaires, si leur emplacement n’a pas de hauteur réservée.Ad banners, when their slot has no reserved height.
• Les bandeaux de consentement qui poussent le contenu au lieu de le recouvrir.Consent banners that push the content instead of covering it.
• Les messages d’alerte ajoutés en haut de page par un script.Alert bars added at the top of the page by a script.
• Les contenus intégrés — vidéo, carte, publication sociale — qui arrivent à leur propre rythme.Embedded content — video, map, social post — arriving at its own pace.

Dans tous les cas, le remède est le même : réserver la place dans la mise en page avant que l’élément arrive, quitte à afficher un rectangle vide pendant une fraction de seconde.In every case the remedy is the same: reserve the space in the layout before the element arrives, even if that means showing an empty rectangle for a fraction of a second.

Source numéro quatre : les animations mal choisiesCulprit four: badly chosen animations

Une animation qui modifie la hauteur, la marge ou la position d’un élément déplace tout ce qui suit, et compte dans le score. Une animation qui ne touche qu’à la transformation et à l’opacité ne déplace rien — et se trouve être aussi celle que le navigateur sait rendre le plus efficacement. Les deux exigences vont dans le même sens.An animation that changes an element’s height, margin or position moves everything after it, and counts towards the score. An animation that only touches transform and opacity moves nothing — and happens to be the one the browser renders most efficiently. Both requirements point the same way.

Animer la transformation plutôt que la position, c’est à la fois plus fluide et neutre pour le score. Il est rare qu’une contrainte de performance et une contrainte de confort pointent aussi clairement dans la même direction.Animating transform rather than position is both smoother and neutral for the score. It is rare for a performance constraint and a comfort constraint to point this clearly in the same direction.