Vous rencontrez des problèmes de Cumulative Layout Shift sur votre site web ? Ou vous n’êtes pas sûr de la signification de Cumulative Layout Shift ?
Cumulative Layout Shift, ou CLS en abrégé, est une mesure qui fait partie de l’initiative Core Web Vitals de Google.
En bref, elle mesure la proportion du contenu d’une page web qui se déplace de manière « inattendue ». Un score CLS élevé peut être le signe d’une mauvaise expérience utilisateur et peut également nuire au SEO de votre site.
Dans cet article, vous apprendrez tout ce que vous devez savoir sur le Cumulative Layout Shift et comment il affecte les sites WordPress (et le web en général).
Qu’est-ce que le Cumulative Layout Shift (CLS) ? Explication de la signification de Cumulative Layout Shift
Le Cumulative Layout Shift est la mesure de la quantité de mouvements inattendus d’une page de votre site au cours de la visite d’un utilisateur, telle que mesurée par l’API Layout Instability, une API de test de performance standardisée.
Cumulative Layout Shift (CLS) est l’une des trois mesures de l’initiative Core Web Vitals de Google, avec Largest Contentful Paint (LCP) et First Input Delay (FID).
Afin de comprendre la signification de Cumulative Layout Shift, il est important de parler du décalage de mise en page en général.
Un décalage de mise en page se produit lorsque le contenu de votre site se « déplace » ou se « décale » de manière inattendue.
Ou, en termes techniques, c’est lorsque tout élément visible dans la fenêtre d’affichage change sa position de départ entre deux cadres.
Un exemple courant est celui où vous êtes en train de lire un bloc de texte… mais une publicité à chargement tardif apparait soudainement et repousse le contenu du texte vers le bas de la page.
Voici une autre image d’exemple de Google qui illustre ce phénomène :
Vous avez très certainement rencontré des changements de mise en page en naviguant sur le web, même si vous ne les connaissez pas sous ce nom.
Une seule visite peut comporter plusieurs évènements distincts de changement de disposition. C’est pourquoi la mesure du Cumulative Layout Shift vise à capturer l’ensemble du tableau en mesurant le nombre total de décalages inattendus de la mise en page sur une page*.
*La mesure exacte est un peu plus technique après quelques modifications apportées par Google, mais l’idée de base reste la même. Si vous êtes intéressé par les moindres détails, vous pouvez lire à ce sujet ici.
Pourquoi le Cumulative Layout Shift est-il mauvais ?
La principale raison pour laquelle Cumulative Layout Shift est mauvais est qu’il crée une mauvaise expérience utilisateur sur votre site.
Au mieux, il est légèrement gênant pour vos visiteurs. Dans le pire des cas, il peut amener les visiteurs à effectuer des actions qu’ils ne souhaitent pas entreprendre.
Par exemple, imaginez qu’un utilisateur veuille cliquer sur « Annuler » mais qu’il clique accidentellement sur « Confirmer » parce qu’un décalage de mise en page a déplacé la position des boutons au moment même où la personne cliquait.
En plus d’affecter l’expérience de vos visiteurs, les mauvais scores de Cumulative Layout Shift peuvent également nuire au classement de votre site dans les moteurs de recherche.
À partir de la mise à jour Page Experience de Google (qui a fini d’être déployée en août 2021), Google utilise Core Web Vitals comme l’un de ses facteurs de classement SEO. Comme Cumulative Layout Shift fait partie de Core Web Vitals, cela signifie qu’il peut affecter les performances de recherche de votre site.
En fait, la correction de tout problème de décalage cumulatif de mise en page sur votre site contribuera à l’améliorer pour les visiteurs humains et les moteurs de recherche.
Alors – qu’est-ce qui pourrait causer le décalage cumulatif de mise en page ? C’est ce que nous allons voir maintenant..
Quelles sont les causes du Cumulative Layout Shift ?
Voici un bref aperçu des causes les plus courantes du changement de présentation :
- Ne pas définir les dimensions des images, des iframes, des vidéos ou d’autres éléments intégrés.
- Problèmes avec le chargement des polices personnalisées, qui peuvent rendre le texte invisible ou changer de taille lors du chargement des polices personnalisées.
- Diffusion d’annonces responsives (par exemple, AdSense) de différentes tailles (et non réservation d’espace pour ces annonces).
- L’injection dynamique de contenu avec des extensions (avis de consentement aux cookies, formulaires de génération de prospects, etc.)
- Utilisation d’animations sans la propriété CSS Transform.
Nous approfondirons ces questions plus tard dans cet article en vous montrant comment résoudre chaque problème courant.
Comment mesurer le Cumulative Layout Shift : Les meilleurs outils de test
Il existe un certain nombre d’outils que vous pouvez utiliser pour tester le score de décalage cumulatif de la mise en page de votre site.
Le Cumulative Layout Shift fait partie de l’audit Lighthouse. Par conséquent, tout outil de test de vitesse qui utilise Lighthouse dans le cadre de son audit comprendra les données CLS, notamment PageSpeed Insights, GTmetrix, Chrome Developer Tools et de nombreux autres outils de test populaires.
Voici quelques-uns des principaux outils de test Cumulative Layout Shift qui se distinguent par leur utilité..
PageSpeed Insights
PageSpeed Insights est l’un des outils les plus utiles pour évaluer l’état du Cumulative Layout Shift de votre site car il vous fournit deux sources de données :
- Données de terrain – données réelles sur les utilisateurs provenant du rapport Chrome UX (en supposant que votre site a un trafic suffisant pour être inclus dans le rapport). Cela vous permet de voir les données réelles de décalage cumulatif de mise en page pour vos véritables visiteurs humains. Il s’agit également des données que Google utilise comme signal de classement.
- Données de laboratoire – données de test simulées recueillies par Lighthouse (c’est ce que PageSpeed Insights utilise pour générer ses rapports d’analyse des performances).
Vous pouvez également afficher les données pour le bureau et le mobile en passant d’un onglet à l’autre.
Remarque – les données de laboratoire ne peuvent mesurer que les décalages de mise en page qui se produisent pendant le chargement de la page. Vos résultats pour les utilisateurs réels peuvent donc être légèrement plus élevés si les décalages de mise en page se produisent après le chargement de la page.
Outils du développeur Chrome
Chrome Developer Tools offre des ressources utiles pour mesurer CLS et déboguer les changements de présentation individuels qui se produisent sur votre site.
Tout d’abord, vous pouvez exécuter un audit Lighthouse pour connaître le score CLS de votre site. Voici comment procéder :
- Ouvrez les Outils du développeur de Chrome.
- Accédez à l’onglet Lighthouse.
- Configurez votre test.
- Cliquez sur le bouton Analyser le chargement de la page pour exécuter le test.
Après une courte attente, vous devriez voir apparaitre l’interface d’audit Lighthouse normale (qui ressemble beaucoup à PageSpeed Insights).
Cependant, Chrome Developer Tools vous permet également de creuser plus profondément dans CLS avec son analyse de rendu. Cela vous permettra de mettre en évidence les régions de décalage de mise en page individuelles dans votre site, ce qui vous aidera à les déboguer.
Voici comment :
- Cliquez sur l’icône des « trois points » dans le coin supérieur droit de l’interface Chrome Developer Tools.
- Sélectionnez Plus d’outils → Rendu, ce qui devrait ouvrir une nouvelle interface en bas.
- Cochez la case pour les régions de décalage de mise en page.
Maintenant, rechargez la page que vous souhaitez tester et Chrome devrait mettre en évidence toutes les zones avec des décalages de mise en page à l’aide d’un cadre bleu. Ces surlignages apparaitront sur la page réelle pendant le chargement du contenu et disparaitront une fois le décalage terminé.
Si les surbrillances apparaissent trop rapidement pour que vous puissiez les suivre, vous pouvez ralentir votre site et le regarder se charger image par image à l’aide de l’onglet Performances.
Console de recherche Google
Bien que Google Search Console ne vous permette pas d’exécuter des tests de laboratoire pour déterminer le Cumulative Layout Shift, elle vous offre un moyen facile de voir les problèmes de décalage cumulatif de mise en page sur votre site, tels que mesurés par le rapport Chrome UX.
L’avantage d’utiliser Google Search Console par rapport à d’autres outils est qu’il vous permet de voir rapidement les problèmes sur l’ensemble de votre site plutôt que de tester page par page.
Voici comment visualiser les problèmes potentiels sur votre site :
- Allez sur Google Search Console. Si vous n’avez pas encore vérifié votre site, vous pouvez suivre notre guide sur la façon de vérifier Google Search Console.
- Ouvrez le rapport Core Web Vitals sous Expérience.
- Cliquez sur Ouvrir le rapport à côté de Mobile ou Desktop, selon ce que vous voulez analyser.
Le cas échéant, Google mettra en évidence les URL présentant des scores de décalage cumulatif de mise en page problématiques.
Remarque – vous ne verrez les données ici que si votre site a un trafic mensuel suffisant pour être inclus dans le rapport Chrome UX.
Générateur GIF Layout Shift
Comme son nom l’indique, Layout Shift GIF Generator génère un GIF des décalages de mise en page sur votre site afin que vous puissiez voir exactement quel contenu pose problème. Il vous donnera également votre score, bien que ce ne soit pas l’objectif principal de l’outil.
Il vous suffit d’ajouter l’URL que vous souhaitez tester et de choisir entre mobile et bureau. Ensuite, il génèrera un GIF de votre site avec des surlignages verts montrant les éléments exacts qui se déplacent.
En voyant quels éléments se déplacent et contribuent à votre score Cumulative Layout Shift, vous pouvez savoir exactement où vous devez vous concentrer lorsqu’il s’agit d’améliorer les scores de votre site.
Qu’est-ce qu’un bon score de Cumulative Layout Shift ?
Selon l’initiative Core Web Vitals de Google, un bon score de décalage cumulatif de mise en page est de 0,1 ou moins.
Si votre score de décalage cumulatif de mise en page se situe entre 0,1 et 0,25, Google le définit comme « à améliorer ».
Et si votre score Cumulative Layout Shift est supérieur à 0,25, Google le définit comme « Médiocre ».
Voici un graphique provenant du site Web Core Web Vitals de Google qui présente visuellement ces scores :
Comment corriger le Cumulative Layout Shift dans WordPress (ou d’autres plateformes)
Maintenant que vous comprenez ce qui se passe avec le décalage cumulatif de la mise en page, il est temps de passer à des conseils pratiques sur la façon de corriger le décalage cumulatif de la mise en page dans WordPress.
Bien que ces conseils proviennent d’un angle WordPress, ils sont tous universels et vous pouvez les appliquer à d’autres outils de création de sites web.
Spécifiez toujours les dimensions des images
L’une des causes les plus courantes du décalage de mise en page est le déplacement du contenu par des images à chargement tardif, surtout si vous utilisez des tactiques telles que le chargement différé.
Pour éviter cela, vous pouvez spécifier les dimensions d’une image dans le code lorsque vous l’intégrez. De cette façon, le navigateur du visiteur réservera cet espace même si l’image n’a pas encore été chargée, ce qui signifie que l’image n’aura pas besoin de déplacer le contenu.
Si vous intégrez des images via l’éditeur WordPress (que ce soit l’éditeur de blocs Gutenberg ou l’éditeur classique TinyMCE), il n’est pas nécessaire de spécifier manuellement les dimensions de l’image car WordPress le fera pour vous automatiquement.
Il en va de même pour les extensions de construction de pages populaires telles que Elementor, Divi, Beaver Builder, et ainsi de suite.
Cependant, des problèmes peuvent survenir si vous intégrez manuellement des images en utilisant votre propre code, ce qui peut arriver si vous ajoutez du contenu à un plugin, modifiez les fichiers de modèle de votre thème enfant, etc.
Le code HTML pour l’intégration d’une image de base ressemble à ceci :
<img src="https://kinsta.com/example-image.jpg" alt="An example image">
Pour préciser ses dimensions, vous pouvez ajouter des paramètres de hauteur et de largeur. Voici un exemple de ce à quoi cela peut ressembler pour une image de 600x300px :
<img src="https://kinsta.com/example-image.jpg" alt="An example image" width="600" height="300">
De nombreuses extensions WordPress de performance comprennent également des fonctions permettant d’automatiser cette opération, comme les fonctions d’ajout de dimensions d’images manquantes dans WP Rocket ou Perfmatters.
Spécifiez toujours les dimensions des vidéos, des iframes et des autres éléments intégrés
Tout comme pour les images, vous voudrez également spécifier les dimensions lorsque vous ajoutez des vidéos, des iframes ou d’autres éléments intégrés.
Les outils d’intégration de la plupart des sites web devraient automatiquement spécifier les dimensions de l’intégration.
Par exemple, si vous regardez le code d’intégration de YouTube, vous verrez qu’il inclut les dimensions :
Il en va de même pour de nombreux autres services.
Toutefois, si votre code d’intégration ne précise pas la hauteur et la largeur, vous pouvez ajouter manuellement ces dimensions au code d’intégration.
Corrigez et optimisez le chargement des polices
Les problèmes de chargement et d’optimisation des polices peuvent être une autre source courante de décalages de mise en page via deux problèmes potentiels :
- Flash de texte invisible (FOIT) – la page se charge initialement sans qu’aucun contenu textuel n’apparaisse. Une fois la police personnalisée chargée, le texte apparait soudainement (ce qui peut provoquer le décalage du contenu existant).
- Flash de texte non stylisé (FOUT) – le contenu textuel se charge en utilisant une police système (non stylisée). Une fois la police personnalisée chargée, le texte passe à cette police personnalisée, ce qui peut entrainer un décalage du contenu car la taille et l’espacement du texte peuvent être différents.
Pour éviter ces problèmes, vous devez optimiser la façon dont vous chargez les polices sur votre site (ce qui peut également avoir certains avantages pour les performances de votre site).
Hébergez les polices localement et préchargez-les
En hébergeant les polices localement et en utilisant le préchargement, vous indiquez aux navigateurs des visiteurs d’accorder une plus grande priorité au chargement des fichiers de polices personnalisés.
En chargeant les fichiers de police avant les autres ressources, vous pouvez vous assurer que les fichiers de police sont déjà chargés lorsque le navigateur commence à rendre votre contenu, ce qui peut éviter les problèmes de FOUT et FOIT.
Pour savoir comment héberger des polices localement dans WordPress, vous pouvez lire notre guide complet sur l’hébergement local des polices dans WordPress.
À partir de là, vous pouvez configurer le préchargement des polices manuellement ou à l’aide d’une extension. La plupart des extensions de performance incluent des options pour précharger les polices, notamment WP Rocket, Perfmatters, Autoptimize, et d’autres.
Si vous utilisez Google Fonts, vous pouvez également utiliser l’extension gratuite OMGF pour héberger les polices localement et les précharger.
Vous pouvez également précharger manuellement les polices en ajoutant le code à la section <head> de votre site.
Voici un exemple de code – veillez à le remplacer par le nom/l’emplacement réel du fichier de police que vous souhaitez précharger :
<link rel="preload" href="https://kinsta.com/fonts/roboto.woff2" as="font/woff2" crossorigin>
Vous pouvez l’ajouter directement en utilisant un thème enfant WordPress ou l’injecter avec le crochet wp_head et une extension comme Code Snippets.
Définissez Font-Display sur Optional ou Swap
La propriété CSS Font-Display vous permet de contrôler le comportement de rendu des polices sur votre site et d’éviter FOIT.
Essentiellement, elle vous permet d’utiliser une police de secours dans les situations où votre police personnalisée n’a pas encore été chargée.
Il existe deux options principales que vous pouvez utiliser pour résoudre le problème de FOIT :
- Swap – utilise une police de secours pendant le chargement de la police personnalisée, puis la remplace par votre police personnalisée une fois celle-ci chargée.
- Facultatif – permet au navigateur de déterminer s’il doit utiliser ou non une police personnalisée en fonction de la vitesse de connexion d’un visiteur.
Avec Swap, le navigateur passera toujours à la police personnalisée une fois celle-ci chargée.
Bien que Swap résolve complètement FOIT, il peut conduire à FOUT. Pour minimiser ce problème, vous devez vous assurer que la police de repli utilise un espacement identique à celui de la police personnalisée (du moins autant que possible). De cette façon, même si le style de police change, cela n’entrainera pas de décalage de la mise en page car l’espacement sera le même.
Avec Optional, le navigateur donne 100 ms à la police personnalisée pour se charger. Toutefois, si la police personnalisée n’est pas disponible d’ici là, le navigateur conservera la police de secours et ne la remplacera jamais par la police personnalisée pour cette page (il utilisera la police personnalisée pour les pages suivantes, car il est probable que le fichier de police ait été téléchargé et mis en cache à ce moment-là).
Si Optional peut résoudre les problèmes de FOIT et de FOUT, l’inconvénient est que le visiteur risque d’être coincé avec la police de secours pour son premier affichage de page.
Si vous êtes à l’aise avec les CSS, vous pouvez modifier manuellement la propriété Font-Display dans la feuille de style de votre thème enfant.
Si vous ne vous sentez pas à l’aise pour le faire, vous pouvez également trouver des extensions qui vous aideront :
- Swap Google Fonts Display – permet d’activer facilement la permutation de l’affichage des polices Google Fonts.
- Asset CleanUp – prend en charge les polices Google Fonts gratuites et les polices locales personnalisées avec la version Pro.
- Perfmatters – propose une fonctionnalité pour les Google Fonts.
Si vous utilisez Elementor, ce dernier comprend également une option intégrée pour le faire. Allez dans Elementor → Réglages → Avancés. Vous pouvez ensuite définir la liste déroulante Google Fonts Load égale à Swap ou Optional selon vos préférences :
Trop complexe ? Envisagez une pile de polices système !
Si toute cette discussion sur le préchargement et l’affichage des polices est un peu confuse, une solution simple consiste à utiliser une pile de polices système au lieu d’une pile de polices personnalisée.
Bien que cela limite vos options de conception, cela résoudra complètement les problèmes de polices de type Cumulative Layout Shift, FOIT et FOUT. De plus, votre site se chargera beaucoup plus rapidement.
Si cela vous intéresse, consultez le guide de Brian sur l’utilisation d’une pile de polices système sur WordPress.
Réservez de l’espace pour les annonces (si vous utilisez des annonces d’affichage)
Si vous utilisez des annonces publicitaires, il est important que vous réserviez un espace pour ces annonces dans le code de votre site. Cela suit la même idée que de réserver de l’espace pour les images, les vidéos, et les intégrations.
Cependant, les annonces d’affichage méritent une mention spéciale, car il est très fréquent que les annonces d’affichage se chargent tardivement si vous utilisez un type de technologie d’enchères. Cela est dû au fait que la technologie d’enchères a besoin de temps pour travailler et déterminer quelle annonce afficher.
Cela peut également être un problème avec les annonces automatiques AdSense si vous avez des emplacements d’annonces dynamiques, car, en plus du problème d’enchères, AdSense chargera également des annonces de différentes tailles (vous ne connaitrez donc pas forcément la taille de l’annonce à l’avance).
Si vous utilisez l’un des réseaux populaires d’annonces d’affichage tels que Mediavine ou AdThrive, ils devraient déjà proposer des outils pour vous aider à éviter les décalages de mise en page avec vos annonces. Par exemple, si vous ouvrez la zone des Réglages publicitaires de Mediavine, vous pouvez activer une bascule permettant d’optimiser les annonces pour CLS:
Pour optimiser AdSense pour le décalage cumulatif de mise en page, c’est un peu plus délicat.
Une solution courante consiste à ajouter un élément enveloppant <div> autour de chaque unité publicitaire qui spécifie une hauteur minimale à l’aide de la propriété CSS min-height. Vous pouvez également utiliser des requêtes média pour modifier la hauteur minimale en fonction du périphérique de l’utilisateur.
Google recommande de définir une hauteur minimale égale à la plus grande taille d’annonce possible. Bien que cela puisse entrainer un gaspillage d’espace si une annonce plus petite est diffusée, il s’agit de la meilleure option pour éliminer tout risque de décalage de la mise en page.
Lorsque vous configurez cet élément d’habillage, veillez à utiliser un ID CSS plutôt qu’une classe, car AdSense supprime souvent la classe CSS des objets parents.
Voici à quoi pourrait ressembler le CSS :
Et voici à quoi pourrait ressembler l’intégration AdSense :
Sur l’interface publique, vous verrez maintenant que votre site réserve un espace pour cette annonce, même s’il est vide :
Soyez intelligent lorsque vous injectez dynamiquement du contenu avec des plugins
De nombreux sites WordPress injectent dynamiquement du contenu pour des fonctions telles que les avis de consentement aux cookies, le contenu connexe, les formulaires d’opt-in par e-mail, etc.
Bien que cela puisse se faire sans problème, vous devez éviter de le faire d’une manière qui entraine des modifications de la mise en page.
Une bonne pratique de conception web consiste à ne jamais injecter de contenu au-dessus du contenu existant, à moins que l’utilisateur n’ait spécifiquement effectué une interaction (par exemple, en cliquant sur un bouton).
Par exemple, si vous ajoutez une notification de consentement aux cookies, vous ne voulez pas l’injecter en haut de votre page, car le contenu serait repoussé vers le bas (à moins que vous ne réserviez déjà un espace pour la bannière de consentement aux cookies).
Au lieu de cela, vous devriez afficher l’avis en bas de la page, ce qui évitera de déplacer vers le bas le contenu visible.
Pour voir si le contenu dynamique est à l’origine du problème, vous pouvez utiliser les outils de visualisation mentionnés ci-dessus (par exemple, le générateur de Layout Shift GIF).
Si vous constatez que le contenu d’une extension spécifique déclenche des décalages de mise en page, vous pouvez envisager d’ajuster les réglages de cette extension ou de passer à une autre extension.
Par exemple, certaines extensions de consentement aux cookies sont meilleures que d’autres en ce qui concerne les décalages de mise en page. Cela vaut donc la peine d’expérimenter avec différentes extensions si vous rencontrez des problèmes.
Si vous voulez creuser encore plus profondément dans le comportement des extensions, vous pouvez utiliser un outil de surveillance des performances des applications. Si vous êtes hébergé par Kinsta, l’outil APM de Kinsta est disponible gratuitement dans votre tableau de bord MyKinsta, ou vous pouvez trouver d’autres outils APM.
Pour vous aider à tester les extensions, vous pouvez également utiliser les sites de staging de Kinsta ou l’outil de développement local DevKinsta.
Utilisez la propriété CSS Transform pour les animations chaque fois que possible
Si vous utilisez des animations sur votre site, celles-ci peuvent être une autre cause fréquente de décalage de la mise en page.
Pour éviter les problèmes d’animations causant des décalages de mise en page, vous devriez utiliser la fonction de transformation CSS pour les animations plutôt que d’autres tactiques :
- Plutôt que d’utiliser les propriétés height et width, utilisez transform : scale()
- Si vous souhaitez déplacer des éléments, utilisez transform : translate() au lieu de top, bottom, right, ou left
Il s’agit plutôt d’un conseil technique, il est donc peu probable que vous ayez à le faire, à moins que vous n’ajoutiez votre propre CSS. Pour en savoir plus, vous pouvez lire la page de Google sur les CLS et les animations/transitions.
Résumé
Si votre site web a un score élevé de Cumulative Layout Shift, il est important de le corriger à la fois pour créer une meilleure expérience pour vos visiteurs humains et pour maximiser les performances de votre site dans les résultats de recherche de Google.
Deux des problèmes les plus courants sont les dimensions manquantes pour les images/embeds et les problèmes de chargement des polices. Si vous les corrigez, vous devriez obtenir un bien meilleur score.
D’autres sites devront peut-être aller plus loin et se pencher sur le chargement des publicités, le contenu dynamique et les animations. Si vous avez du mal à mettre en œuvre ces types d’optimisations vous-même, vous pouvez envisager de travailler avec une agence WordPress ou un freelance.
Pour en savoir plus sur Core Web Vitals en général, vous pouvez lire le guide Kinsta complet sur Core Web Vitals.
Et si vous voulez un hébergeur WordPress qui peut vous aider à créer un site très performant qui se comporte bien dans Core Web Vitals, envisagez d’utiliser l’hébergement WordPress infogéré de Kinsta – nous migrerons vos sites WordPress gratuitement!
Laisser un commentaire