Pourquoi la page saute pendant le chargement

Ce qu'est le décalage de mise en page

Le décalage de mise en page, c'est du contenu qui bouge après avoir été dessiné. Le navigateur peint la page avec les informations qu'il a, puis une image arrive à une taille qu'il ignorait, et tout ce qui se trouve dessous descend pour lui faire place. Ou une police se charge et chaque ligne se recompose. Ou une barre d'annonce s'insère en haut et repousse la page de cinq centimètres.

On le mesure sous le nom de Cumulative Layout Shift, la somme de chaque mouvement inattendu pendant le chargement, et un score inférieur à 0,1 est considéré comme bon. Les visiteurs ne connaissent pas le chiffre. Ils savent qu'ils ont touché un lien et atteint celui du dessous.

Cause un : des images sans dimensions

De loin la cause la plus courante. Une balise img avec un src et rien d'autre ne dit rien au navigateur sur la forme de l'image, il réserve donc zéro hauteur jusqu'au téléchargement du fichier. Le correctif tient en deux attributs : width et height. Ils ne forcent pas l'image à cette taille à l'écran ; avec le CSS habituel max-width 100% et height auto, ils indiquent simplement au navigateur le rapport d'aspect, et il réserve la bonne boîte avant l'arrivée du premier octet.

WordPress connaît déjà ces chiffres pour chaque fichier de la médiathèque. Ouvrez n'importe quelle image dans Médias et le panneau de détails affiche ses dimensions, 1920 par 1080 pixels par exemple. Les images placées via l'éditeur reçoivent automatiquement width et height dans la balise.

Là où cela dérape, c'est le thème : les images principales définies via un constructeur de pages, un champ du personnalisateur ou un gabarit écrit à la main ne sortent souvent que l'URL. Dans un gabarit, demandez l'image à WordPress au lieu de construire la balise à la main, et les attributs viennent avec :

<?php
// Right: WordPress writes src, srcset, sizes, width, height, and alt for you.
echo wp_get_attachment_image( $hero_id, 'full', false, array(
  'class'         => 'hero-img',
  'fetchpriority' => 'high',
  'loading'       => 'eager',
) );

// If you must build the tag yourself, take the real dimensions from the library:
$img = wp_get_attachment_image_src( $hero_id, 'full' ); // [ url, width, height ]
printf(
  '<img src="%s" width="%d" height="%d" alt="%s" />',
  esc_url( $img[0] ), $img[1], $img[2], esc_attr( get_post_meta( $hero_id, '_wp_attachment_image_alt', true ) )
);

Puis la seule ligne de CSS qui fait que les attributs se comportent bien sur toutes les tailles d'écran :

Le CSS qui va avec

Avec width et height présents, cette règle laisse l'image s'adapter à son conteneur pendant que le navigateur garde la boîte réservée à la bonne forme. La plupart des thèmes l'ont déjà ; vérifiez que rien ne remplace height par une valeur fixe.

img {
  max-width: 100%;
  height: auto;
}

/* A hero set as a CSS background can't carry dimensions. Give its box a shape instead: */
.hero {
  aspect-ratio: 16 / 9;
  background-size: cover;
}

Cause deux : des intégrations sans espace réservé

Une iframe YouTube ou C-SPAN arrive avec la hauteur qu'indiquait le code d'intégration, souvent 315 pixels pour 560 de large, puis un thème adaptatif étire la largeur sans ajuster la hauteur, ou le script du lecteur la redimensionne après chargement. Dans les deux cas, la page bouge.

Enveloppez chaque vidéo intégrée dans une boîte dont la forme est déclarée, et laissez l'iframe la remplir. L'espace est réservé avant le chargement du lecteur, et il s'adapte à la colonne.

.embed {
  aspect-ratio: 16 / 9;   /* 4 / 3 for older video, or match the embed's own ratio */
  width: 100%;
}
.embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

Cause trois : des polices qui se substituent

Une police web qui arrive après l'affichage de la page recompose chaque ligne composée avec elle, et si la police de secours a une largeur différente, des paragraphes entiers changent de hauteur. Précharger le fichier de police le fait arriver avant le premier affichage sur la plupart des connexions. Le descripteur size-adjust permet d'ajuster la police de secours pour que la substitution, quand elle a lieu, ne change presque rien.

<!-- in the head: fetch the font before the page needs it -->
<link rel="preload" href="/fonts/body.woff2" as="font" type="font/woff2" crossorigin />

/* in the CSS: a fallback shaped to match, so the swap barely moves anything */
@font-face {
  font-family: "Body Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 92%;
}
body { font-family: "Body", "Body Fallback", sans-serif; }

Cause quatre : des éléments insérés en haut après l'affichage

Les bandeaux de cookies, barres d'annonce et bannières d'alerte injectés par JavaScript sont la dernière cause courante, et la plus facile à voir : toute la page descend à l'instant où la barre apparaît. Deux correctifs, et l'un ou l'autre convient. Rendez la barre dans le HTML de la page pour que son espace existe dès le premier affichage, ou faites-en une superposition qui se pose sur le contenu au lieu de le repousser. Ce qui ne marche jamais, c'est d'insérer un bloc au-dessus du contenu après que le contenu a été dessiné.

Le voir par vous-même

Dans Chrome, ouvrez le panneau Performance et enregistrez un chargement de page ; chaque décalage est marqué et l'élément qui a bougé est nommé. Lighthouse rapporte le total sous le nom de Cumulative Layout Shift. L'audit gratuit de ce site exécute la même mesure sur votre page d'accueil et vous dit en langage clair si la page bouge.

Si vous êtes client, corriger l'image principale d'un gabarit ou la boîte d'une intégration est une petite tâche dans le cadre du forfait. Un thème qui construit chaque balise d'image à la main est un projet, chiffré à prix fixe. Ouvrez une demande et nous trouverons d'abord l'élément qui bouge.