Qu’est-ce que le Cumulative Layout Shift (CLS) ? Explication de la signification de Cumulative Layout Shift<\/h2>\n
Le Cumulative Layout Shift est la mesure de la quantit\u00e9 de mouvements inattendus d’une page de votre site au cours de la visite d’un utilisateur, telle que mesur\u00e9e par l’API Layout Instability<\/a>, une API de test de performance<\/a> standardis\u00e9e.<\/p>\n Cumulative Layout Shift (CLS) est l’une des trois mesures de l’initiative Core Web Vitals de Google<\/a>, avec Largest Contentful Paint (LCP) et First Input Delay (FID).<\/p>\n Afin de comprendre la signification de Cumulative Layout Shift, il est important de parler du d\u00e9calage de mise en page en g\u00e9n\u00e9ral.<\/p>\n Un d\u00e9calage de mise en page se produit lorsque le contenu de votre site se \u00ab d\u00e9place \u00bb ou se \u00ab d\u00e9cale \u00bb de mani\u00e8re inattendue.<\/p>\n Ou, en termes techniques, c’est lorsque tout \u00e9l\u00e9ment visible dans la fen\u00eatre d’affichage change sa position de d\u00e9part entre deux cadres.<\/p>\n Un exemple courant est celui o\u00f9 vous \u00eates en train de lire un bloc de texte… mais une publicit\u00e9 \u00e0 chargement tardif apparait soudainement et repousse le contenu du texte vers le bas de la page.<\/p>\n Voici une autre image d’exemple de Google qui illustre ce ph\u00e9nom\u00e8ne :<\/p>\n Vous avez tr\u00e8s certainement rencontr\u00e9 des changements de mise en page en naviguant sur le web, m\u00eame si vous ne les connaissez pas sous ce nom.<\/p>\n Une seule visite peut comporter plusieurs \u00e9v\u00e8nements distincts de changement de disposition. C’est pourquoi la mesure du Cumulative Layout Shift vise \u00e0 capturer l’ensemble du tableau en mesurant le nombre total de d\u00e9calages inattendus de la mise en page sur une page*.<\/p>\n *La mesure exacte est un peu plus technique apr\u00e8s quelques modifications apport\u00e9es par Google, mais l’id\u00e9e de base reste la m\u00eame. Si vous \u00eates int\u00e9ress\u00e9 par les moindres d\u00e9tails, vous pouvez <\/em>lire \u00e0 ce sujet ici<\/em><\/a>.<\/em><\/p>\n\n La principale raison pour laquelle Cumulative Layout Shift est mauvais est qu’il cr\u00e9e une mauvaise exp\u00e9rience utilisateur<\/a> sur votre site.<\/p>\n Au mieux, il est l\u00e9g\u00e8rement g\u00eanant pour vos visiteurs. Dans le pire des cas, il peut amener les visiteurs \u00e0 effectuer des actions qu’ils ne souhaitent pas entreprendre.<\/p>\n Par exemple, imaginez qu’un utilisateur veuille cliquer sur \u00ab Annuler \u00bb mais qu’il clique accidentellement sur \u00ab Confirmer \u00bb parce qu’un d\u00e9calage de mise en page a d\u00e9plac\u00e9 la position des boutons au moment m\u00eame o\u00f9 la personne cliquait.<\/p>\n En plus d’affecter l’exp\u00e9rience de vos visiteurs, les mauvais scores de Cumulative Layout Shift peuvent \u00e9galement nuire au classement de votre site dans les moteurs de recherche<\/a>.<\/p>\n \u00c0 partir de la mise \u00e0 jour Page Experience de Google<\/a> (qui a fini d’\u00eatre d\u00e9ploy\u00e9e en ao\u00fbt 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<\/a>.<\/p>\n En fait, la correction de tout probl\u00e8me de d\u00e9calage cumulatif de mise en page sur votre site contribuera \u00e0 l’am\u00e9liorer pour les visiteurs humains et les moteurs de recherche.<\/p>\n Alors – qu’est-ce qui pourrait causer le d\u00e9calage cumulatif de mise en page ? C’est ce que nous allons voir maintenant..<\/p>\n Voici un bref aper\u00e7u des causes les plus courantes du changement de pr\u00e9sentation :<\/p>\n Nous approfondirons ces questions plus tard dans cet article en vous montrant comment r\u00e9soudre chaque probl\u00e8me courant.<\/p>\n Il existe un certain nombre d’outils que vous pouvez utiliser pour tester le score de d\u00e9calage cumulatif de la mise en page de votre site.<\/p>\n Le Cumulative Layout Shift fait partie de l’audit Lighthouse. Par cons\u00e9quent, tout outil de test de vitesse qui utilise Lighthouse dans le cadre de son audit comprendra les donn\u00e9es CLS, notamment PageSpeed Insights<\/a>, GTmetrix<\/a>, Chrome Developer Tools et de nombreux autres outils de test populaires<\/a>.<\/p>\n Voici quelques-uns des principaux outils de test Cumulative Layout Shift qui se distinguent par leur utilit\u00e9..<\/p>\n PageSpeed Insights<\/a> est l’un des outils les plus utiles pour \u00e9valuer l’\u00e9tat du Cumulative Layout Shift de votre site car il vous fournit deux sources de donn\u00e9es :<\/p>\n Vous pouvez \u00e9galement afficher les donn\u00e9es pour le bureau et le mobile en passant d’un onglet \u00e0 l’autre.<\/p>\n Remarque <\/strong>\u2013 les donn\u00e9es de laboratoire ne peuvent mesurer que les d\u00e9calages de mise en page qui se produisent pendant le chargement de la page. Vos r\u00e9sultats pour les utilisateurs r\u00e9els peuvent donc \u00eatre l\u00e9g\u00e8rement plus \u00e9lev\u00e9s si les d\u00e9calages de mise en page se produisent apr\u00e8s le chargement de la page.<\/p>\n Chrome Developer Tools offre des ressources utiles<\/a> pour mesurer CLS et d\u00e9boguer les changements de pr\u00e9sentation individuels qui se produisent sur votre site.<\/p>\n Tout d’abord, vous pouvez ex\u00e9cuter un audit Lighthouse pour conna\u00eetre le score CLS de votre site. Voici comment proc\u00e9der :<\/p>\n Apr\u00e8s une courte attente, vous devriez voir apparaitre l’interface d’audit Lighthouse normale (qui ressemble beaucoup \u00e0 PageSpeed Insights).<\/p>\n Cependant, Chrome Developer Tools vous permet \u00e9galement de creuser plus profond\u00e9ment dans CLS avec son analyse de rendu<\/strong>. Cela vous permettra de mettre en \u00e9vidence les r\u00e9gions de d\u00e9calage de mise en page individuelles dans votre site, ce qui vous aidera \u00e0 les d\u00e9boguer.<\/p>\n Voici comment :<\/p>\n Maintenant, rechargez la page que vous souhaitez tester et Chrome devrait mettre en \u00e9vidence toutes les zones avec des d\u00e9calages de mise en page \u00e0 l’aide d’un cadre bleu. Ces surlignages apparaitront sur la page r\u00e9elle pendant le chargement du contenu et disparaitront une fois le d\u00e9calage termin\u00e9.<\/p>\n 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 \u00e0 l’aide de l’onglet Performances<\/strong>.<\/p>\n Bien que Google Search Console<\/a> ne vous permette pas d’ex\u00e9cuter des tests de laboratoire pour d\u00e9terminer le Cumulative Layout Shift, elle vous offre un moyen facile de voir les probl\u00e8mes de d\u00e9calage cumulatif de mise en page sur votre site, tels que mesur\u00e9s par le rapport Chrome UX.<\/p>\n L’avantage d’utiliser Google Search Console<\/a> par rapport \u00e0 d’autres outils est qu’il vous permet de voir rapidement les probl\u00e8mes sur l’ensemble de votre site plut\u00f4t que de tester page par page.<\/p>\n Voici comment visualiser les probl\u00e8mes potentiels sur votre site :<\/p>\n Le cas \u00e9ch\u00e9ant, Google mettra en \u00e9vidence les URL<\/a> pr\u00e9sentant des scores de d\u00e9calage cumulatif de mise en page probl\u00e9matiques.<\/p>\n Remarque <\/strong>\u2013 vous ne verrez les donn\u00e9es ici que si votre site a un trafic mensuel suffisant pour \u00eatre inclus dans le rapport Chrome UX.<\/p>\n Comme son nom l’indique, Layout Shift GIF Generator<\/a> g\u00e9n\u00e8re un GIF des d\u00e9calages de mise en page sur votre site afin que vous puissiez voir exactement quel contenu pose probl\u00e8me. Il vous donnera \u00e9galement votre score, bien que ce ne soit pas l’objectif principal de l’outil.<\/p>\n Il vous suffit d’ajouter l’URL que vous souhaitez tester et de choisir entre mobile et bureau. Ensuite, il g\u00e9n\u00e8rera un GIF de votre site avec des surlignages verts montrant les \u00e9l\u00e9ments exacts qui se d\u00e9placent.<\/p>\n En voyant quels \u00e9l\u00e9ments se d\u00e9placent et contribuent \u00e0 votre score Cumulative Layout Shift, vous pouvez savoir exactement o\u00f9 vous devez vous concentrer lorsqu’il s’agit d’am\u00e9liorer les scores de votre site.<\/p>\n Selon l’initiative Core Web Vitals de Google, un bon score de d\u00e9calage cumulatif de mise en page est de 0,1 ou moins<\/strong>.<\/p>\n Si votre score de d\u00e9calage cumulatif de mise en page se situe entre 0,1 et 0,25, Google le d\u00e9finit comme \u00ab \u00e0 am\u00e9liorer \u00bb.<\/p>\n Et si votre score Cumulative Layout Shift est sup\u00e9rieur \u00e0 0,25, Google le d\u00e9finit comme \u00ab M\u00e9diocre \u00bb.<\/p>\n Voici un graphique provenant du site Web Core Web Vitals de Google qui pr\u00e9sente visuellement ces scores :<\/p>\n Maintenant que vous comprenez ce qui se passe avec le d\u00e9calage cumulatif de la mise en page, il est temps de passer \u00e0 des conseils pratiques sur la fa\u00e7on de corriger le d\u00e9calage cumulatif de la mise en page dans WordPress.<\/p>\n Bien que ces conseils proviennent d’un angle WordPress, ils sont tous universels et vous pouvez les appliquer \u00e0 d’autres outils de cr\u00e9ation de sites web.<\/p>\n L’une des causes les plus courantes du d\u00e9calage de mise en page est le d\u00e9placement du contenu par des images \u00e0 chargement tardif, surtout si vous utilisez des tactiques telles que le chargement diff\u00e9r\u00e9<\/a>.<\/p>\n Pour \u00e9viter cela, vous pouvez sp\u00e9cifier les dimensions d’une image dans le code lorsque vous l’int\u00e9grez. De cette fa\u00e7on, le navigateur du visiteur r\u00e9servera cet espace m\u00eame si l’image n’a pas encore \u00e9t\u00e9 charg\u00e9e, ce qui signifie que l’image n’aura pas besoin de d\u00e9placer le contenu.<\/p>\n Si vous int\u00e9grez des images via l’\u00e9diteur WordPress (que ce soit l’\u00e9diteur de blocs Gutenberg<\/a> ou l’\u00e9diteur classique TinyMCE<\/a>), il n’est pas n\u00e9cessaire de sp\u00e9cifier manuellement les dimensions de l’image car WordPress le fera pour vous automatiquement.<\/p>\n Il en va de m\u00eame pour les extensions de construction de pages populaires<\/a> telles que Elementor, Divi<\/a>, Beaver Builder, et ainsi de suite.<\/p>\n Cependant, des probl\u00e8mes peuvent survenir si vous int\u00e9grez manuellement des images en utilisant votre propre code, ce qui peut arriver si vous ajoutez du contenu \u00e0 un plugin, modifiez les fichiers de mod\u00e8le de votre th\u00e8me enfant<\/a>, etc.<\/p>\n Le code HTML pour l’int\u00e9gration d’une image de base ressemble \u00e0 ceci :<\/p>\n Pour pr\u00e9ciser ses dimensions, vous pouvez ajouter des param\u00e8tres de hauteur<\/strong> et de largeur<\/strong>. Voici un exemple de ce \u00e0 quoi cela peut ressembler pour une image de 600x300px :<\/p>\n De nombreuses extensions WordPress de performance<\/a> comprennent \u00e9galement des fonctions permettant d’automatiser cette op\u00e9ration, comme les fonctions d’ajout de dimensions d’images manquantes<\/strong> dans WP Rocket ou Perfmatters.<\/p>\n Tout comme pour les images, vous voudrez \u00e9galement sp\u00e9cifier les dimensions lorsque vous ajoutez des vid\u00e9os, des iframes ou d’autres \u00e9l\u00e9ments int\u00e9gr\u00e9s.<\/p>\n Les outils d’int\u00e9gration de la plupart des sites web devraient automatiquement sp\u00e9cifier les dimensions de l’int\u00e9gration.<\/p>\n Par exemple, si vous regardez le code d’int\u00e9gration de YouTube<\/a>, vous verrez qu’il inclut les dimensions :<\/p>\n Il en va de m\u00eame pour de nombreux autres services.<\/p>\n Toutefois, si votre code d’int\u00e9gration ne pr\u00e9cise pas la hauteur et la largeur, vous pouvez ajouter manuellement ces dimensions au code d’int\u00e9gration.<\/p>\n Les probl\u00e8mes de chargement et d’optimisation des polices peuvent \u00eatre une autre source courante de d\u00e9calages de mise en page via deux probl\u00e8mes potentiels :<\/p>\n Pour \u00e9viter ces probl\u00e8mes, vous devez optimiser la fa\u00e7on dont vous chargez les polices sur votre site (ce qui peut \u00e9galement avoir certains avantages pour les performances de votre site).<\/p>\n En h\u00e9bergeant les polices localement et en utilisant le pr\u00e9chargement, vous indiquez aux navigateurs des visiteurs d’accorder une plus grande priorit\u00e9 au chargement des fichiers de polices personnalis\u00e9s.<\/p>\n En chargeant les fichiers de police avant les autres ressources, vous pouvez vous assurer que les fichiers de police sont d\u00e9j\u00e0 charg\u00e9s lorsque le navigateur commence \u00e0 rendre votre contenu, ce qui peut \u00e9viter les probl\u00e8mes de FOUT et FOIT.<\/p>\n Pour savoir comment h\u00e9berger des polices localement dans WordPress, vous pouvez lire notre guide complet sur l’h\u00e9bergement local des polices dans WordPress<\/a>.<\/p>\n \u00c0 partir de l\u00e0, vous pouvez configurer le pr\u00e9chargement des polices manuellement ou \u00e0 l’aide d’une extension. La plupart des extensions de performance incluent des options pour pr\u00e9charger les polices, notamment WP Rocket, Perfmatters, Autoptimize<\/a>, et d’autres.<\/p>\n Si vous utilisez Google Fonts<\/a>, vous pouvez \u00e9galement utiliser l’extension gratuite OMGF<\/a> pour h\u00e9berger les polices localement et<\/em> les pr\u00e9charger.<\/p>\n Vous pouvez \u00e9galement pr\u00e9charger manuellement les polices en ajoutant le code \u00e0 la section <head><\/strong> de votre site.<\/p>\n Voici un exemple de code – veillez \u00e0 le remplacer par le nom\/l’emplacement r\u00e9el du fichier de police que vous souhaitez pr\u00e9charger :<\/p>\n Vous pouvez l’ajouter directement en utilisant un th\u00e8me enfant WordPress<\/a> ou l’injecter avec le crochet wp_head<\/a> et une extension comme Code Snippets<\/a>.<\/p>\n La propri\u00e9t\u00e9 CSS Font-Display<\/a> vous permet de contr\u00f4ler le comportement de rendu des polices sur votre site et d’\u00e9viter FOIT.<\/p>\n Essentiellement, elle vous permet d’utiliser une police de secours dans les situations o\u00f9 votre police personnalis\u00e9e n’a pas encore \u00e9t\u00e9 charg\u00e9e.<\/p>\n Il existe deux options principales que vous pouvez utiliser pour r\u00e9soudre le probl\u00e8me de FOIT :<\/p>\n Avec Swap<\/strong>, le navigateur passera toujours<\/strong> \u00e0 la police personnalis\u00e9e une fois celle-ci charg\u00e9e.<\/p>\n Bien que Swap<\/strong> r\u00e9solve compl\u00e8tement FOIT, il peut conduire \u00e0 FOUT. Pour minimiser ce probl\u00e8me, vous devez vous assurer que la police de repli utilise un espacement identique \u00e0 celui de la police personnalis\u00e9e (du moins autant que possible). De cette fa\u00e7on, m\u00eame si le style de police change, cela n\u2019entrainera pas de d\u00e9calage de la mise en page car l’espacement sera le m\u00eame.<\/p>\n Avec Optional<\/strong>, le navigateur donne 100 ms \u00e0 la police personnalis\u00e9e pour se charger. Toutefois, si la police personnalis\u00e9e n’est pas disponible d’ici l\u00e0, le navigateur conservera la police de secours et ne la remplacera jamais par la police personnalis\u00e9e pour cette page (il utilisera la police personnalis\u00e9e pour les pages suivantes, car il est probable que le fichier de police ait \u00e9t\u00e9 t\u00e9l\u00e9charg\u00e9 et mis en cache \u00e0 ce moment-l\u00e0<\/em>).<\/p>\n Si Optional<\/strong> peut r\u00e9soudre les probl\u00e8mes de FOIT et de FOUT, l’inconv\u00e9nient est que le visiteur risque d’\u00eatre coinc\u00e9 avec la police de secours pour son premier affichage de page.<\/p>\n Si vous \u00eates \u00e0 l’aise avec les CSS, vous pouvez modifier manuellement la propri\u00e9t\u00e9 Font-Display dans la feuille de style de votre th\u00e8me enfant.<\/p>\n Si vous ne vous sentez pas \u00e0 l’aise pour le faire, vous pouvez \u00e9galement trouver des extensions qui vous aideront :<\/p>\n Si vous utilisez Elementor<\/a>, ce dernier comprend \u00e9galement une option int\u00e9gr\u00e9e pour le faire. Allez dans Elementor \u2192 R\u00e9glages \u2192 Avanc\u00e9s<\/strong>. Vous pouvez ensuite d\u00e9finir la liste d\u00e9roulante Google Fonts Load<\/strong>\u00a0\u00e9gale \u00e0 Swap ou Optional selon vos pr\u00e9f\u00e9rences :<\/p>\n Si toute cette discussion sur le pr\u00e9chargement et l’affichage des polices est un peu confuse, une solution simple consiste \u00e0 utiliser une pile de polices syst\u00e8me au lieu d’une pile de polices personnalis\u00e9e.<\/p>\n Bien que cela limite vos options de conception, cela r\u00e9soudra compl\u00e8tement les probl\u00e8mes de polices de type Cumulative Layout Shift, FOIT et FOUT. De plus, votre site se chargera beaucoup plus rapidement.<\/p>\n Si cela vous int\u00e9resse, consultez le guide de Brian sur l’utilisation d’une pile de polices syst\u00e8me sur WordPress<\/a>.<\/p>\n Si vous utilisez des annonces publicitaires, il est important que vous r\u00e9serviez un espace pour ces annonces dans le code de votre site. Cela suit la m\u00eame id\u00e9e que de r\u00e9server de l’espace pour les images, les vid\u00e9os, et les int\u00e9grations.<\/p>\n Cependant, les annonces d’affichage m\u00e9ritent une mention sp\u00e9ciale, car il est tr\u00e8s fr\u00e9quent que les annonces d’affichage se chargent tardivement si vous utilisez un type de technologie d’ench\u00e8res. Cela est d\u00fb au fait que la technologie d’ench\u00e8res a besoin de temps pour travailler et d\u00e9terminer quelle annonce afficher.<\/p>\n Cela peut \u00e9galement \u00eatre un probl\u00e8me avec les annonces automatiques AdSense<\/a> si vous avez des emplacements d’annonces dynamiques, car, en plus du probl\u00e8me d’ench\u00e8res, AdSense chargera \u00e9galement des annonces de diff\u00e9rentes tailles<\/a> (vous ne connaitrez donc pas forc\u00e9ment la taille de l’annonce \u00e0 l’avance).<\/p>\n Si vous utilisez l’un des r\u00e9seaux populaires d’annonces d’affichage<\/a> tels que Mediavine ou AdThrive, ils devraient d\u00e9j\u00e0 proposer des outils pour vous aider \u00e0 \u00e9viter les d\u00e9calages de mise en page avec vos annonces. Par exemple, si vous ouvrez la zone des R\u00e9glages publicitaires<\/strong> de Mediavine, vous pouvez activer une bascule permettant d’optimiser les annonces pour CLS<\/strong>:<\/p>\n Pour optimiser AdSense pour le d\u00e9calage cumulatif de mise en page, c’est un peu plus d\u00e9licat.<\/p>\n Une solution courante consiste \u00e0 ajouter un \u00e9l\u00e9ment enveloppant <div> autour de chaque unit\u00e9 publicitaire qui sp\u00e9cifie une hauteur minimale \u00e0 l’aide de la propri\u00e9t\u00e9 CSS min-height<\/strong><\/a>. Vous pouvez \u00e9galement utiliser des requ\u00eates m\u00e9dia pour modifier la hauteur minimale en fonction du p\u00e9riph\u00e9rique de l’utilisateur.<\/p>\n Google recommande de d\u00e9finir une hauteur minimale \u00e9gale \u00e0 la plus grande taille d’annonce possible. Bien que cela puisse entrainer un gaspillage d’espace si une annonce plus petite est diffus\u00e9e, il s’agit de la meilleure option pour \u00e9liminer tout risque de d\u00e9calage de la mise en page.<\/p>\n Lorsque vous configurez cet \u00e9l\u00e9ment d’habillage, veillez \u00e0 utiliser un ID CSS plut\u00f4t qu’une classe<\/a>, car AdSense supprime souvent la classe CSS des objets parents.<\/p>\n Voici \u00e0 quoi pourrait ressembler le CSS :<\/p>\n Et voici \u00e0 quoi pourrait ressembler l’int\u00e9gration AdSense :<\/p>\n Sur l’interface publique, vous verrez maintenant que votre site r\u00e9serve un espace pour cette annonce, m\u00eame s’il est vide :<\/p>\n 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<\/a>, etc.<\/p>\n Bien que cela puisse se faire sans probl\u00e8me, vous devez \u00e9viter de le faire d’une mani\u00e8re qui entraine des modifications de la mise en page.<\/p>\n Une bonne pratique de conception web<\/a> consiste \u00e0 ne jamais injecter de contenu au-dessus <\/em>du contenu existant, \u00e0 moins que l’utilisateur n’ait sp\u00e9cifiquement effectu\u00e9 une interaction (par exemple, en cliquant sur un bouton).<\/p>\n Par exemple, si vous ajoutez une notification de consentement aux cookies<\/a>, vous ne voulez pas l’injecter en haut de votre page, car le contenu serait repouss\u00e9 vers le bas (\u00e0 moins que vous ne r\u00e9serviez d\u00e9j\u00e0 un espace pour la banni\u00e8re de consentement aux cookies<\/em>).<\/p>\n Au lieu de cela, vous devriez afficher l’avis en bas de la page, ce qui \u00e9vitera de d\u00e9placer vers le bas le contenu visible.<\/p>\n Pour voir si le contenu dynamique est \u00e0 l’origine du probl\u00e8me, vous pouvez utiliser les outils de visualisation mentionn\u00e9s ci-dessus (par exemple, le g\u00e9n\u00e9rateur de Layout Shift GIF<\/a>).<\/p>\n Si vous constatez que le contenu d’une extension sp\u00e9cifique d\u00e9clenche des d\u00e9calages de mise en page, vous pouvez envisager d’ajuster les r\u00e9glages de cette extension ou de passer \u00e0 une autre extension.<\/p>\n Par exemple, certaines extensions de consentement aux cookies sont meilleures que d’autres en ce qui concerne les d\u00e9calages de mise en page. Cela vaut donc la peine d’exp\u00e9rimenter avec diff\u00e9rentes extensions si vous rencontrez des probl\u00e8mes.<\/p>\n Si vous voulez creuser encore plus profond\u00e9ment dans le comportement des extensions, vous pouvez utiliser un outil de surveillance des performances des applications<\/a>. Si vous \u00eates h\u00e9berg\u00e9 par Kinsta, l’outil APM de Kinsta<\/a> est disponible gratuitement dans votre tableau de bord MyKinsta<\/a>, ou vous pouvez trouver d’autres outils APM<\/a>.<\/p>\n Pour vous aider \u00e0 tester les extensions, vous pouvez \u00e9galement utiliser les sites de staging de Kinsta<\/a> ou l’outil de d\u00e9veloppement local DevKinsta<\/a>.<\/p>\n Si vous utilisez des animations sur votre site, celles-ci peuvent \u00eatre une autre cause fr\u00e9quente de d\u00e9calage de la mise en page.<\/p>\n Pour \u00e9viter les probl\u00e8mes d’animations causant des d\u00e9calages de mise en page, vous devriez utiliser la fonction de transformation CSS<\/a> pour les animations plut\u00f4t que d’autres tactiques :<\/p>\n Il s’agit plut\u00f4t d’un conseil technique, il est donc peu probable que vous ayez \u00e0 le faire, \u00e0 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<\/a>.<\/p>\n\n Si votre site web a un score \u00e9lev\u00e9 de Cumulative Layout Shift, il est important de le corriger \u00e0 la fois pour cr\u00e9er une meilleure exp\u00e9rience pour vos visiteurs humains et pour maximiser les performances de votre site dans les r\u00e9sultats de recherche de Google.<\/p>\n Deux des probl\u00e8mes les plus courants sont les dimensions manquantes pour les images\/embeds et les probl\u00e8mes de chargement des polices. Si vous les corrigez, vous devriez obtenir un bien meilleur score.<\/p>\n D’autres sites devront peut-\u00eatre aller plus loin et se pencher sur le chargement des publicit\u00e9s, le contenu dynamique et les animations. Si vous avez du mal \u00e0 mettre en \u0153uvre ces types d’optimisations vous-m\u00eame, vous pouvez envisager de travailler avec une agence WordPress<\/a> ou un freelance.<\/p>\n Pour en savoir plus sur Core Web Vitals en g\u00e9n\u00e9ral, vous pouvez lire le guide Kinsta complet sur Core Web Vitals<\/a>.<\/p>\n Et si vous voulez un h\u00e9bergeur WordPress qui peut vous aider \u00e0 cr\u00e9er un site tr\u00e8s performant<\/a> qui se comporte bien dans Core Web Vitals, envisagez d’utiliser l’h\u00e9bergement WordPress infog\u00e9r\u00e9 de Kinsta<\/a> – nous migrerons vos sites WordPress gratuitement<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":" Vous rencontrez des probl\u00e8mes de Cumulative Layout Shift sur votre site web ? Ou vous n’\u00eates pas s\u00fbr de la signification de Cumulative Layout Shift ? …<\/p>\n","protected":false},"author":199,"featured_media":65150,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1013,1007],"class_list":["post-65080","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-experience-utilisateur","topic-strategie-seo"],"yoast_head":"\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-example-1024x749.jpg\")
Pourquoi le Cumulative Layout Shift est-il mauvais ?<\/h2>\n
Quelles sont les causes du Cumulative Layout Shift ?<\/h2>\n
\n
Comment mesurer le Cumulative Layout Shift : Les meilleurs outils de test<\/h2>\n
PageSpeed Insights<\/h3>\n
\n
![\"Scores](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pagespeed-insights-cls-1024x960.jpg\")
Outils du d\u00e9veloppeur Chrome<\/h3>\n
\n
![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/chrome-developer-tools-1-1024x763.jpg\")
\n
![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/chrome-developer-tools-2-enable-rendering-report-1024x580.jpg\")
Console de recherche Google<\/h3>\n
\n
![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-search-console-1024x696.jpg\")
![\"Comment](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-search-console-list-1024x982.jpg\")
G\u00e9n\u00e9rateur GIF Layout Shift<\/h3>\n
![\"L'outil](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/layout-shift-gif-generator-1024x724.jpg\")
Qu’est-ce qu’un bon score de Cumulative Layout Shift ?<\/h2>\n
![\"Les](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-scores-1024x252.jpg\")
Comment corriger le Cumulative Layout Shift dans WordPress (ou d’autres plateformes)<\/h2>\n
Sp\u00e9cifiez toujours les dimensions des images<\/h3>\n
<img src=\"https:\/\/kinsta.com\/example-image.jpg\" alt=\"An example image\"><\/code><\/p>\n<img src=\"https:\/\/kinsta.com\/example-image.jpg\" alt=\"An example image\" width=\"600\" height=\"300\"<\/strong>><\/code><\/p>\nSp\u00e9cifiez toujours les dimensions des vid\u00e9os, des iframes et des autres \u00e9l\u00e9ments int\u00e9gr\u00e9s<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/youtube-embed-code-1024x605.jpg\")
Corrigez et optimisez le chargement des polices<\/h3>\n
\n
H\u00e9bergez les polices localement et pr\u00e9chargez-les<\/h4>\n
<link rel=\"preload\" href=\"https:\/\/kinsta.com\/fonts\/roboto.woff2\" as=\"font\/woff2\" crossorigin><\/code><\/p>\nD\u00e9finissez Font-Display sur Optional ou Swap<\/h4>\n
\n
\n
![\"Les](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/elementor-font-display-1024x796.jpg\")
Trop complexe ? Envisagez une pile de polices syst\u00e8me !<\/h4>\n
R\u00e9servez de l’espace pour les annonces (si vous utilisez des annonces d’affichage)<\/h3>\n
![\"R\u00e9glage](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/optimize-mediavine-ads-cls-1024x597.jpg\")
![\"Quelques](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-1024x775.jpg\")
![\"Enveloppez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-embed-code-1024x703.jpg\")
![\"Votre](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-frontend-example-1024x611.jpg\")
Soyez intelligent lorsque vous injectez dynamiquement du contenu avec des plugins<\/h3>\n
Utilisez la propri\u00e9t\u00e9 CSS Transform pour les animations chaque fois que possible<\/h3>\n
\n
R\u00e9sum\u00e9<\/h2>\n