Cumulative Layout Shift (CLS) dans WordPress : comment l'éliminer

Avec ce chapitre sur Cumulative Layout Shift, nous approchons de la fin de notre mini-série sur Core Web Vitals pour les utilisateurs de WordPress. Dans les chapitres précédents sur Largest Contentful Paint et First Input Delay, nous avons déjà parlé de la signification exacte de ces termes et de la manière d'optimiser votre site Web pour chacun d'eux. Maintenant, nous voulons faire la même chose pour CLS.

Dans ce qui suit, nous expliquons ce qu'est exactement le changement de mise en page cumulé, comment il est calculé, comment tester les performances de votre site Web dans ce domaine et quelle est la bonne valeur à viser. Après cela, nous vous donnons des instructions étape par étape pour résoudre tous les problèmes CLS qui pourraient exister sur votre site WordPress afin de les améliorer.

Une fois terminé, avec les deux autres articles de cette série, nous espérons que vous vous sentirez prêt à rendre votre site Web digne de l'approbation de Google.

Quelle est la signification du décalage de mise en page cumulé ?

Comme d'habitude, commençons par une définition. En une phrase, CLS mesure quand quelque chose change sur une page Web qui provoque le déplacement (ou le déplacement si vous voulez) des éléments qui s'y trouvent sans interaction de l'utilisateur.

Il se peut qu'un formulaire ou une annonce dans l'article que vous lisez se charge en retard et se déplace vers le bas du paragraphe que vous lisez, vous devez donc faire défiler pour retrouver votre place. Ou pire, cela change la position d'un bouton ou d'un lien à un moment inopportun afin que vous finissiez par cliquer sur quelque chose que vous ne vouliez pas.

Par conséquent, cela peut être quelque chose de légèrement ennuyeux à carrément exaspérant. Le décalage de mise en page cumulé est la métrique qui capture ce comportement afin de comprendre le problème afin que vous puissiez le corriger.

Pourquoi c'est important?

Un site Web nerveux perturbe complètement ce que vous faites actuellement et peut même avoir des conséquences gênantes dans la vie réelle. Comme vous pouvez l'imaginer, c'est vraiment mauvais pour l'expérience utilisateur et peut amener les visiteurs à partir. Cela est particulièrement vrai sur les smartphones où, en raison de la taille de l'écran, les petits décalages ont un impact plus important que sur les ordinateurs de bureau.

Parce que c'est tellement perturbateur, Google met beaucoup d'accent sur cette métrique, ce qui en fait l'une des valeurs fondamentales sur lesquelles il juge les sites Web. Donc, si vous voulez plaire à la fois à vos visiteurs et aux personnes (je veux dire, aux robots) qui décident où vous apparaissez dans les résultats de recherche, faites de votre mieux pour éliminer le changement de mise en page cumulatif sur votre site Web.

Qu'est-ce qui cause le SLC ?

La cause du déplacement des éléments du site Web est généralement due au fait que les fichiers d'une page Web se chargent à des vitesses différentes. Un autre facteur sont les éléments de page qui sont ajoutés dynamiquement pendant ou après le chargement de la page. Les exemples typiques incluent :

• Des visuels comme des images ou des vidéos sans dimensions correctement définies
• Contenu tiers comme les publicités, les bannières, les intégrations ou les iframes
• Polices Web plus petites ou plus grandes que les polices de secours initialement affichées

Une autre source de CLS peut être un balisage CSS et JavaScript en conflit. Lorsqu'ils se bloquent, cela bloque le processus de chargement des pages Web.

Comment le décalage de mise en page cumulé est-il calculé ?

Contrairement à ses prédécesseurs, le calcul du Cumulative Layout Shift est un peu plus compliqué. Pour le comprendre, nous devons d'abord définir certains termes:

