Cumulative Layout Shift - Améliorez les performances Web et l'expérience utilisateur
Table des matières
Cumulative Layout Shift (CLS) est une mesure clé centrée sur l’utilisateur dans les Core Web Vitals. Il mesure la stabilité visuelle offerte par votre site Web, ce qui affecte son expérience utilisateur globale. Des parties de votre page Web se déplaçant en désordre sur l’écran peuvent laisser perplexes vos visiteurs. Par exemple, si un visiteur essaie de cliquer sur un bouton, un changement soudain de mise en page peut l’amener à cliquer sur le mauvais bouton ou à perdre sa place dans le texte.
En bref, si les éléments visibles sur votre site se déplacent de manière incontrôlable, vos visiteurs auront du mal à interagir avec eux. Cette imprévisibilité peut être frustrante et entraîner une diminution de l’engagement des utilisateurs, une augmentation des taux de rebond et de faibles taux de conversion. De plus, les moteurs de recherche d’aujourd’hui en prennent également note et le reflètent dans votre classement global.
Dans cet article, nous expliquerons ce qu’est le changement de mise en page cumulatif, quels facteurs l’alimentent et comment il affecte l’expérience et le référencement de vos visiteurs. Nous vous montrerons également comment mesurer et améliorer vos scores CLS, alors commençons.
Disons que vous lisez un article intrigant ou que vous êtes sur le point de cliquer sur un bouton « Acheter maintenant » et que, de nulle part, une image ou une annonce se charge en haut, poussant tout vers le bas. C’est un changement de disposition. Lorsque ces changements se produisent plusieurs fois au cours d’une même session, on parle de changement de mise en page « cumulatif ».
Les éléments chargés sur vos pages Web doivent suivre un modèle de rendu stable. Un élément de page tel qu’une annonce, une police Web, un formulaire de contact, des images et des vidéos peut modifier la mise en page de la page entière. Si leurs dimensions ne sont pas correctement définies, cela peut provoquer un flash de texte non stylé ou un flash de texte invisible, par exemple.
De tels changements de disposition peuvent être attendus ou inattendus. Lisez la suite pour savoir comment différencier les deux et sur lequel se concentre le score CLS.
Changement de mise en page attendu
Le changement de mise en page attendu fait référence à tout changement délibéré dans la position des éléments de la page qui se produit à la suite d’une interaction de l’utilisateur. Par exemple, lorsqu’un utilisateur clique sur un menu déroulant et que celui-ci s’ouvre, déplaçant d’autres éléments sur la page, il s’agit d’un changement attendu dans la mise en page.
Par conséquent, les changements de mise en page attendus ne sont pas mauvais pour l’expérience utilisateur ou le référencement de votre site Web. Cependant, il reste important de concevoir ces changements de manière conviviale, en veillant à ce qu’ils aient du sens pour vos utilisateurs et ne provoquent pas de confusion ou de frustration inutiles.
Changement de mise en page inattendu
Un changement de mise en page inattendu fait référence au mouvement soudain et imprévu d’éléments de page sur une page Web pendant qu’un utilisateur interagit avec elle. Cela se produit lorsque des éléments visibles sur une page Web changent de position ou de dimensions sans l’intervention de l’utilisateur, souvent en raison du contenu multimédia, des polices, aux publicités ou au contenu dynamique à chargement tardif.
Un exemple de changement de mise en page inattendu est une image à chargement tardif ou annonce contextuelle, poussant le texte ou le bouton vers le bas et vous faisant perdre votre place ou cliquer sur la mauvaise chose.
Ces changements inattendus peuvent être très frustrants pour les utilisateurs, conduisant à une mauvaise expérience utilisateur. Du point de vue du référencement, une fréquence élevée de changements de mise en page inattendus, mesurés par Google en termes de décalage cumulatif de mise en page (CLS), peut avoir un impact négatif sur le classement de votre site Web dans les moteurs de recherche. Ainsi, minimiser les changements de mise en page inattendus est crucial pour assurer la satisfaction des utilisateurs et optimiser les performances de votre site Web dans les résultats des moteurs de recherche.
Le point culminant ici est que le score CLS est influencé uniquement par les changements qui se produisent dans la partie visible de la page Web, souvent appelée « au-dessus de la ligne de flottaison ». Si un mouvement a lieu en dehors de la zone visible actuelle ou « en dessous de la ligne de flottaison », cela n’aura pas d’impact sur votre score CLS.
Facteurs contribuant au CLS
Jusqu’à présent, nous avons établi que le score Cumulative Layout Shift concerne les Core Web Vitals et mesure le mouvement inattendu des éléments sur une page Web.
Mais qu’est-ce qui alimente ces changements soudains ? Les coupables sont nombreux et nous détaillerons ci-dessous les principaux contributeurs, alors continuez à lire.
Ressources de blocage du rendu
Ressources bloquant le rendu comme les fichiers CSS ou JavaScript peuvent provoquer des changements de disposition. Lorsqu’un navigateur rencontre ces ressources, il doit les mettre en pause et les charger complètement avant de pouvoir afficher la page Web. Un chargement lent des ressources peut perturber le processus de rendu, entraînant des éléments instables et un mauvais score CLS.
Pour atténuer ce problème, il est crucial d’intégrer les CSS et JavaScript critiques et de différer le JavaScript non critique, garantissant ainsi un rendu plus fluide.
Dimensionnement des éléments d’image et vidéo
Les images et vidéos sans dimensions spécifiques peuvent également entraîner des changements de mise en page individuels. Lorsque ces éléments se chargent lentement ou sans dimensions, ils peuvent déplacer d’autres contenus sur la page, provoquant un changement perturbateur.
L’attribution d’attributs explicites de hauteur et de largeur aux images et aux vidéos peut empêcher de tels changements, offrant ainsi à vos utilisateurs une expérience visuelle plus stable. Un site avec des images sans dimensions spécifiées doit être amélioré pour maintenir son score CLS à un niveau bas.
Contenu injecté dynamiquement
Le contenu injecté dynamiquement, tel que les publicités intégrées et les iframes, est un autre facteur pouvant entraîner des changements de mise en page. Lorsque ce contenu se charge et modifie le DOM sans avertissement, il peut écarter le contenu existant, entraînant un score CLS élevé.
Réserver de l’espace pour le contenu dynamique peut aider à éviter ces changements et à améliorer l’expérience utilisateur globale.
Polices Web
Les polices Web, en particulier celles qui provoquent un Flash of Unstyled Text (FOUT) ou un Flash of Invisible Text (FOIT), peuvent contribuer à un mauvais score CLS. S’ils se chargent lentement, ils peuvent amener le navigateur à échanger la police de secours avec la police Web chargée, déclenchant des changements de mise en page inattendus.
Un chargement efficace des polices Web peut aider à maintenir une mise en page stable, améliorant ainsi la satisfaction et l’engagement des utilisateurs.
Impact de CLS sur l’expérience utilisateur
Cumulative Layout Shift (CLS) est une mesure essentielle qui a un impact direct sur l’expérience utilisateur sur votre site Web. En termes simples, CLS mesure le déplacement inattendu des éléments de la page Web pendant que la page est en cours de téléchargement.
Un score CLS élevé peut conduire à une expérience de page frustrante. Des changements de mise en page inattendus peuvent être assez déroutants, conduisant les utilisateurs à quitter prématurément votre site.
Du point de vue du référencement, un CLS élevé peut affecter négativement le classement de votre site Web. Les moteurs de recherche comme Google donnent la priorité à l’expérience utilisateur, et un site avec un CLS élevé peut être considéré comme offrant une mauvaise expérience. Par conséquent, minimiser CLS améliore la satisfaction des utilisateurs, augmente l’engagement et améliore potentiellement le classement de votre site dans les résultats des moteurs de recherche.
Une expérience utilisateur fluide et transparente maintient vos visiteurs satisfaits et engagés. Et dans le monde du référencement, un visiteur satisfait signifie un moteur de recherche heureux.
Mesure et surveillance du CLS
Pour maîtriser le référencement, savoir mesurer et surveiller le Cumulative Layout Shift (CLS) est indispensable. CLS, un élément clé des Core Web Vitals de Google et un facteur de classement important, peut influencer considérablement les performances et la visibilité de votre site Web.
Dans cette section, nous aborderons le score CLS, une valeur numérique qui quantifie les changements de mise en page sur votre page Web. Nous présenterons également divers outils conçus pour mesurer avec précision le CLS afin d’améliorer la stabilité de votre site Web et son classement SEO global.
Score CLS
Google détermine le CLS d’une page Web en évaluant deux facteurs clés pour chaque changement de mise en page inattendu : la fraction d’impact et la fraction de distance.
La Fraction d’impact quantifie la partie de la zone d’affichage qu’un élément instable occupe entre deux images.
La Fraction de distance mesure la distance parcourue par un élément de page (quantité d’espace) depuis son emplacement initial jusqu’à sa position finale, représentant essentiellement le changement de rapport de mise en page.
Le score cumulatif de décalage de configuration se compose de la fraction d’impact multipliée par le rapport de fraction de distance. Le score de changement de disposition augmente de façon exponentielle avec l’augmentation de la fraction d’impact et de distance.
Ainsi, si l’élément est volumineux ou s’il pousse le texte très loin vers le bas, le score CLS sera élevé, ce qui signifie que la perturbation a été importante. Plus l’image occupe votre écran ou plus elle pousse le texte loin, plus les scores CLS augmentent rapidement.
Outils d’analyse CLS
Si vous vous demandez comment calculer les performances CLS de votre site – détendez-vous – il existe des outils gratuits que vous pouvez utiliser. Ces outils sont Google Page Speed Insights et l’outil Lighthouse du navigateur Chrome. Continuez à lire pour savoir comment mesurer les scores CLS de votre site Web avec chacun de ces outils.
PagesPeed Insights
Google PageSpeed Insights est un outil précieux pour évaluer les performances Cumulative Layout Shift (CLS) de votre site Web. Pour l’utiliser, saisissez simplement l’URL de votre site Web et cliquez sur « Analyser ».
L’outil évaluera ensuite votre site, fournissant une multitude d’informations, notamment vos scores CLS. PageSpeed Insights analyse la manière dont les éléments instables de votre page Web contribuent à ces scores, offrant ainsi un aperçu des éléments qui changent de leur mise en page initiale lors du chargement de la page sans intervention de l’utilisateur.
L’outil identifie ces éléments, l’espace qu’ils occupent et la distance dans laquelle ils se déplacent, offrant ainsi une vue complète des performances cumulatives de changement de mise en page de votre site Web. Avec cet outil, vous obtenez les informations nécessaires pour optimiser la stabilité de la mise en page de votre site, améliorant ainsi la satisfaction des utilisateurs et les performances de référencement.
Outils de développement Chrome
Un autre outil que vous pouvez utiliser est l’outil Lighthouse de Chrome pour mesurer le décalage cumulatif de la mise en page (CLS). Pour mesurer CLS à l’aide du rapport Lighthouse dans le navigateur Chrome, suivez les étapes ci-dessous.
- Ouvrez votre page Web dans Chrome. Cliquez sur le menu kebab (trois points verticaux) en haut à droite, naviguez jusqu’à “Plus d’outils”, puis sélectionnez “Outils de développement”.
- Dans le panneau Outils de développement, localisez l’onglet “Phare“. Ici, vous pouvez générer un rapport en cliquant sur “Analyser le chargement de la page“.
- Laissez Lighthouse avoir le temps de générer votre rapport. Ce rapport inclura votre score de changement de mise en page, détaillant les changements de mise en page qui se produisent lorsque de nouveaux éléments sont ajoutés pendant le chargement de la page.
Notez que tous les changements de mise en page ne sont pas indésirables : ceux résultant des interactions des utilisateurs sont généralement attendus. Le rapport identifie les éléments qui se déplacent de manière inattendue, leurs proportions, la quantité d’espace qu’ils occupent et la distance dans laquelle ils se déplacent.
Ces scores de changement de mise en page vous aident à comprendre et à mesurer efficacement CLS pour obtenir des informations précieuses et améliorer l’expérience des visiteurs.
Comment améliorer le cumul de mise en page Shift
Maintenant que vous savez comment mesurer les CLS, il est temps d’agir et de vous assurer que votre site respecte les critères fondamentaux du Web.
Nous partagerons ici plus d’informations sur la minimisation du CLS sur votre site afin d’améliorer l’expérience de vos visiteurs et votre référencement.
Optimisation du chargement des ressources
Optimiser le chargement des ressources comme CSS, JavaScript et les images est une stratégie clé pour améliorer le Cumulative Layout Shift (CLS) de votre site. Vous pouvez empêcher les éléments instables de provoquer des décalages tardifs dans la mise en page en réduisant leur temps de chargement.
Des méthodes comme la compression, minification de code, et employant un Réseau de diffusion de contenu (CDN) peuvent accélérer le chargement des ressources. Envisagez d’utiliser des formats d’image modernes comme WebP, qui offrent une meilleure compression et qualité.
Définition des dimensions des éléments
Vous pouvez réserver un espace suffisant dans la mise en page en définissant les dimensions en hauteur et en largeur des éléments de la page Web. Cela empêche les changements inattendus lors du chargement des éléments, améliorant ainsi la stabilité de votre site. Donc, si vous avez des images et des vidéos ou des iframes sans dimensions, assurez-vous de les ajouter.
- Voici comment vous pouvez définir les dimensions d’une image par exemple :
<img src="image.jpg" alt="Description of image" width="500" height="600">Dans le code ci-dessus, la largeur de l’image est fixée à 500 pixels et sa hauteur à 600 pixels. Lors du chargement de la page, le navigateur réservera cet espace pour l’image, empêchant les autres éléments de se déplacer lors du chargement de l’image.
- Comme pour les images, vous devez également spécifier la hauteur et la largeur pour les vidéos.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>Ici, la largeur et la hauteur de la vidéo sont réglées à 320 et 240 pixels, respectivement.
- Pour CSS, vous pouvez spécifier des dimensions comme ceci :
#myDiv {
width: 500px;
height: 600px;
}Dans le CSS ci-dessus, un div avec l’identifiant « myDiv » se voit attribuer une largeur de 500 pixels et une hauteur de 600 pixels.
Efforcez-vous de maintenir le même rapport hauteur/largeur (le rapport largeur/hauteur) que l’image ou la vidéo d’origine pour éviter les distorsions. Si le rapport hauteur/largeur n’est pas le même, cela peut entraîner des décalages inattendus, ayant un impact négatif sur le Cumulative Layout Shift (CLS).
Utilisez les attributs appropriés pour les images et les vidéos
Lorsqu’il s’agit de créer un site Web réactif et efficace, utiliser les bons attributs pour vos images est crucial. HTML5 introduit l’attribut srcset, vous permettant de proposer différentes versions d’une image pour différentes tailles de périphériques ou de fenêtres d’affichage. Cela permet au navigateur de sélectionner la source d’image la plus appropriée à charger, améliorant ainsi l’efficacité et la réactivité de votre site Web.
<img src="image.jpg"
srcset="image-480w.jpg 480w, image-800w.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
alt="Description">Dans cet exemple, le navigateur choisira image-480w.jpg lorsque la fenêtre fait 600px de large ou moins, et image-800w.jpg sinon.
Pour des scénarios plus complexes, tels que la direction artistique ou différents formats d’image pour différents navigateurs, vous pouvez utiliser l’élément <picture> :
<picture>
<source media="(min-width: 800px)" srcset="large.jpg, large-2x.jpg 2x">
<source media="(min-width: 480px)" srcset="medium.jpg, medium-2x.jpg 2x">
<img src="small.jpg" srcset="small-2x.jpg 2x" alt="Description">
</picture>Dans ce cas, large.jpg sera utilisé pour les fenêtres de largeur de 800 px ou plus, moyen.jpg pour les fenêtres entre 480 et 799 px, et b>small.jpg pour les fenêtres de moins de 480 px. Le 2x désigne une version de l’image pour les écrans haute résolution (Retina).
En utilisant correctement ces attributs, vous pouvez vous assurer que vos images se chargent efficacement sur différents appareils, améliorant ainsi les performances de votre site et l’expérience utilisateur.
Gestion du contenu dynamique
Le contenu dynamique comme les publicités ou les popups peut provoquer des changements de mise en page s’il n’est pas correctement géré. Il est crucial de réserver de l’espace pour ce contenu afin d’éviter qu’il ne pousse d’autres éléments visibles sur la page lorsqu’il est ajouté.
Réservez de l’espace pour les éléments publicitaires
Les publicités sont généralement chargées de manière asynchrone. Cela signifie qu’ils sont ajoutés dynamiquement à votre page Web, soit pendant, soit après que le reste de la page a été chargé. Ils peuvent provoquer des décalages dans la mise en page s’ils n’ont pas d’espace réservé.
Google recommande l’utilisation de Responsive Ad Units si vous utilisez Google AdSense. Ces blocs ajustent automatiquement leur taille pour s’adapter à la mise en page et à la taille de l’écran. Cependant, vous devriez toujours spécifier une hauteur et une largeur minimales pour empêcher les changements de mise en page.
Voici un exemple :
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}Assurez-vous toujours que l’espace publicitaire alloué correspond à la taille de l’annonce pour l’empêcher de déplacer d’autres contenus lors du chargement de la page.
Préchargement des ressources critiques
Préchargez les éléments critiques peut améliorer la vitesse de chargement de la page et réduire les décalages inattendus de la mise en page. Cette technique consiste à indiquer au navigateur que les fichiers importants sont nécessaires pour afficher la page, lui permettant de gérer ces fichiers tôt dans le processus de chargement.
Ces ressources critiques sont les CSS, les fichiers JavaScript, les vidéos et les images. Vous pouvez utiliser la balise « link » avec l’attribut « rel » défini sur preload pour indiquer au navigateur de démarrer le téléchargement de la ressource spécifiée :
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="preload" href="custom-font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="background.jpg" as="image">Dans l’extrait ci-dessus :
- «href» spécifie le chemin d’accès à la ressource.
- « as » indique au navigateur le type de contenu chargé.
- ‘type‘ fournit le type MIME de la ressource ( nécessaire uniquement pour les polices).
- ‘crossorigin‘ est utilisé avec des polices, car elles sont récupérées en mode anonyme CORS.
Utilisation de la propriété CSS aspect-ratio
Si vous utilisez la propriété CSS aspect-ratio, vous pouvez vous assurer que vos éléments conservent les mêmes proportions lorsque la taille de la fenêtre est modifiée. Cela aide à éviter la distorsion de vos vidéos ou de l’apparence de l’image. Le rapport hauteur/largeur est la largeur de l’image ou de la vidéo divisée par sa hauteur. Par exemple, une image avec une largeur de 800 pixels et une hauteur de 600 pixels aura un rapport hauteur/largeur de 4:3.
La spécification de formats d’image incorrects ou différents peut entraîner une image ou une vidéo à occuper plus ou moins d’espace que prévu, entraînant un changement de mise en page.
Contrôle des polices Web
Les polices Web, en particulier les polices tierces, peuvent provoquer des changements de mise en page si elles ne sont pas gérées correctement. Des techniques telles que font-display: swap, le préchargement des polices critiques et l’hébergement des polices localement peuvent aider à contrôler le chargement des polices Web et à réduire le CLS.
Pour optimiser les performances de votre site Web et son classement SEO, il est crucial de contrôler efficacement les polices Web. Commencez par limiter le nombre de styles de police utilisés. Plus de styles signifient plus de fichiers à télécharger, ce qui ralentit votre site.
Utilisez des formats modernes comme WOFF2 pour une meilleure compression et des temps de chargement plus rapides. N’oubliez pas d’inclure « font-display: swap » dans votre CSS. Cela oblige le navigateur à afficher le texte dans une police système jusqu’à ce que la police personnalisée soit chargée, empêchant ainsi le texte invisible. Si vous gérez vos polices Web de manière responsable, vous vous assurez un site plus rapide, plus convivial et plus haut placé dans les résultats de recherche.
Implémentation du chargement différé pour les images hors écran
Le Lazy-loading est une technique selon laquelle les images hors écran sont chargées uniquement au moment où elles arrivent dans la fenêtre. Cela peut améliorer les performances des sites Web en réduisant la quantité de données à charger lors du premier chargement de la page.
Cependant, il est important de noter que le lazy-loading ne doit pas être appliqué aux images au-dessus de la ligne de flottaison, car cela peut donner un mauvais score CLS (Cumulative Layout Shift).
Voici un exemple illustrant comment vous pouvez implémenter le chargement différé pour une image :
<img src="placeholder-image.jpg" data-src="actual-image.jpg" alt="Description" class="lazyload">Dans l’exemple ci-dessus, placeholder-image.jpg est une image légère qui est affichée jusqu’au chargement de actual-image.jpg. L’attribut data-src contient l’URL de l’image réelle qui devrait être chargée lorsque l’image arrive dans la fenêtre. La classe lazyload est utilisée pour cibler l’image avec JavaScript afin d’implémenter la fonctionnalité de chargement différé.
Notez que cette configuration manuelle peut être un peu complexe, surtout pour un site Web avec beaucoup d’images. Ainsi, vous pouvez automatiser le processus en activant facilement Lazy-Load pour votre site Web WordPress en utilisant SiteGround Speed Optimizer.
Évitez les animations qui déclenchent des changements de mise en page
Les animations peuvent provoquer des décalages dans la mise en page si elles affectent la mise en page des autres éléments de la page. Assurez-vous que les animations, en particulier dans les applications comportant une seule page, sont gérées de manière à ne pas perturber la mise en page.
Pour rendre les animations de vos sites Web plus fluides et plus rapides, évitez les propriétés d’animation comme la largeur, la hauteur ou la position qui obligent le navigateur à faire des calculs supplémentaires. À la place, utilisez « transform » et « opacity » pour vos animations ; elles sont beaucoup plus faciles à utiliser pour le moteur de votre navigateur.
Si vous utilisez JavaScript pour vos animations, utilisez « requestAnimationFrame » pour des performances optimales. De plus, n’oubliez pas d’indiquer le navigateur sur les éléments qui seront animés en utilisant la propriété « will-change ». N’oubliez pas que chaque animation doit améliorer la satisfaction de vos utilisateurs, pas la ralentir !
Gérez l’interaction avec les utilisateurs de manière responsable
Les interactions de l’utilisateur, comme les clics ou les appuis, ne devraient pas provoquer de changements inattendus dans la mise en page. Assurez-vous que toute modification de la mise en page résultant des interactions de l’utilisateur est fluide et prévisible.
Lors de la gestion des interactions utilisateur, il est vital de minimiser les décalages cumulatifs de mise en page (c’est-à-dire les mouvements inattendus d’éléments sur votre page). Cela arrive souvent lorsqu’un élément instable est ajouté à la page sans spécifier de taille.
Pour éviter cela, définissez les dimensions des images pour que le navigateur sache l’espace à allouer, évitant ainsi ce saut brutal lors du chargement des images. Ce n’est pas qu’une question d’expérience utilisateur, c’est aussi un facteur de classement pour le référencement. Alors, ne laissez pas d’espace vide ; soyez proactif dans votre mise en page pour un site plus fluide et convivial.
Conclusion
Optimiser le Cumulative Layout Shift (CLS) de votre site Web est crucial pour fournir une expérience utilisateur fluide et améliorer votre référencement. Pour garantir un chargement des pages fluide et prévisible, il est essentiel d’optimiser le chargement des ressources, de définir des dimensions explicites pour les images et les vidéos, de gérer le contenu dynamique de manière responsable et de contrôler efficacement les polices Web. N’oubliez pas de gérer les interactions des utilisateurs de manière à ne pas provoquer de changements inattendus dans la mise en page.
Tirez parti d’outils tels que Google PageSpeed Insights et Lighthouse de Chrome pour mesurer et surveiller votre CLS, ce qui vous permet d’apporter les améliorations nécessaires. Améliorez l’expérience de vos visiteurs en suivant les étapes que nous vous avons montrées dans ce guide et assurez-vous que votre site respecte les critères fondamentaux du Web de Google. Un site bien optimisé satisfera à la fois vos visiteurs et les moteurs de recherche, accroîtra l’engagement des utilisateurs et améliorera votre visibilité dans les résultats de recherche.
FAQ
Qu’est-ce qu’un bon score CLS ?
Un bon score CLS (Cumulative Layout Shift) qui mesure la stabilité visuelle de votre site Web est de 0,1 ou moins. Ce faible score signifie que les utilisateurs subissent un minimum de mouvements inattendus d’éléments de la page, ce qui garantit une expérience fluide et conviviale.
Un score CLS supérieur à 0,25 indique un besoin d’amélioration, car cela pourrait entraîner une frustration chez l’utilisateur et une baisse potentielle de son engagement. Maintenir un bon score CLS, c’est s’assurer que vos utilisateurs ont une expérience de navigation fluide et agréable sur votre site.
CLS affecte-t-il le référencement ?
Du point de vue du référencement, un score CLS plus faible est préférable, car cela signifie que votre page est visuellement stable, ce qui conduit à une expérience utilisateur plus fluide et plus agréable. Google utilise CLS comme facteur de classement, et il représente 25 % du score de performance total dans GTmetrix. Donc, si vous visez une place plus élevée dans les résultats de recherche et que vous voulez garder vos visiteurs heureux, il est crucial de garder un œil sur votre score CLS et d’essayer de le maintenir aussi bas que possible.
Les changements de mise en page sont-ils mauvais pour l’expérience utilisateur ?
Oui, les changements de mise en page sont généralement mauvais pour l’expérience utilisateur. Lorsque des éléments d’une page Web sont déplacés de manière inattendue, cela peut perturber l’interaction de l’utilisateur, provoquant frustration et confusion.
Par exemple, un utilisateur peut être en train de lire un article ou sur le point de cliquer sur un bouton lorsqu’un changement soudain de la mise en page lui fait perdre la place ou le mauvais clic. Ce comportement imprévisible peut entraîner une diminution de l’engagement des utilisateurs et une augmentation des taux de rebond.
Minimiser les changements de mise en page est crucial pour fournir une expérience utilisateur fluide et agréable qui fidélise les visiteurs.