Explication du changement de mise en page cumulatif : comment corriger votre score

Vous rencontrez des problèmes de changement de mise en page cumulatif sur votre site Web ? Ou vous ne savez même pas ce que signifie Cumulative Layout Shift ?

Le Cumulative Layout Shift, ou CLS en abrégé, est une mesure qui fait partie de l'initiative Core Web Vitals de Google.

En un mot, il mesure la quantité de contenu d'une page Web qui change « de manière inattendue ». Un score CLS élevé peut indiquer une mauvaise expérience utilisateur et peut également nuire au référencement de votre site.

Dans cet article, vous apprendrez tout ce que vous devez savoir sur le Cumulative Layout Shift et son impact sur les sites WordPress (et le Web en général).

Qu'est-ce que le décalage de mise en page cumulé (CLS) ? Explication de la signification du changement de mise en page cumulatif

Le changement de mise en page cumulé est la mesure du déplacement inattendu d'une page de votre site lors de la visite d'un utilisateur, telle que mesurée par l'API Layout Instability, une API de test de performances standardisée.

Le Cumulative Layout Shift (CLS) est l'une des trois mesures de l'initiative Core Web Vitals de Google, avec le Largest Contentful Paint (LCP) et le First Input Delay (FID).

Afin de comprendre la signification du changement de disposition cumulé, il est important de discuter du changement de disposition en général.

Un changement de mise en page se produit lorsque le contenu de votre site « bouge » ou « change » de manière inattendue.

Ou, en termes techniques, c'est lorsqu'un élément visible dans la fenêtre change sa position de départ entre deux images.

Un exemple courant serait que vous êtes en train de lire un bloc de texte… mais qu'une annonce à chargement tardif apparaît soudainement et pousse le contenu du texte vers le bas de la page.

Voici un autre exemple d'image de Google qui illustre ce qui se passe :

Vous avez presque certainement rencontré des changements de mise en page lorsque vous naviguez sur le Web, même si vous ne les connaissez pas sous ce nom.

Une seule visite peut avoir plusieurs événements de changement de mise en page distincts. En tant que telle, la métrique Cumulative Layout Shift vise à capturer l'image entière en mesurant le nombre total de changements de mise en page inattendus sur une page*.

*La mesure exacte est un peu plus technique après quelques modifications de Google, mais c'est toujours l'idée de base. Si vous êtes intéressé par les détails de fond, vous pouvez lire à ce sujet ici .

Pourquoi le décalage de mise en page cumulé 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, c'est légèrement ennuyeux pour vos visiteurs. Au pire, cela peut amener les visiteurs à effectuer des actions qu'ils ne veulent pas entreprendre.

Par exemple, imaginez si un utilisateur veut cliquer sur "Annuler" mais clique accidentellement sur "Confirmer" parce qu'un changement de disposition a déplacé la position des boutons au moment où la personne cliquait.

En plus d'affecter les expériences de vos visiteurs humains, avoir de mauvais scores Cumulative Layout Shift peut également être un frein au classement des moteurs de recherche de votre site.

