Navigation

Toutes les catégories

Voir les derniers articles

UX : Comment éviter le contenu instable et améliorer votre Cumulative Layout Shift (CLS) ?

Le Cumulative Layout Shift (CLS) est une métrique mesurant l’instabilité du contenu, obtenue en additionnant les changements de mise en page qui se produisent...

Publié par Sebastien Turbe

Le Cumulative Layout Shift (CLS) est une métrique mesurant l’instabilité du contenu, obtenue en additionnant les changements de mise en page qui se produisent au-delà des 500 premières millisecondes du chargement de la page. Elle examine la quantité de contenu qui se déplace dans l’écran de l’utilisateur ainsi que la distance à laquelle les éléments concernés ont été déplacés.

Imaginez que vous lisez un article, et qu’au milieu de ce dernier des éléments se déplacent soudainement sur la page, vous obligeant à retrouver l’endroit où vous vous êtes arrêté. C’est très courant sur le web, qu’il s’agisse de la lecture « passive » d’un article ou que vous essayiez d’interagir avec la page en cliquant sur un bouton qui ne se trouve plus là au « clic ». De telles expériences sont visuellement déstabilisantes et frustrantes et surviennent lorsque des éléments déjà visibles sont contraints de se déplacer parce qu’un autre élément a été soudainement chargé dans la page, ou redimensionné.

Voici les principales causes de CLS et comment y remédier. (@LeBonCoin  : sois attentif, ça commence)

 

À savoir
Le CLS est considéré par Google comme l’un des Core Web Vitals, soit l’un des critères UX essentiels au bon fonctionnement d’un site web.

 

Images sans dimensions

Lorsque le Responsive Web Design a été introduit, les développeurs ont commencé à zapper la largeur et la hauteur et se sont mis à utiliser le CSS pour redimensionner les images à la place :

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

Avec cette approche l’espace ne sera alloué à l’image qu’une fois qu’elle sera importée et que le navigateur pourra en déterminer les dimensions. A chaque fois qu’une image s’affiche, la page se dimensionne, allouant la place nécessaire à l’image  : pof, le texte se déplace d’autant et nous voilà perdu.

Notre conseil
Voilà donc une bonne raison de continuer d’inclure les attributs de largeur et de hauteur sur vos images, et éléments vidéo. Cette approche garantit que le navigateur peut allouer la quantité d’espace correcte dans le document avant le chargement de l’image.

Parmi les bonnes pratiques récentes, signalons l’utilisation de l’aspect ratio  :

img {
aspect-ratio : attr(width) / attr(height) ;
}

S’agissant des images responsives, « srcset » va définir un ensemble d’une même image dans plusieurs tailles, le navigateur choisissant la taille la plus adaptée.

Lire la suite de l'article
Afficher les commentaires (0)

Commentaires

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Webmarketing

Le gouvernement annonce 75 à 100 millions d’euros pour former 13 millions de Français au numérique

Le secrétaire d’Etat chargé du numérique, Mounir Mahjoubi vient d’annoncer que le gouvernement allait investir massivement dans la formation des...

Publié le par Fabian Ropars
Webmarketing

5 formations pour maîtriser les réseaux sociaux

Vous souhaitez vous former à la gestion des médias sociaux ou comprendre comment bâtir une stratégie social media ? Nous avons...

Publié le par Ludwig Herve