En mai 2020, Google a introduit un ensemble de trois indicateurs importants connus sous le nom de Vitaux Web de baseCes indicateurs permettent d'évaluer l'expérience utilisateur globale d'un site web. L'objectif est simple : faire du Web un meilleur endroit pour tous. Les trois indicateurs essentiels du Web sont :
- La plus grande peinture à contenu (LCP) : Cela mesure le temps nécessaire pour que le contenu principal de la page apparaisse à l'écran.
- Délai de première entrée (FID) : Cela mesure le temps nécessaire avant qu'un visiteur puisse commencer à interagir avec la page.
- Décalage de mise en page cumulatif (CLS) : Cela mesure si la page est visuellement stable ou si ses éléments se déplacent beaucoup pendant le chargement.
Ces indicateurs sont bien plus que de simples chiffres pour le classement dans les moteurs de recherche. Ils ont un impact direct sur l'expérience de vos visiteurs. Améliorer ces indicateurs améliore non seulement votre classement, mais rend également votre site web plus agréable à consulter.
Qu'est-ce que le décalage de mise en page cumulatif ?
Décalage de mise en page cumulatif (CLS) C'est le sujet principal de cet article. Si le nom peut paraître technique, le concept est simple. Avez-vous déjà été sur le point de cliquer sur un bouton ou de lire une ligne de texte, pour qu'une image ou une publicité apparaisse soudainement et vienne tout gâcher ? Cette expérience perturbante est due à un changement de mise en page. Le CLS mesure la fluidité du déplacement des éléments d'une page lors de son chargement. Un bon score CLS est de 0.1 ou moins. Un score supérieur à 0.25 est considéré comme mauvais. Un score faible signifie une page plus stable, offrant une meilleure expérience utilisateur.
Comment le CLS est-il calculé ?
Le score CLS est un nombre compris entre 0 et 1. Un score de 0 correspond à une configuration parfaite, sans décalage, tandis qu'un score proche de 1 indique un mouvement important. Le calcul de ce nombre est simple : score de décalage de disposition = fraction d'impact * fraction de distanceL’ fraction d'impact mesure la quantité de la page affectée par le décalage, et la fraction de distance Mesure la distance de déplacement des éléments. Par exemple, si un élément volumineux se déplace sur une distance importante, le score CLS sera faible. Tout changement de mise en page survenant dans la demi-seconde suivant une interaction de l'utilisateur avec la page (par exemple, un clic ou une saisie) n'est pas comptabilisé dans le score.
Comment trouver mon CLS ?
Avant de pouvoir corriger votre score CLS, vous devez le connaître. Il existe plusieurs façons de le déterminer.
Google Pagespeed Insights
Vous pouvez exécuter une vérification de la vitesse de la page dans Google Pagespeed Insights, et vous verrez le score CLS répertorié dans le Données de laboratoire section. Le rapport mettra également en évidence les principales causes du CLS dans la Diagnostics section. Selon le trafic généré par votre site web, le rapport peut également inclure Données de terrain, qui est basé sur les expériences d'utilisateurs réels.
Google Search Console
Votre console de recherche dispose d'un Vitaux Web de base Rapport indiquant les pages performantes ou non. Ce rapport inclut votre score CLS, ainsi que votre Largest Contentful Paint et votre First Input Delay.
Phare de Google
Vous pouvez également utiliser la Lighthouse dans les outils de développement de votre navigateur. Vous pouvez générer un rapport de performances complet, incluant le décalage cumulé de mise en page. Ce rapport est très similaire au rapport Pagespeed Insights, mais il présente un avantage supplémentaire : vous pouvez l'exécuter sur des pages qui ne sont pas encore publiques, ce qui en fait un outil idéal pour les développeurs.
Quelles sont les causes du décalage cumulatif de la mise en page ?
Les causes les plus courantes de décalage de mise en page peuvent être corrigées par quelques modifications simples. Voici les causes les plus fréquentes et comment les corriger.
Images et vidéos sans dimensions
C'est l'une des causes les plus courantes de CLS. Lorsqu'un navigateur charge une page, le code HTML se charge en premier, suivi du CSS, puis des images et des vidéos. Si vous ne spécifiez pas la largeur et la hauteur d'une image ou d'une vidéo, le navigateur ne sait pas quel espace lui réserver. Par conséquent, la mise en page se déforme une fois l'image chargée. Ce phénomène est particulièrement visible sur les connexions lentes.
Comment régler ceci?
La solution est simple : indiquez toujours la hauteur et la largeur de vos images en HTML. Cela indique au navigateur l'espace exact à réserver, afin que le reste de la page se charge correctement. Assurez-vous également que vos images disposent d'un texte alternatif pertinent, car c'est un élément clé. SEO sur la page. Notre gratuit Générateur de texte alternatif d'image AI peut vous aider à rédiger une bonne description pour vos images, ce qui est également un excellent moyen d'améliorer votre référencement.
Publicité
Les publicités sont une cause majeure de CLS. Elles sont souvent chargées et ciblées sur un visiteur spécifique, et leur chargement peut prendre un certain temps. Cela peut entraîner un changement soudain de mise en page, surtout si la publicité est placée en haut de la page.
Comment régler ceci?
Comme pour les images, vous pouvez spécifier les dimensions que vous souhaitez réserver à une annonce. Cela garantira que la mise en page ne se déforme pas une fois l'annonce chargée. Il est recommandé de réserver le plus grand espace possible à l'annonce, même si elle est plus petite.
Incorporations et i-frames
Si vous intégrez des éléments tels que des vidéos YouTube, Google Maps ou des flux Twitter sur votre page, soyez vigilant quant au CLS. La taille exacte de l'élément n'est pas toujours connue, ce qui peut entraîner des décalages de mise en page.
Comment régler ceci?
Il est conseillé d'estimer précisément la taille de l'élément et de réserver cet espace dans la mise en page. En cas de doute, il est conseillé de définir une hauteur ou une largeur maximale pour cet élément.
Polices Web
Si vous chargez des polices depuis des services comme Google Fonts, cela peut également entraîner un décalage de la mise en page. Lors du chargement d'une police, la page peut déjà afficher une police de secours. Une fois la police installée, elle sera remplacée, ce qui entraînera un léger décalage de la mise en page.
Comment régler ceci?
Il existe deux manières de réduire l'effet négatif des polices Web sur CLS : définir l'attribut CSS affichage des polices à échange et accélérer le chargement des polices en pré-chargeant et en récupérant les polices Web. échange L'attribut indique au navigateur d'utiliser la police de secours jusqu'à ce que la nouvelle police soit prête.
Contenu injecté dynamiquement
Avec la popularité croissante du développement web moderne, de plus en plus de pages ont un contenu chargé dynamiquement. Les pages contiennent des espaces réservés qui ne sont renseignés qu'après qu'un appel au serveur JavaScript ait renvoyé le contenu correct. Cela peut prendre un certain temps et entraîner des décalages dans la mise en page.
Comment régler ceci?
Il est conseillé de toujours réserver de l'espace pour le contenu ultérieur. Il est également important de veiller à ce que le contenu soit chargé le plus rapidement possible. Il s'agit d'une tâche technique pour laquelle un développeur peut vous aider.
Conclusion
Les décalages de mise en page sont gênants pour les visiteurs et nuisent à l'expérience utilisateur. Depuis 2021, ils peuvent également nuire à votre classement sur Google. Heureusement, les décalages de mise en page ont plusieurs causes, et pour chacune d'elles, il existe une solution relativement simple : une plateforme de référencement automatisé. Clickrank peut vous aider avec votre référencement sur la page, vos problèmes techniques et votre contenu, afin que vous puissiez créer un site Web solide et bien classé.
