La plupart des sites Web sont conçus pour être accessibles à partir de divers appareils avec des tailles d’écran et des résolutions différentes. Ainsi, maintenir la même expérience sur plusieurs plates-formes peut être difficile. WordPress facilite la conception de sites Web multiplateformes. Cependant, quelle que soit la forme de développement logiciel, la construction d’une solution unique peut être compliquée.
Dans le cas du développement Web, les utilisateurs naviguant d’une page à l’autre sur un site Web peuvent parfois subir ce que l’on appelle le décalage de mise en page cumulatif (CLS). C’est lorsque les éléments visuels d’une page subissent un changement soudain ou se chargent de manière incorrecte. Soudain, le texte devient plus grand ou plus petit, les images changent de position ou toute la mise en page change.
Pourquoi cela se produit-il et comment pouvons-nous y remédier ? Dans ce guide, nous allons explorer ce qu’est le CLS et comment vous pouvez l’empêcher sur votre site Web.
Qu’est-ce que le décalage de mise en page cumulatif ?
La forme perceptible la plus courante de CLS est lag dans le chargement des images. Sur les sites Web complexes qui contiennent beaucoup d’éléments visuels, vous remarquerez souvent que le texte se charge avant les éléments multimédias. De plus, la mise en page de la page Web change lorsque tous les éléments visuels sont enfin chargés. Ces incidents se produisent que vous fassiez défiler ou non.
Lorsqu’une page Web a un score CLS élevé, il est difficile de déterminer quand elle est complètement chargée. Plus le site Web est compliqué et riche en médias, plus la probabilité de changements de mise en page de l’expérience est élevée.
Par exemple, les pages Web de moteurs de recherche simples avec très peu d’éléments visuels ont peu ou pas de CLS. Cependant, cela ne signifie pas que tous les sites Web complexes ou riches en fonctionnalités ont des scores CLS élevés. Par exemple, la boutique en ligne d’Amazon regorge de widgets, d’images et de liens, mais elle se charge rapidement sans aucun changement perceptible.
Quelles sont les causes du décalage de mise en page cumulatif ?
CLS a tendance à se produire parce que les navigateurs Web chargent les éléments de manière séquentielle à des moments différents. De plus, vous pouvez avoir des éléments multimédias sur votre site Web avec des propriétés inconnues (telles que des dimensions).
Dans les cas où vous ne spécifiez pas la largeur ou la hauteur d’un élément multimédia (comme une image), votre navigateur Web ne saura pas combien d’espace allouer jusqu’à ce que la page Web se charge complètement. D’où le changement radical de mise en page. En résumé, la principale raison de la plupart des CLS est un chargement inefficace.
Il est important de noter que même si vous ne remarquez pas le changement de mise en page en temps réel, cela ne signifie pas nécessairement qu’il n’y a pas de changement. Les navigateurs Web mettent souvent en cache les données des sites Web, il est donc plus facile de charger les pages Web lorsque vous les revisitez. Mesurer le score CLS est le meilleur moyen de déterminer si votre site Web subit un changement de mise en page substantiel.
Comment mesurer le score CLS de votre site Web
Le score CLS indique le nombre de changements de mise en page subis par une page Web tout au long de sa durée de vie. Nous pouvons dériver le score CLS à partir de ce qu’on appelle une fenêtre de session. Une fenêtre de session décrit le nombre de changements de disposition qui se produisent dans un intervalle de cinq secondes. Pour calculer le score CLS, nous devons multiplier la fraction de distance par la fraction d’impact :
CLS Score = Distance Fraction x Impact Fraction
le fraction d’impact décrit dans quelle mesure un élément instable affecte la zone perceptible entre deux images. La fraction de distance décrit la quantité d’un élément a décalé entre les images. Un score CLS de 0,10 et moins (0,0 – 0,10) est excellent. Un score CLS supérieur à 0,10 mais inférieur à 0,25 (0,10 -0,25) est modéré et doit être amélioré, tandis qu’un score CLS supérieur à 0,25 (0,25 <) est médiocre.
Ces concepts peuvent être un peu difficiles à comprendre. Heureusement, vous n’avez pas besoin de calculer manuellement le CLS de votre site Web. Il existe de nombreux outils en ligne (et hors ligne) qui peuvent calculer le score CLS pour vous.
Actuellement, le moyen le plus populaire de mesurer le CLS de votre page Web consiste à utiliser PageSpeed Insights de Google. Il vous permet de vérifier les statistiques d’expérience utilisateur de votre site Web pour les itérations mobiles et de bureau.
Les autres outils CLS incluent :
- GT Metrix
- Débogueur Google Web Vitals CLS
- Extension Google Chrome Web Vitals
- Phare de Google
- Test de page Web
Étant donné que PageSpeed Insights de Google est le plus familier, nous l’utiliserons pour notre exemple.
Pour mesurer votre score CLS, accédez à la page d’accueil de PageSpeed Insight, insérez l’URL de votre page Web dans le champ de texte supérieur, puis cliquez sur le Analyser bouton. En fonction de la popularité de votre site Web et de la vitesse d’Internet, PageSpeed Insights devrait vous fournir un rapport en quelques secondes.
Pour trouver votre score CLS, faites défiler jusqu’à la section Core Web Vitals Assessment.
Si nous utilisons la page d’accueil d’Amazon comme exemple, nous trouverons plus que probablement un score CLS inférieur à 0,10. Au cours de nos tests, nous avons constaté que le site Web mobile avait un score CLS de 0,01, tandis que la version de bureau avait un score de 0,05.
Mais comment font-ils quand leur site est si gourmand en ressources ? Voyons comment vous pouvez également obtenir un score CLS de type Amazon.
Comment optimiser CLS
La meilleure façon de voir quels éléments sont à l’origine de votre score CLS élevé est d’utiliser le débogueur Google Web Vitals CLS. Il vous montre un GIF de toutes les fonctionnalités changeantes de votre site Web. Les publicités et les fichiers multimédias sont les coupables les plus courants des scores CLS élevés. D’autres causes peuvent inclure des polices, des CSS asynchrones, des animations et des Iframes. Pour améliorer votre score CLS, vous devrez optimiser ces éléments.
S’assurer que votre site Web a un CLS respectable est aussi important que de s’assurer qu’il a un référencement local fort et un contenu pertinent. Le moteur de recherche de Google a tendance à privilégier les sites Web qui offrent une excellente expérience utilisateur et sont bien optimisés.
À cette fin, voici quelques étapes pour améliorer le score CLS de votre site :
Ajouter des propriétés de dimension à tous les fichiers multimédias
Si vous téléchargez des fichiers multimédias avec des propriétés inconnues, cela augmentera le risque de changement de mise en page car votre navigateur Web devra déterminer la taille de votre image et déterminer l’orientation de la mise en page après le chargement. Ces situations ont plus de chance de se produire pour les images et les fichiers haute résolution volumineux.
En téléchargeant des fichiers multimédias avec des propriétés de taille manquantes, vous avez placé trop de travail entre les mains du navigateur Web. Vous devez ajouter les propriétés de hauteur et de largeur pour chaque fichier multimédia visuel que vous téléchargez. Vous pouvez le faire en affichant votre code source et en ajoutant manuellement les propriétés de largeur et de hauteur.
Assurez-vous que les polices sont chargées localement
Le texte doit rester visible pendant le chargement de la police. La première étape pour y parvenir est de s’assurer que les polices sont chargées localement au lieu d’être extraites de sites Web de polices tiers.
Si vous constatez que vos polices sont extraites d’un site Web tiers, vous pouvez utiliser un plugin tel que OMGF pour les héberger localement et les charger plus rapidement. Non seulement cela améliorera votre score CLS, mais c’est aussi un pas vers une conception respectueuse de l’environnement.
Éviter FOIT et FOUT
Flash de texte invisible (FOIT) se produit lorsque vous ne parvenez pas à spécifier une police de secours. Pendant que votre navigateur Web essaie de charger votre police ou de trouver une alternative, les utilisateurs se verront présenter un espace vide où le texte devrait être.
Pendant le flash de texte sans style (FOUT), la police de secours par défaut du navigateur Web vous sera présentée jusqu’à ce qu’il puisse charger la police spécifiée. Pour résoudre ce problème, vous pouvez ajouter la propriété font-display : échanger.
Si vous avez déjà téléchargé des polices depuis Google, vous remarquerez qu’il ajoute cette balise à la fin de chaque URL. Le moyen le plus simple d’ajouter cette propriété vous-même consiste à utiliser le plug-in Swap Google Fonts Display sur WP.
Cependant, gardez à l’esprit que ce plugin ne fonctionne que pour les polices Google et qu’il ajoute automatiquement la propriété d’échange d’affichage à ces URL. Si vous hébergez des polices localement, vous pouvez utiliser le plugin String Locator pour trouver tous vos fichiers de polices et les modifier. Vous devrez ouvrir la feuille de style de police dans WP et la modifier.
Alternativement, vous pouvez utiliser des plugins de mise en cache, tels que celui qui optimisera automatiquement les polices pour vous en ajoutant la propriété d’échange de police.
Précharger les polices
Pour vous assurer que vous hébergez des polices localement, vous pouvez ensuite précharger vos polices avec des plugins comme :
Si vous ne pouvez pas vous permettre d’utiliser ces plugins, vous pouvez précharger vos polices en éditant votre fichier header.php. Assurez-vous simplement de bien tester votre site après avoir préchargé les polices. Le préchargement d’un trop grand nombre de polices peut nuire à votre site Web. Donc, comme pour toutes les chances majeures de backend, nous vous suggérons de sauvegarder votre site WordPress au préalable.
Désactiver l’optimisation de la diffusion CSS
Si vous utilisez WP Rocket pour optimiser la livraison CSS ou charger CSS de manière asynchrone avec LiteSpeed Cache, cela peut provoquer un flash de contenu sans style (FOUC). Si vous souhaitez améliorer votre score CLS, nous vous recommandons de désactiver ces options dans leurs plugins respectifs.
Alternativement, vous pouvez définir ce que l’on appelle un CSS critique de secours. Cela implique de générer un script de secours critique à l’aide d’un outil tel que Générateur CSS de chemin critique.
La suppression des scripts bloquant le rendu peut également diminuer votre score CLS. Nous vous recommandons de tester d’abord votre CLS avec l’optimisation de la diffusion CSS activée, puis de le tester lorsque vous l’avez désactivé pour comparer.
Désactiver les animations
Si vous utilisez des animations, nous vous recommandons de les désactiver pour la version mobile de votre site Web, car les animations peuvent entraver les temps de chargement de votre site Web. Si vous insistez pour avoir des animations pour votre site Web, nous vous suggérons d’utiliser le CSS transformer et traduire option.
Alternativement, vous pouvez utiliser le plugin Happy Addons Elementor. Cela vous permet d’animer des éléments sans provoquer de décalage de mise en page.
La meilleure façon d’éliminer la plupart des changements de mise en page consiste à modifier la façon dont votre page Web est chargée. À votre tour, vous pouvez augmenter la vitesse et l’efficacité de votre site WordPress. Comme toujours, il s’agit d’améliorer l’expérience utilisateur. Plus votre site Web est réactif, plus il est probable que les utilisateurs le marquent et le revisitent.