• Changement de disposition — C'est lorsqu'un élément déjà visible sur la page se déplace de sa position de départ après avoir déjà été rendu. Ces types d'éléments sont appelés éléments instables (créatifs, je sais).
• Changements de mise en page attendus ou inattendus — Les changements de mise en page ne sont négatifs que si l'utilisateur ne les attend pas. Il existe également des changements de mise en page qui sont attendus et bienvenus, comme après une interaction avec une page Web (par exemple, soumettre un formulaire). Les animations et transitions CSS sont d'autres exemples de changements de mise en page attendus. Pour tenir compte de cela, CLS considère que tous les changements de mise en page qui se produisent dans les 500 ms suivant une interaction de l'utilisateur sont prévisibles.
• Fraction d'impact — Le pourcentage de la fenêtre d'affichage (la partie visible du site Web à l'écran) qu'un élément mobile impacte sous forme de nombre décimal (par exemple 0,5 s'il impacte 50 % de l'écran).
• Fraction de distance — Distance en pourcentage de l'écran qu'un élément instable déplace pendant un quart de travail. Également donné sous forme de nombre décimal.
• Score de changement de disposition — Il est calculé en multipliant la fraction d'impact par la fraction de distance (par exemple 0,4 x 0,15 = 0,06). Par conséquent, les grands éléments qui se déplacent sur une grande distance obtiennent un score plus élevé que les petits éléments qui se déplacent sur une courte distance.

CLS capture la plus grande occurrence de scores de décalage de mise en page inattendus pendant un intervalle de cinq secondes. Évidemment, plus bas c'est mieux.

En fin de compte, vous n'avez pas vraiment besoin de connaître les détails. Tout ce que vous devez savoir, c'est comment mesurer le CLS et quelle valeur votre site doit viser.

Qu'est-ce qu'un bon score de changement de mise en page ?

Un bon score est d'avoir une valeur CLS de 0,1 ou moins. Jusqu'à 0,25 doit être amélioré, tout ce qui est au-dessus est mauvais et entraînera probablement une réduction des performances de recherche.

Comment tester le changement de mise en page cumulatif

Afin de pouvoir améliorer le score CLS de votre site web, vous devez d'abord savoir où vous en êtes. Il est difficile de savoir si cela se produit même, car les pages Web ne se comportent pas toujours de la même manière sur différents appareils. Par conséquent, vous ne le voyez peut-être pas sur un site de développement, mais les visiteurs peuvent toujours le rencontrer. Pour cette raison, il est préférable de le tester.

Il existe plusieurs façons de vérifier si Cumulative Layout Shift est un problème sur votre site WordPress. Ils sont à peu près les mêmes que pour les autres métriques Core Web Vitals. Votre première escale doit toujours être PageSpeed ​​Insights, qui affiche la métrique sur sa page de résultats.

Notez qu'il utilise à la fois les résultats de laboratoire et les données réelles du rapport d'expérience utilisateur Chrome. Il affiche même des images des changements de mise en page et de l'élément source. De cette façon, vous avez une meilleure idée de la nature du problème et de l'endroit où il se produit.

De plus, PageSpeed ​​Insights vous donne le ratio de la contribution de chaque élément au score CLS. Cela vous permet de prioriser ce qui a le plus grand impact négatif.

En dehors de cela, vous pouvez également utiliser les éléments suivants :

• Le rapport Core Web Vitals dans Google Search Console
• Outils de développement du navigateur Chrome
• Phare
• bibliothèque JavaScript web-vitals

Il existe également une extension Chrome appelée CLS Visualizer. Il met en évidence les éléments changeants de vos pages Web. Pour Firefox, essayez SpeedVitals.

Comment réduire le changement de mise en page cumulatif sur votre site WordPress

Si vous remarquez que CLS est un problème sur votre site WordPress, vous souhaitez probablement le résoudre. C'est de cela qu'il s'agit dans le reste de cet article.

Fournir des dimensions de média

De nombreuses solutions deviennent déjà claires lorsque vous examinez les causes du changement de disposition cumulé ci-dessus. Comme mentionné, un coupable courant de CLS sont les images et autres médias sans valeurs width et height définies. Sans dimensions fixes, le navigateur ne sait pas quelle place leur réserver. Cela est particulièrement vrai pour les médias qui apparaissent plus tard sur la page, comme dans le cas d'un chargement différé.

Malheureusement, il est courant dans la conception réactive de ne pas donner de dimensions d'image spécifiques. Le plus souvent, les images sont définies sur width ou max-width: 100%; et height: auto; . Ensuite, c'est au navigateur de déterminer quelles sont les dimensions réelles lorsqu'il télécharge l'image.

Dans le passé, cela conduisait souvent exactement au type de comportement que nous essayons d'éviter. Des images ont soudainement surgi, déplaçant tout le reste. Par conséquent, vous devez toujours fournir des dimensions pour vos visuels ou au moins un format d'image CSS.

Heureusement, si vous utilisez WordPress, votre site Web définit automatiquement les dimensions de l'image. Par conséquent, le problème n'entre généralement pas en jeu.

Si ce n'est pas le cas pour une image spécifique, vous pouvez corriger cela dans l'éditeur Gutenberg.

Gérer les publicités, les intégrations et les contenus similaires

Le contenu tiers chargé dans les pages est souvent l'une des principales sources de CLS. Ce sont des cas où vous ne contrôlez pas nécessairement la taille du produit final. Ses éditeurs ne savent pas non plus à l'avance combien d'espace est disponible sur le site sur lequel il apparaît. Par conséquent, vous devez déclarer sa taille de la même manière que pour les images.

Heureusement encore pour les utilisateurs de WordPress, lorsque vous utilisez l'éditeur Gutenberg pour intégrer automatiquement du contenu provenant de réseaux sociaux, de portails vidéo ou de fournisseurs similaires dans votre contenu, l'éditeur ajoute automatiquement les déclarations width et height appropriées.

De cette façon, même si le contenu prend plus de temps à charger que le reste de la page, sa taille correcte est déjà réservée. Par conséquent, la mise en page ne change pas lorsqu'elle apparaît.

Pour les autres types de contenu que vous ajoutez manuellement, assurez-vous d'ajouter manuellement width et height . Si vous ne connaissez pas la hauteur exacte que prendra une annonce ou un autre élément, ajoutez-y au moins une propriété min-height . Cela permet toujours des éléments plus grands mais réserve de l'espace et peut éliminer ou au moins réduire le CLS sur la page.

Une autre technique pour minimiser le changement de mise en page cumulatif dans WordPress pour le contenu tiers consiste à éviter de le placer en haut de la page. Plus il est haut, plus le contenu en dessous peut pousser vers le bas et plus votre score CLS est élevé. Par conséquent, si vous le pouvez, placez-le au milieu ou en bas.

Optimiser le contenu dynamique

Le contenu dynamique est un élément de page qui est ajouté à une page après son chargement. L'exemple précédent était des images chargées paresseusement, mais il inclut généralement également des éléments tels que des bannières, des formulaires ou même des produits connexes qui apparaissent sur le défilement.

Naturellement, si vous ne les planifiez pas correctement, cela peut également entraîner des changements de mise en page. Voici quelques façons d'éviter cela :

• Réserver de l'espace à l'avance - Comme ci-dessus, si vous avez un conteneur avec une taille fixe dans lequel vous pouvez charger le contenu, il maintient la mise en page stable même s'il arrive plus tard. Un conteneur fixe peut également être un carrousel ou quelque chose de similaire.
• Connectez-le avec une interaction de l'utilisateur - Si le contenu se charge dynamiquement après une action de l'utilisateur, il n'entraîne aucune pénalité pour CLS, même si la mise en page change. Gardez cependant à l'esprit la coupure de 500 ms.
• Charger le contenu hors écran - Si vous chargez du contenu en dehors de la fenêtre d'affichage, puis fournissez à l'utilisateur un avis indiquant qu'il est disponible et une option pour y accéder, il n'y a pas non plus de CLS. Les plateformes de médias sociaux aiment le faire pour les nouvelles mises à jour.

Améliorer la gestion des polices Web

Les polices Web peuvent également provoquer un changement de mise en page. Les deux formes courantes sont que vous voyez d'abord du texte sans style avant l'arrivée de la police Web (Flash of Unstyled Text ou FOUT) ou que vous ne voyez aucun texte au début, puis il apparaît avec la police Web (Flash of Invisible Text ou FOI).

Les deux peuvent entraîner des changements de mise en page et voici ce que vous pouvez faire à ce sujet :

• Utilisez le bon format de police — Si vous chargez des polices personnalisées sur votre site Web WordPress, assurez-vous d'utiliser le format WOFF2 ou WOFF. Ceux-ci ont la plus petite empreinte, se chargent le plus rapidement et aident à éviter les problèmes ci-dessus.
• Utilisez la bonne police de secours — Si vous utilisez une police de secours très différente de votre police actuelle, le moment où le changement se produit entraînera probablement un mouvement de mise en page. Vous pouvez éviter cela en utilisant une police de retombées proche du produit final. Le Font Style Matcher peut vous aider à en trouver un.
• Précharger les polices — Placez les ressources de polices Web au début du document et ajoutez-leur rel=preload . De cette façon, les navigateurs les prioriseront.

Il est également utile d'héberger les polices localement ou au moins d'utiliser un CDN pour les mettre à la disposition des utilisateurs le plus rapidement possible. De cette façon, vous réduisez la probabilité de changer de police tardivement pendant le chargement et de provoquer des changements de mise en page.

Ne laissez pas le changement de mise en page cumulatif perturber votre site WordPress

Le changement de mise en page cumulé est l'une des trois mesures que Google considère comme essentielles et la dernière de cette série approfondie. C'est un indicateur important pour l'expérience utilisateur car il mesure la stabilité de la mise en page pendant et même après le chargement.

Comme les autres métriques de Core Web Vitals, cela compte non seulement pour les utilisateurs, mais aussi pour le classement de recherche et est donc important pour le succès de votre site Web.

À présent, vous savez de quoi il s'agit, comment il est calculé, ce qui le cause et comment le tester et le gérer. Que votre mise en page soit toujours solide, mon ami.

Avez-vous des conseils supplémentaires pour empêcher le changement de mise en page cumulatif dans WordPress ? Faites-nous savoir dans les commentaires ci-dessous!