Prévenir les sauts de mise en page

Une image qui apparaît après le texte, une bannière chargée tardivement ou une police qui change les retours à la ligne peuvent déplacer le contenu déjà affiché. Sur la page de l’atelier, cela peut faire remonter le bloc de contact au moment où vous essayez de le sélectionner. Vous allez identifier ces sources de déplacement et réserver leur espace avant leur chargement.

Comprendre le déplacement de la mise en page

Un saut de mise en page se produit lorsqu’un élément visible change de position sans action de votre part. Une image sans espace réservé en est un cas courant : le navigateur affiche d’abord le texte suivant, puis le repousse lorsque les dimensions de l’image sont connues. Les changements de police, les contenus injectés et les publicités peuvent produire le même effet.

Le CLS (Cumulative Layout Shift) est une mesure de la stabilité visuelle. Il agrège les déplacements inattendus observés pendant la durée de vie de la page ; ce n’est donc pas une mesure du temps de chargement. Pour agir efficacement, repérez les éléments qui bougent et la cause du changement, au lieu de masquer le déplacement avec une animation ou une règle isolée.

Réserver l’espace des images

La méthode la plus fiable consiste à fournir les dimensions intrinsèques de l’image dans le HTML. Le navigateur peut alors calculer sa proportion avant même que le fichier soit téléchargé. Une règle CSS avec aspect-ratio permet aussi de fixer une proportion sur un conteneur ou une image ; associez-la à width: 100% et height: auto pour conserver un redimensionnement proportionnel.

<img class="atelier__image" src="images/atelier-jardinage.jpg" width="1200" height="800" alt="Participants préparant des semis pendant l’atelier">

:root {
    --couleur-texte: #26352b;
    --espace-moyen: 1.5rem;
}

.atelier__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.conseils__illustration {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

Les valeurs width et height de l’image indiquent ici une proportion de 3:2. La règle CSS reprend cette proportion et empêche l’espace de varier pendant le chargement. Si la source réelle n’a pas ce cadrage, vérifiez le rendu de object-fit: cover : l’image peut être recadrée, mais son emplacement reste stable.

Stabiliser les contenus et les polices

Un bloc de contact alimenté par une API peut apparaître après le rendu initial. Si sa hauteur n’est pas anticipée, tout ce qui suit descend à son insertion. Lorsque le contenu a une taille prévisible, réservez-lui un emplacement avec une hauteur minimale ; si cette hauteur varie selon les données, prévoyez une estimation réaliste plutôt qu’une grande zone vide permanente.

.contact__contenu {
    min-height: 8rem;
}

.contact__message {
    margin-block: var(--espace-moyen);
    color: var(--couleur-texte);
}

Les polices peuvent elles aussi changer la géométrie du texte : une police de remplacement et la police finale n’ont pas nécessairement les mêmes largeurs de caractères. Un titre peut alors se répartir sur un nombre différent de lignes et repousser les horaires ou les conseils. La réservation des polices et la stratégie de chargement seront traitées dans la leçon consacrée à @font-face ; pour cette leçon, vérifiez si le changement de police coïncide avec le déplacement observé.

Mesurer avant de corriger

Dans les outils de développement du navigateur, ouvrez le panneau Performance, lancez un enregistrement puis rechargez la page. Examinez les événements de décalage de mise en page (Layout Shift) et sélectionnez-les pour repérer les éléments concernés. Recommencez après une correction, avec le cache désactivé si nécessaire, afin de comparer les mêmes conditions de chargement.

Une session locale ne suffit pas toujours : les ressources peuvent se charger dans un ordre différent selon le réseau ou l’appareil. Répétez les observations avec un cache froid et surveillez les images, les contenus différés et les blocs qui changent de taille. Distinguez un déplacement inattendu d’un changement déclenché par une action de l’utilisateur, par exemple l’ouverture volontaire d’un panneau.

À retenir

• Fournissez les dimensions intrinsèques des images pour que le navigateur connaisse leur proportion avant leur téléchargement.
• Utilisez aspect-ratio pour réserver un cadrage cohérent et vérifiez le résultat de object-fit.
• Anticipez la taille des contenus insérés après le rendu lorsque leur hauteur est prévisible.
• Repérez les événements Layout Shift dans le panneau Performance et comparez les mesures avant et après correction.

Dans la prochaine leçon, vous assemblerez les zones de la page de l’atelier dans une feuille de production unique.