Depuis la mise à jour Page Experience de Google (qui s'est terminée en août 2021), Google utilise Core Web Vitals comme l'un de ses facteurs de classement SEO. Étant donné que Cumulative Layout Shift fait partie de Core Web Vitals, cela signifie qu'il peut affecter les performances de recherche de votre site.

Fondamentalement, la résolution de tout problème de changement de mise en page cumulé sur votre site contribuera à l'améliorer à la fois pour les visiteurs humains et les moteurs de recherche.

Alors, qu'est-ce qui pourrait causer le changement de mise en page cumulé ? Couvrons cela ensuite…

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

Voici un bref aperçu des causes les plus courantes de changement de mise en page :

• Ne pas définir les dimensions des images, des iframes, des vidéos ou d'autres intégrations.
• Problèmes avec le chargement des polices personnalisées, qui peuvent rendre le texte invisible ou modifier sa taille lors du chargement des polices personnalisées.
• Diffuser des annonces réactives (par exemple, AdSense) avec différentes tailles (et ne pas réserver d'espace pour ces annonces).
• Injecter dynamiquement du contenu avec des plugins (avis de consentement aux cookies, formulaires de génération de leads, etc.).
• Utilisation d'animations sans la propriété CSS Transform.

Nous aborderons ces problèmes de manière beaucoup plus approfondie plus tard dans cet article, car nous vous montrerons comment résoudre chaque problème courant.

Comment mesurer le changement de mise en page cumulé : les meilleurs outils de test

Il existe un certain nombre d'outils que vous pouvez utiliser pour tester le score Cumulative Layout Shift de votre site.

Cumulative Layout Shift fait partie de l'audit Lighthouse, donc tout outil de test de vitesse qui utilise Lighthouse dans le cadre de son audit inclura des données CLS - cela inclut PageSpeed ​​Insights, GTmetrix, Chrome Developer Tools et de nombreux autres outils de test populaires.

Voici quelques-uns des meilleurs outils de test Cumulative Layout Shift qui se distinguent par leur utilité…

Informations sur la vitesse de la page

PageSpeed ​​Insights est l'un des outils les plus utiles pour évaluer l'état du changement de mise en page de votre site, car il vous fournit deux sources de données :

• Données de terrain - données utilisateur réelles du rapport Chrome UX (en supposant que votre site a suffisamment de trafic pour être inclus dans le rapport). Cela vous permet de voir les données réelles Cumulative Layout Shift pour vos vrais visiteurs humains. Ce sont également les données que Google utilise comme signal de classement.
• Données de laboratoire - données de test simulées collectées par Lighthouse (ce que PageSpeed ​​Insights utilise pour générer ses rapports d'analyse des performances).

Vous pouvez également afficher les données pour ordinateur et mobile en basculant entre les onglets.

Remarque - les données de laboratoire ne peuvent mesurer que les changements de mise en page qui se produisent pendant le chargement de la page, de sorte que vos résultats d'utilisateur réel peuvent être légèrement plus élevés si vous avez des changements de mise en page qui se produisent après le chargement de la page.

Outils de développement Chrome

Les outils de développement Chrome offrent des ressources utiles pour mesurer le CLS et déboguer les changements de mise en page individuels qui se produisent sur votre site.

Tout d'abord, vous pouvez exécuter un audit Lighthouse pour voir le score CLS de votre site. Voici comment:

1. Ouvrez les outils de développement Chrome.
2. Accédez à l'onglet Phare .
3. Configurez votre test.
4. Cliquez sur le bouton Analyser le chargement de la page pour exécuter le test.

Après une courte attente, vous devriez alors voir l'interface d'audit Lighthouse habituelle (qui ressemble beaucoup à PageSpeed ​​Insights).

Cependant, Chrome Developer Tools vous permet également d'approfondir CLS avec son analyse de rendu . Cela vous permettra de mettre en évidence les régions de changement de mise en page individuelles de votre site, ce qui vous aidera à les déboguer.

Voici comment:

1. Cliquez sur l'icône "trois points" dans le coin supérieur droit de l'interface des outils de développement Chrome.
2. Sélectionnez Plus d'outils → Rendu , ce qui devrait ouvrir une nouvelle interface en bas.
3. Cochez la case Régions de décalage de mise en page .

Maintenant, rechargez la page que vous souhaitez tester et Chrome devrait mettre en surbrillance toutes les zones avec des changements de mise en page à l'aide d'une boîte bleue. Ces surlignages apparaîtront sur la page réelle au fur et à mesure du chargement du contenu et disparaîtront une fois le quart de travail terminé.

Si les faits saillants se produisent 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 changement de mise en page cumulé, il vous offre un moyen simple de voir les problèmes de changement de mise en page cumulé sur votre site, tel que mesuré 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 afficher les problèmes potentiels sur votre site :

1. Accédez à la console de recherche Google. 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.
2. Ouvrez le rapport Core Web Vitals sous Expérience .
3. Cliquez sur Ouvrir le rapport à côté de Mobile ou de Bureau , selon ce que vous souhaitez analyser.

Le cas échéant, Google mettra en surbrillance les URL présentant des scores de changement de mise en page cumulés problématiques.

Remarque : vous ne verrez des données ici que si votre site a suffisamment de trafic mensuel pour être inclus dans le rapport Chrome UX.

Générateur GIF de décalage de mise en page

Comme son nom l'indique, Layout Shift GIF Generator génère un GIF des changements 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 ou ordinateur. Ensuite, il générera un GIF de votre site avec des reflets 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 sur quoi vous concentrer lorsqu'il s'agit d'améliorer les scores de votre site.

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

Selon l'initiative Core Web Vitals de Google, un bon score Cumulative Layout Shift est de 0,1 ou moins .

Si votre score Cumulative Layout Shift est compris entre 0,1 et 0,25, Google définit cela comme "Besoin d'amélioration".

Et si votre score Cumulative Layout Shift est supérieur à 0,25, Google le définit comme "médiocre".

Voici un graphique du site Web Core Web Vitals de Google qui présente visuellement ces scores :

Comment réparer le changement de mise en page cumulatif dans WordPress (ou d'autres plates-formes)

Maintenant que vous comprenez ce qui se passe avec Cumulative Layout Shift, il est temps de passer à quelques conseils pratiques sur la façon de corriger Cumulative Layout Shift 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.

Toujours spécifier les dimensions des images

L'une des causes les plus courantes de changement de mise en page est le chargement tardif des images qui déplacent le contenu, en particulier si vous utilisez des tactiques telles que le chargement paresseux.

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 (soit l'éditeur de blocs Gutenberg, soit l'éditeur TinyMCE classique), il n'est pas nécessaire de spécifier manuellement les dimensions de l'image car WordPress le fera automatiquement pour vous.

Il en va de même pour les plugins de création de pages populaires tels que Elementor, Divi, Beaver Builder, etc.

Enregistrez-vous pour recevoir le bulletin d'informations

Vous voulez savoir comment nous avons augmenté notre trafic de plus de 1000 % ?

Rejoignez plus de 20 000 autres personnes qui reçoivent notre newsletter hebdomadaire avec des conseils WordPress d'initiés !

Abonnez-vous maintenant

Cependant, des problèmes peuvent survenir si vous intégrez manuellement des images à l'aide de votre propre code, ce qui peut se produire si vous ajoutez du contenu à un plug-in, modifiez les fichiers de modèle de votre thème enfant, etc.

Le code HTML d'une intégration d'image de base ressemble à ceci :

<img src="https://kinsta.com/example-image.jpg" alt="An example image">

Pour spécifier ses dimensions, vous pouvez ajouter des paramètres de hauteur et de largeur . Voici un exemple de ce à quoi cela pourrait ressembler pour une image de 600 x 300 pixels :

<img src="https://kinsta.com/example-image.jpg" alt="An example image" width="600" height="300" >

De nombreux plugins de performance WordPress incluent également des fonctionnalités pour automatiser cela, telles que les fonctionnalités Ajouter des dimensions d'image manquantes dans WP Rocket ou Perfmatters.

Spécifiez toujours les dimensions des vidéos, des iframes et des autres intégrations

Tout comme pour les images, vous voudrez également spécifier des dimensions chaque fois que vous ajoutez des vidéos, des iframes ou d'autres intégrations.

La plupart des outils d'intégration de sites Web doivent automatiquement spécifier les dimensions de l'intégration.

Par exemple, si vous regardez le code d'intégration YouTube, vous verrez qu'il inclut des dimensions :

Il en va de même pour de nombreux autres services.

Cependant, si votre code d'intégration ne spécifie pas la hauteur et la largeur, vous pouvez ajouter manuellement ces dimensions au code d'intégration.

Corriger et optimiser le chargement des polices

Les problèmes de chargement et d'optimisation des polices peuvent être une autre source courante de changements 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 apparaît soudainement (ce qui peut entraîner le déplacement du contenu existant).
• Flash de texte sans style (FOUT) - le contenu du texte se charge à l'aide d'une police système (sans style). Une fois la police personnalisée chargée, le texte passe à cette police personnalisée, ce qui peut entraîner 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 des avantages sur les performances de votre site).

Héberger les polices localement et précharger les polices

En hébergeant les polices localement et en utilisant le préchargement, vous dites aux navigateurs des visiteurs d'accorder une plus grande priorité au chargement des fichiers de polices personnalisées.

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 à afficher votre contenu, ce qui peut éviter les problèmes avec FOUT et FOIT.

Pour savoir comment héberger des polices localement dans WordPress, vous pouvez lire notre guide complet sur l'hébergement local de polices dans WordPress.

À partir de là, vous pouvez configurer le préchargement des polices manuellement ou à l'aide d'un plugin. La plupart des plugins de performance incluent des options pour précharger les polices, notamment WP Rocket, Perfmatters, Autoptimize et autres.

Si vous utilisez Google Fonts, vous pouvez également utiliser le plug-in gratuit 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 du code - assurez-vous de 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 à l'aide d'un thème enfant WordPress ou l'injecter avec le crochet wp_head et un plugin comme Code Snippets.

Définissez Font-Display sur Facultatif 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, il 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 traiter le CLS :

• Swap - utilise une police de secours pendant le chargement de la police personnalisée, puis la remplace par votre police personnalisée une fois la police chargée.
• Facultatif – permet au navigateur de déterminer s'il doit ou non utiliser 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 qu'il sera chargé.

Alors que Swap résout complètement FOIT, cela peut conduire à FOUT. Pour minimiser cela, vous devez vous assurer que la police de secours utilise un espacement identique à celui de la police personnalisée (au moins autant que possible). De cette façon, même si le style de police change, cela n'entraînera pas de changements de mise en page car l'espacement sera le même.

Avec Optional , le navigateur donnera 100 ms à la police personnalisée pour se charger. Cependant, si la police personnalisée n'est pas disponible d'ici là, le navigateur s'en tiendra à la police de secours et ne la changera jamais en police personnalisée pour cette page vue ( il utilisera la police personnalisée pour les pages vues suivantes, car il est probable que la police le fichier a été téléchargé et mis en cache à ce moment-là ).

Alors que Optional peut résoudre à la fois FOIT et FOUT, l'inconvénient est que le visiteur peut être bloqué avec la police de secours pour sa première page vue.

Si vous vous sentez à l'aise avec 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 de le faire, vous pouvez également trouver des plugins qui vous aideront :

• Échanger l'affichage des polices Google - active facilement l'échange d'affichage des polices pour les polices Google.
• Asset CleanUp - prend en charge Google Fonts pour les polices locales gratuites et personnalisées avec la version Pro.
• Perfmatters – offre une fonctionnalité pour Google Fonts.

Si vous utilisez Elementor, Elementor inclut également une option intégrée pour le faire. Accédez à Elementor → Paramètres → Avancé . Vous pouvez ensuite définir la liste déroulante Google Fonts Load sur Swap ou Optional selon vos préférences :

Trop compliqué? Envisagez une pile de polices système !

Si toutes ces discussions sur le préchargement et l'affichage des polices sont un peu déroutantes, une solution simple consiste simplement à utiliser une pile de polices système au lieu d'une pile de polices personnalisées.

Bien que cela limite vos options de conception, cela résoudra complètement les problèmes de police Cumulative Layout Shift, FOIT et FOUT. De plus, cela aidera également votre site à se charger 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éserver de l'espace pour les annonces (si vous utilisez des annonces graphiques)

Si vous utilisez des annonces graphiques, il est important que vous réserviez de l'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 graphiques méritent une mention spéciale, car il est très courant d'avoir des annonces graphiques à chargement tardif si vous utilisez n'importe quel type de technologie d'enchères. En effet, la technologie d'enchères a besoin de temps pour fonctionner et déterminer quelle annonce afficher.

Cela peut également être un problème avec les annonces automatiques AdSense si vous avez des espaces publicitaires dynamiques, car, en plus du problème d'enchères, AdSense chargera également des annonces de différentes tailles (vous ne connaîtrez donc peut-être pas la taille de l'annonce à l'avance).

Si vous utilisez l'un des réseaux d'annonces graphiques populaires tels que Mediavine ou AdThrive, ils devraient déjà proposer des outils pour vous aider à éviter les changements de mise en page avec vos annonces. Par exemple, si vous ouvrez la zone Paramètres des annonces de Mediavine, vous pouvez activer une bascule pour optimiser les annonces pour CLS :

Pour optimiser AdSense pour le changement de mise en page cumulé, c'est un peu plus délicat.

Une solution courante consiste à ajouter un élément wrapper <div> autour de chaque bloc d'annonces qui spécifie une hauteur minimale à l'aide de la propriété CSS min-height . Vous pouvez également utiliser des requêtes multimédias pour modifier la hauteur minimale en fonction de l'appareil d'un utilisateur.

Google recommande de définir la hauteur minimale égale à la plus grande taille d'annonce possible. Bien que cela puisse entraîner un gaspillage d'espace si une annonce plus petite est diffusée, il s'agit de la meilleure option pour éliminer tout risque de changement de mise en page.

Lors de la configuration de cet élément wrapper, assurez-vous d'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 le frontend, vous verrez maintenant que votre site réserve de l'espace pour cette annonce, même si elle est vide :

Soyez intelligent lors de l'injection dynamique de contenu avec des plugins

De nombreux sites WordPress injecteront dynamiquement du contenu pour des fonctions telles que les avis de consentement aux cookies, le contenu connexe, les formulaires d'inscription par e-mail, etc.

Bien que ce soit une bonne chose à faire, vous devrez faire attention à ne pas le faire d'une manière qui provoque des changements de mise en page.

Une bonne pratique de conception Web ici 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 un avis de consentement aux cookies, vous ne voulez pas l'injecter en haut de votre page, car cela entraînerait le rejet du contenu (à moins que vous ne réserviez déjà de l'espace pour la bannière de consentement aux cookies ). .

Au lieu de cela, vous devez 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 ci-dessus (par exemple, Layout Shift GIF Generator).

Si vous voyez que le contenu d'un plugin spécifique déclenche des changements de mise en page, vous pouvez envisager d'ajuster les paramètres de ce plugin ou de passer à un autre plugin.

Par exemple, certains plugins de consentement aux cookies sont meilleurs que d'autres en ce qui concerne les changements de mise en page, il vaut donc la peine d'expérimenter différents plugins si vous rencontrez des problèmes.

Si vous souhaitez approfondir encore le comportement des plugins, vous pouvez utiliser un outil de surveillance des performances des applications. Si vous hébergez avec 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 plugins, vous pouvez également utiliser les sites de développement 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 un autre coupable courant des changements de mise en page.

Pour éviter les problèmes avec les animations provoquant des changements de mise en page, vous devez utiliser la fonction CSS Transform pour les animations plutôt que d'autres tactiques :

• Plutôt que d'utiliser les propriétés de hauteur et de largeur , 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 plus d'un conseil technique, il est donc peu probable que vous ayez besoin de le faire, sauf si vous ajoutez votre propre CSS. Pour en savoir plus, vous pouvez lire la page de Google sur CLS et les animations/transitions.

Résumé

Si votre site Web a un score de changement de mise en page cumulé élevé, 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/intégrations et les problèmes de chargement des polices. Si vous les corrigez, vous devriez être sur la bonne voie pour obtenir un bien meilleur score.

D'autres sites devront peut-être aller plus loin et creuser dans le chargement des publicités, le contenu dynamique et les animations. Si vous avez du mal à mettre en œuvre vous-même ces types d'optimisations, vous pouvez envisager de travailler avec une agence ou un freelance WordPress.

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 performant qui fonctionne bien dans Core Web Vitals, pensez à utiliser l'hébergement WordPress infogéré de Kinsta – nous migrerons vos sites WordPress gratuitement !