Comment améliorer le changement de mise en page cumulatif (CLS) pour WordPress

La plupart des sites Web sont conçus pour être accessibles à partir de divers appareils avec différentes tailles d'écran et résolutions. Ainsi, maintenir la même expérience sur plusieurs plates-formes peut être difficile. WordPress facilite la conception Web multiplateforme. Cependant, quelle que soit la forme de développement de logiciels, la création d'une solution unique peut s'avérer compliquée.

Dans le cas du développement Web, les utilisateurs qui naviguent d'une page à l'autre sur un site Web peuvent parfois rencontrer ce que l'on appelle le Cumulative Layout Shift (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 la mise en page entière 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 changement de mise en page cumulé ?

La forme perceptible la plus courante de CLS est le décalage dans le chargement des images. Sur les sites Web complexes chargés 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 défiliez 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 médiatisé, plus la probabilité de changements de mise en page est élevée.

Par exemple, de simples pages Web de moteur de recherche 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.

Qu'est-ce qui cause le décalage de mise en page cumulé ?

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 somme, 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 que la disposition change en temps réel, cela ne signifie pas nécessairement qu'aucun changement ne se produit. 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 de ce que l'on appelle une fenêtre de session. Une fenêtre de session décrit le nombre de changements de mise en page 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 :

 Score CLS = Fraction de distance x Fraction d'impact

La fraction d'impact décrit à quel point un élément instable affecte la zone perceptible entre deux images. La fraction de distance décrit la quantité de décalage d'un élément 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 à calculer manuellement le CLS de votre site Web. Il existe une multitude d'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 connu, nous l'utiliserons pour notre exemple.

Pour mesurer votre score CLS, accédez à la page d'accueil PageSpeed ​​Insight, insérez l'URL de votre page Web dans le champ de texte supérieur, puis cliquez sur le bouton Analyser . 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, plus que probablement, nous trouverons un score CLS inférieur à 0,10. Lors 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 avoir un score CLS de type Amazon.

Comment optimiser le 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 les polices, le CSS asynchrone, les animations et les Iframes. Pour améliorer votre score CLS, vous devrez optimiser ces éléments.

S'assurer que votre site Web dispose d'un CLS respectable est aussi important que de s'assurer qu'il dispose d'un référencement local solide et d'un contenu pertinent. Le moteur de recherche de Google a tendance à privilégier les sites Web qui offrent une excellente expérience utilisateur et qui 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 chances 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 width et height.

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 consiste à 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 plug-in 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.

Évitez FOIT et FOUT

Un flash de texte invisible (FOIT) se produit lorsque vous ne spécifiez pas de 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 que vous avez spécifiée. Pour résoudre ce problème, vous pouvez ajouter la propriété font-display: swap .

Si vous avez déjà téléchargé des polices de 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 plug-in String Locator pour rechercher 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, comme celui qui optimisera automatiquement les polices pour vous en ajoutant la propriété d'échange de polices.

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 :

• Fusée WP
• Conseils de ressources avant la fête
• Permatters

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 tester soigneusement votre site après avoir préchargé les polices. Précharger trop de polices peut nuire à votre site Web. Donc, comme pour toutes les grandes chances de backend, nous vous suggérons de sauvegarder votre site WordPress au préalable.

Désactiver l'optimisation de la livraison 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 non stylé (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 Critical Path CSS Generator.

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 livraison 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 ralentir 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 les options de transformation et de traduction CSS.

Alternativement, vous pouvez utiliser le plugin Happy Addons Elementor. Cela vous permet d'animer des éléments sans provoquer de changements de disposition.

La meilleure façon d'éliminer la plupart des décalages de mise en page consiste à modifier le mode de chargement de votre page Web. En retour, 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 les utilisateurs sont susceptibles de le mettre en signet et de le revisiter.