Navigation

Toutes les catégories

Filtrer par auteur

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

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

[Infographie] – Un monde sans Twitter

Dans la série, un monde sans… je demande Twitter. Après vous avoir présenté une infographie similaire sur Facebook, je vous présente l’illustration équivalente pour le...

Publié le par Team WebActus
Webmarketing

Snapchat : téléchargez la nouvelle version, plus rapide et spécialement conçue pour Android

La nouvelle version de Snapchat est enfin disponible sur Android ! The post Snapchat : téléchargez la nouvelle version, plus rapide et spécialement...

Publié le par Thomas Coeffe