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

5 astuces de rédaction pour une page d’accueil plus vendeuse

Saviez-vous qu’un internaute reste en moyenne 30 à 60 secondes sur un site web  ? Et si je vous disais qu’en 3 secondes, il a décidé si...

Publié le par Audrey Clabeck
Webmarketing

Développement : 12 offres d’emploi dans des startups et pureplayers

En cette semaine spéciale dédiée aux startups et pureplayers, nous vous proposons une sélection d’offres d’emploi en CDI au sein de ces...

Publié le par Cyrielle Maurice