Retour

Stabilité de la mise en page

Qu'est-ce que la stabilité de mise en page ?

On parle de stabilité de la mise en page lorsque les différents éléments de la page ne changent pas ou peu de position suite au chargement de nouvelles ressources. Par exemple, l'utilisateur commence à lire du texte présent sur la page et au même moment, un bloc est ajouté dynamiquement au dessus de celui-ci via du JavaScript, le texte se décale alors vers le bas et l'utilisateur perd le fil de sa lecture.

L'indicateur CLS (Cumulative Layout Shift) de Google permet de mesurer la fréquence à laquelle ces changements se produisent. Plus l'indicateur est élévé, plus la mise en page est instable. Lorsque cet indicateur vaut 0, aucun mouvement inattendu du contenu de la page a été détecté. Retrouvez davatange d'informations sur cet indicateur CLS et la manière dont il est calculé sur la documentation Google (en anglais).

Pourquoi est-elle importante ?

La stabilité de mise en page est importante du fait qu'elle est prise en compte par Google dans ses critères de classement et surtout, parce qu'elle impacte négativement l'experience utilisateur lors de la navigation sur la page. Face à une page instable, l'utilisateur peut être frustré par la perte de repères visuels et pire encore, il peut penser que le site ne fonctionne pas du fait d'un décalage lors d'intéraction sur des boutons qui se déplacent par exemple.

Comment éviter des changements de mise en page inattendus ?

Afin de fournir une expérience optimale à vos utilisateurs, il est nécessaire de garder l'indicateur CLS sous la barre de 0,1. 

Quelques conseils pour garder l'indicateur sous la barre critique :

  • définissez les attributs de taille de vos images et vidéos dans le code HTML ou résevez l'espace nécéssaire dans un conteneur avec un rapport hauteur / largeur en CSS
  • définissez les dimensions des conteneurs accueillant du contenu tiers comme des publicités
  • n'insérez pas dynamiquement du contenu au dessus d'un contenu existant
  • préférez les animations de transformation ("transform" en CSS) aux animations de propriétés qui déclenchent des changements de mise en page (manipulation JavaScript)
  • préchargez les polices web