{"id":16414,"date":"2022-11-15T22:23:28","date_gmt":"2022-11-15T22:23:28","guid":{"rendered":"\/tutoriels\/?p=16414"},"modified":"2024-02-18T15:08:07","modified_gmt":"2024-02-18T15:08:07","slug":"cumulative-layout-shift","status":"publish","type":"post","link":"\/fr\/tutoriels\/cumulative-layout-shift","title":{"rendered":"Cumulative Layout Shift (CLS) : qu&rsquo;est-ce que c&rsquo;est et comment l&rsquo;am\u00e9liorer ?"},"content":{"rendered":"<p>Le <strong>Cumulative Layout Shift<\/strong> (CLS) est une m&eacute;trique qui &eacute;value l&rsquo;exp&eacute;rience sur le site en d&eacute;terminant &agrave; quel point les pages du site se d&eacute;calent de mani&egrave;re inattendue. <\/p><p>M&ecirc;me si plusieurs &eacute;l&eacute;ments du site ont un impact sur l&rsquo;exp&eacute;rience utilisateur, un mauvais score de CLS affecte &eacute;galement le positionnement de votre site web sur les moteurs de recherche (SEO).&nbsp;<\/p><p>Par cons&eacute;quent, comprendre ce qu&rsquo;est le cumulative layout shift et comment obtenir un bon score de cumulative layout shift permet d&rsquo;am&eacute;liorer les performances globales de votre site internet.<\/p><p>Dans cet article, nous aborderons les diff&eacute;rentes mani&egrave;res de mesurer un score de cumulative layout shift. Nous expliquerons en passant quels &eacute;l&eacute;ments l&rsquo;influencent. Nous r&eacute;pondrons &eacute;videmment &agrave; quelques questions fr&eacute;quemment pos&eacute;es sur le cumulative layout shift &agrave; la fin de cet article.<\/p><p>Commen&ccedil;ons par r&eacute;pondre &agrave; la question principale : qu&rsquo;est-ce que le cumulative layout shift ?<\/p><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Speed-Up-Your-Website-FR.pdf\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Speed-Up-your-website-FR-1024x283-1.png\/public\" alt=\"\" class=\"wp-image-41455\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Speed-Up-your-website-FR-1024x283-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Speed-Up-your-website-FR-1024x283-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Speed-Up-your-website-FR-1024x283-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Speed-Up-your-website-FR-1024x283-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>\n\n\n\n\n\n<div class=\"protip\">\n                    <h2 class=\"featured-snippet title\">Qu'est-ce que le cumulative layout shift ?<\/h2>\n                    <p>Le cumulative layout shift mesure la stabilit&eacute; visuelle des pages internet. Pour cela, il va calculer le nombre total de changements de mise en page inattendus sur une page internet.&nbsp;Un changement de disposition se produit lorsqu&rsquo;un &eacute;l&eacute;ment visible change de position ou de taille, d&eacute;pla&ccedil;ant ainsi le contenu autour de lui.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-impacts-du-cumulative-layout-shift-sur-le-seo\">Impacts du cumulative layout shift sur le SEO<\/h2><p>Le cumulative layout shift est un facteur de classement dans Google, car il affecte les performances du site internet et l&rsquo;exp&eacute;rience utilisateur. C&rsquo;est l&rsquo;une des m&eacute;triques de <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/core-web-vitals\">Core Web Vitals<\/a>. Quant &agrave; Google, il peut p&eacute;naliser un site si celui-ci ne r&eacute;pond pas &agrave; ses normes.<\/p><p>Un mauvais score de cumulative layout shift sous-entend qu&rsquo;un site web n&rsquo;est pas fiable. Cela peut inciter les visiteurs &agrave; partir plus rapidement du site si vous avez une mauvaise gestion du CLS. Ainsi, l&rsquo;<a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/optimisation-site-web\">optimisation de votre site web<\/a> pour avoir un score de cumulative layout shift &eacute;lev&eacute; est un &eacute;l&eacute;ment essentiel dans une strat&eacute;gie de r&eacute;f&eacute;rencement performante.<\/p><h3 class=\"wp-block-heading\" id=\"h-qu-est-ce-qu-un-bon-score-cumulative-layout-shift\">Qu&rsquo;est-ce qu&rsquo;un bon score cumulative layout shift ?<\/h3><p>Un score de cumulative layout shift &eacute;lev&eacute; indique un nombre consid&eacute;rable de changements de mise en page inattendus sur une page web. D&rsquo;un autre c&ocirc;t&eacute;, une page enti&egrave;rement statique peut obtenir un score de <strong>z&eacute;ro<\/strong>.<\/p><p>Google a d&eacute;fini une norme pour toutes les m&eacute;triques Core Web Vitals afin d&rsquo;aider les propri&eacute;taires de sites &agrave; mesurer et &agrave; am&eacute;liorer leurs scores CLS :<\/p><ul class=\"wp-block-list\">\n<li><strong>Bon<\/strong> &ndash; en dessous de <strong>0,1<\/strong> est le score acceptable selon la norme de Google. <\/li>\n\n\n\n<li><strong>N&eacute;cessite une am&eacute;lioration<\/strong> &ndash; entre <strong>0,1 et 0,25<\/strong> indique que vous devez apporter des modifications pour r&eacute;duire les changements inattendus.<\/li>\n\n\n\n<li><strong>Mauvais<\/strong> &ndash; au-dessus de <strong>0,25<\/strong> peut nuire au classement de votre site.<\/li>\n<\/ul><p>Un site Web peut avoir diff&eacute;rents scores de cumulative layout shift pour diff&eacute;rentes pages Web et pour diff&eacute;rents types d&rsquo;&eacute;crans. Les changements de disposition (layout shifts) sur les &eacute;crans mobiles ont un impact plus important sur les exp&eacute;riences des utilisateurs mobiles. <\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"899\" height=\"320\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/cumulative-layout-shift-1.png\/public\" alt=\"Infographique expliquant les diff&eacute;rents scores du CLS \" class=\"wp-image-20166\" title=\"cumulative-layout-shift\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/cumulative-layout-shift-1.png\/w=899,fit=scale-down 899w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/cumulative-layout-shift-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/cumulative-layout-shift-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/cumulative-layout-shift-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 899px) 100vw, 899px\" \/><\/figure><h2 class=\"wp-block-heading\" id=\"h-comment-mesurer-votre-score-de-cumulative-layout-shift\">Comment mesurer votre score de cumulative layout shift?<\/h2><p>Voici deux m&eacute;thodes populaires pour effectuer un test de cumulative layout shift :<\/p><ul class=\"wp-block-list\">\n<li><strong>Outils de d&eacute;veloppement &ndash;<\/strong> simulez l&rsquo;exp&eacute;rience de l&rsquo;utilisateur dans un environnement contr&ocirc;l&eacute;.<\/li>\n\n\n\n<li><strong>En direct<\/strong> &ndash; sur la base d&rsquo;interactions r&eacute;elles avec les utilisateurs.<\/li>\n<\/ul><p>Il n&rsquo;y a pas de meilleure m&eacute;thode, car l&rsquo;utilisation des deux fournira des donn&eacute;es plus fiables sur les performances de votre site Web. Pour vous aider &agrave; mesurer le cumulative layout shift de votre site Web, Google propose plusieurs outils <strong>gratuits<\/strong>.<\/p><h3 class=\"wp-block-heading\" id=\"h-option-1-mesurer-le-cls-avec-des-outils-de-developpement\">Option 1. Mesurer le CLS avec des outils de d&eacute;veloppement<\/h3><p>Lors de la mesure du cumulative layout shift, le r&eacute;sultat repr&eacute;sente un petit &eacute;ventail de situations possibles. La plupart des outils de d&eacute;veloppement de navigateurs offrent un moyen de calculer le score CLS d&rsquo;une page internet affichant souvent une superposition rectangulaire qui montre les zones affect&eacute;es.<\/p><p>Voici les &eacute;tapes pour mesurer le CLS &agrave; l&rsquo;aide des <strong>outils de d&eacute;veloppement de Google Chrome<\/strong> :<\/p><p>1. Cliquez sur le menu de votre navigateur et acc&eacute;dez &agrave; <strong>Plus d&rsquo;outils -&gt; Outils de d&eacute;veloppement<\/strong>. Une autre option consiste &agrave; appuyer sur <strong>Ctrl + Maj + I <\/strong>et &agrave; s&eacute;lectionner le panneau <strong>Performances<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"506\" height=\"206\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/performance-panel-dev-tool.png\/public\" alt=\"Le panneau des performances dans les outils du d&eacute;veloppeur de Google Chrome.\" class=\"wp-image-20168\" title=\"outils-du-d&eacute;veloppeur-de-Google-Chrome\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/performance-panel-dev-tool.png\/w=506,fit=scale-down 506w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/performance-panel-dev-tool.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/performance-panel-dev-tool.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 506px) 100vw, 506px\" \/><\/figure><\/div><p>2. Cochez l&rsquo;option <strong>Web Vitals<\/strong> et cliquez sur le <strong>bouton de rechargement<\/strong> ou appuyez sur <strong>Ctrl + Maj + E<\/strong> pour enregistrer le chargement de la page.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"776\" height=\"347\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/bouton-recharger-performance.png\/public\" alt=\"Le bouton de rechargement pour enregistrer le chargement de la page dans les outils du d&eacute;veloppeur de Chrome.\" class=\"wp-image-20169\" title=\"rechargement-page-google-chrome\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/bouton-recharger-performance.png\/w=776,fit=scale-down 776w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/bouton-recharger-performance.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/bouton-recharger-performance.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/bouton-recharger-performance.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 776px) 100vw, 776px\" \/><\/figure><\/div><p>3. Attendez le r&eacute;sultat et cliquez sur l&rsquo;onglet <strong>Layout Shift <\/strong>&agrave; c&ocirc;t&eacute; d&rsquo;<strong>Exp&eacute;rience<\/strong>. L&rsquo;outil affichera le <strong>score cumul&eacute;<\/strong> sous <strong>R&eacute;sum&eacute;<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"679\" height=\"389\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/layout-shift-experience.png\/public\" alt=\"Le score du CLS sur les outils de d&eacute;veloppement.\" class=\"wp-image-20170\" title=\"score-du-CLS-sur-les-outils-de-d&eacute;veloppement\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/layout-shift-experience.png\/w=679,fit=scale-down 679w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/layout-shift-experience.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/layout-shift-experience.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 679px) 100vw, 679px\" \/><\/figure><\/div><p>Notez qu&rsquo;il peut exister plusieurs onglets <strong>Layout Shift<\/strong> qui donnent des scores diff&eacute;rents en raison de divers &eacute;l&eacute;ments visuels montrant les changements de disposition. Cliquez sur chaque onglet pour voir quel &eacute;l&eacute;ment est &agrave; l&rsquo;origine du probl&egrave;me sur votre page web.<\/p><p>D&rsquo;autres outils qui aident &agrave; mesurer le CLS dans un environnement contr&ocirc;l&eacute; incluent <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\/\" target=\"_blank\" rel=\"noopener\">Lighthouse<\/a> et&nbsp;l&rsquo;<a href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-vitals\/ahfhijdlegdabablpippeagghigmibma\" target=\"_blank\" rel=\"noopener\">extension Chrome Web Vitals<\/a> .<\/p><h3 class=\"wp-block-heading\" id=\"h-option-2-mesurer-le-cls-en-live-donnees-utilisateur-reelles\">Option 2. Mesurer le CLS en live (donn&eacute;es utilisateur r&eacute;elles)<\/h3><p>L&rsquo;autre m&eacute;thode consiste &agrave; mesurer les interactions r&eacute;elles des utilisateurs en utilisant le <a href=\"https:\/\/developer.chrome.com\/docs\/crux\/\" target=\"_blank\" rel=\"noopener\">rapport d&rsquo;exp&eacute;rience utilisateur Chrome (CrUX)<\/a> comme principale source de donn&eacute;es. Celui-ci permet d&rsquo;analyser les performances globales de votre site internet.<\/p><p><a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener\">PageSpeed &#8203;&#8203;Insights<\/a> est un outil populaire pour vous aider &agrave; mesurer vos donn&eacute;es.&nbsp;<\/p><p>Voici les &eacute;tapes &agrave; suivre pour utiliser PageSpeed &#8203;&#8203;Insights afin de calculer le score CLS d&rsquo;une page Web :<\/p><p>1. <strong>Entrez une URL de page Web<\/strong> et cliquez sur le bouton <strong>Analyser<\/strong> pour tester ses performances.<\/p><p>2. PageSpeed &#8203;&#8203;Insights affichera l&rsquo;<strong>&eacute;valuation globale de Core Web Vitals<\/strong> et si la page web est conforme aux&nbsp;normes de Google. Cependant, l&rsquo;outil affichera d&rsquo;abord le r&eacute;sultat pour les appareils <strong>Mobiles<\/strong>.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"932\" height=\"560\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/core-web-vitals-mobile.png\/public\" alt=\"L'&eacute;valuation des vitaux web de base de PageSpeed Insight sur les appareils mobiles\" class=\"wp-image-20171\" title=\"core-web-evaluation-mobile\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/core-web-vitals-mobile.png\/w=932,fit=scale-down 932w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/core-web-vitals-mobile.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/core-web-vitals-mobile.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/core-web-vitals-mobile.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 932px) 100vw, 932px\" \/><\/figure><p>3. Cliquez sur <strong>Bureau<\/strong> pour trouver le score CLS pour les ordinateurs de bureau. Remarquez comment le score peut &ecirc;tre diff&eacute;rent sur divers &eacute;crans.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"930\" height=\"548\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/core-web-vitals-bureau.png\/public\" alt=\"L'&eacute;valuation des vitaux web de base de PageSpeed Insight sur les appareils de bureau.\" class=\"wp-image-20172\" title=\"cls-score-bureau\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/core-web-vitals-bureau.png\/w=930,fit=scale-down 930w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/core-web-vitals-bureau.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/core-web-vitals-bureau.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/core-web-vitals-bureau.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 930px) 100vw, 930px\" \/><\/figure><p>4. Cliquez sur <strong>Agrandir la<\/strong> <strong>vue<\/strong> pour mieux comprendre le score.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"470\" height=\"246\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/cls-details.png\/public\" alt=\"D&eacute;tails sur le score CLS.\" class=\"wp-image-20173\" title=\"cls-details\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/cls-details.png\/w=470,fit=scale-down 470w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/cls-details.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/cls-details.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 470px) 100vw, 470px\" \/><\/figure><\/div><p>D&rsquo;autres outils populaires pour aider &agrave; mesurer le CLS sur le terrain sont <a href=\"https:\/\/console.cloud.google.com\/projectselector2\/bigquery?pli=1\" target=\"_blank\" rel=\"noopener\">BigQuery<\/a> et <a href=\"https:\/\/marketingplatform.google.com\/about\/data-studio\/\" target=\"_blank\" rel=\"noopener\">Looker Studio<\/a>.<\/p><h2 class=\"wp-block-heading\" id=\"h-comprendre-comment-le-score-cls-est-calcule\">Comprendre comment le score CLS est calcul&eacute;<\/h2><p>Comprendre comment calculer le score CLS aidera &agrave; mieux l&rsquo;optimiser. Les scores CLS mesurent deux &eacute;l&eacute;ments dans un changement de mise en page inattendu :<\/p><ul class=\"wp-block-list\">\n<li><strong>La fraction d&rsquo;impact<\/strong> (impact fraction) : mesure l&rsquo;effet d&rsquo;un &eacute;l&eacute;ment instable sur la fen&ecirc;tre.<\/li>\n\n\n\n<li><strong>La fraction de distance<\/strong> (distance fraction) mesure la distance parcourue par l&rsquo;&eacute;l&eacute;ment dans la fen&ecirc;tre.<\/li>\n<\/ul><p>Le calcul pour obtenir un score CLS est :<\/p><p><strong>Score CLS final = Fraction d&rsquo;impact x Fraction de distance<\/strong><\/p><h3 class=\"wp-block-heading\" id=\"h-la-fraction-d-impact\">La Fraction d&rsquo;impact<\/h3><p>La fraction d&rsquo;impact mesure l&rsquo;espace occup&eacute; par un &eacute;l&eacute;ment instable dans la zone de la fen&ecirc;tre. Lorsque des &eacute;l&eacute;ments visibles se d&eacute;placent de mani&egrave;re inattendue vers une autre zone, la fraction d&rsquo;impact calcule la surface totale prise par le d&eacute;placement :<\/p><p><strong>Fraction d&rsquo;impact = R&eacute;gion d&rsquo;impact \/ Zone de la fen&ecirc;tre d&rsquo;affichage<\/strong><\/p><p>Ce score montre l&rsquo;impact des &eacute;l&eacute;ments instables sur les performances globales du site Web.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"851\" height=\"571\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/cumulative-layout-shift-04-1.png\/public\" alt=\"Un graphique personnalis&eacute; illustrant la fraction d'impact dans un site web, qui mesure l'espace qu'un instable occupe dans la zone d'affichage. \" class=\"wp-image-20174\" title=\"cls-fraction-impact\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/cumulative-layout-shift-04-1.png\/w=851,fit=scale-down 851w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/cumulative-layout-shift-04-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/cumulative-layout-shift-04-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/cumulative-layout-shift-04-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 851px) 100vw, 851px\" \/><\/figure><h3 class=\"wp-block-heading\" id=\"h-la-fraction-de-distance\">La Fraction de distance<\/h3><p>La Fraction de distance mesure la plus grande distance parcourue par des &eacute;l&eacute;ments instables lors de changements de disposition inattendus. Le calcul pour obtenir la fraction de distance est :<\/p><p><strong>Fraction de distance = distance de d&eacute;placement maximale \/ zone de la fen&ecirc;tre d&rsquo;affichage<\/strong><\/p><p>Le score montre &agrave; quel point un &eacute;l&eacute;ment existant d&eacute;place d&rsquo;autres &eacute;l&eacute;ments lors d&rsquo;un d&eacute;placement inattendu.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"851\" height=\"571\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/cumulative-layout-shift-05.png\/public\" alt=\"Un graphique personnalis&eacute; sur la fraction de distance\" class=\"wp-image-20175\" title=\"cls-fraction-distance\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/cumulative-layout-shift-05.png\/w=851,fit=scale-down 851w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/cumulative-layout-shift-05.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/cumulative-layout-shift-05.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/cumulative-layout-shift-05.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 851px) 100vw, 851px\" \/><\/figure><h2 class=\"wp-block-heading\" id=\"h-comment-trouver-quel-element-a-cause-un-mauvais-score-cls-nbsp\">Comment trouver quel &eacute;l&eacute;ment a caus&eacute; un mauvais score CLS&nbsp;?<\/h2><p>Si une page internet a un mauvais score CLS, certains &eacute;l&eacute;ments sont &agrave; examiner comme :<\/p><ul class=\"wp-block-list\">\n<li>Banni&egrave;res publicitaires, int&eacute;grations, iFrames, images et &eacute;l&eacute;ments vid&eacute;o sans sp&eacute;cifications de taille.<\/li>\n\n\n\n<li>Contenu dynamique au-dessus de la fen&ecirc;tre d&rsquo;affichage actuelle, sans espace r&eacute;serv&eacute; pour la taille de l&rsquo;&eacute;cran.<\/li>\n\n\n\n<li>Polices personnalis&eacute;es qui modifient le rendu de la page.<\/li>\n<\/ul><p>Ces actions anticipent le plus souvent une r&eacute;ponse du serveur pour t&eacute;l&eacute;charger des &eacute;l&eacute;ments. Un tel effet entra&icirc;ne des changements de mise en page inattendus assez importants.<\/p><p>Les outils pour mesurer le score CLS d&rsquo;une page Web peuvent &eacute;galement indiquer les &eacute;l&eacute;ments sp&eacute;cifiques qui peuvent causer un probl&egrave;me avec les changements de mise en page.<\/p><p>Par exemple, le panneau <strong>Performances<\/strong> des outils de d&eacute;veloppement d&rsquo;un navigateur affiche les &eacute;l&eacute;ments instables dans l&rsquo;onglet <strong>Layout Shift<\/strong>.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"467\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/elements-score-cls-1.png\/public\" alt=\"&Eacute;l&eacute;ments affectant le score CLS, tels qu'ils apparaissent dans les outils de d&eacute;veloppement de Chrome. \" class=\"wp-image-20177\" title=\"elements-impactant-score-cls\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/elements-score-cls-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/elements-score-cls-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/elements-score-cls-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/elements-score-cls-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Le <strong>r&eacute;sum&eacute; <\/strong>partage &eacute;galement l&rsquo;emplacement et la taille appartenant &agrave; un &eacute;l&eacute;ment instable.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"506\" height=\"317\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/resume-experience.png\/public\" alt=\"Outils du d&eacute;veloppeur montrant la distance parcourue durant les layout shifts.\" class=\"wp-image-20178\" title=\"r&eacute;sum&eacute;-exp&eacute;rience\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/resume-experience.png\/w=506,fit=scale-down 506w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/resume-experience.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/resume-experience.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 506px) 100vw, 506px\" \/><\/figure><\/div><p>Sur PageSpeed &#8203;&#8203;Insights, vous pouvez rechercher plus de d&eacute;tails sur l&rsquo;&eacute;l&eacute;ment provoquant des changements inattendus dans la section <strong>DIAGNOSTICS<\/strong>.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"949\" height=\"419\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/pagespeed-insights-outil-diagnostic.png\/public\" alt=\"Les diagnostics de l'outil PageSpeed Insights.\" class=\"wp-image-20179\" title=\"diagnostic-pagespeed-insights\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/pagespeed-insights-outil-diagnostic.png\/w=949,fit=scale-down 949w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/pagespeed-insights-outil-diagnostic.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/pagespeed-insights-outil-diagnostic.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/pagespeed-insights-outil-diagnostic.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 949px) 100vw, 949px\" \/><\/figure><h2 class=\"wp-block-heading\" id=\"h-comment-ameliorer-votre-score-de-cls-nbsp\">Comment am&eacute;liorer votre score de CLS&nbsp;?<\/h2><p>Le score CLS est un facteur de classement SEO, donc l&rsquo;optimiser aidera &agrave; <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/generer-du-trafic-sur-son-site\">g&eacute;n&eacute;rer plus de trafic vers votre site<\/a>. Voici quatre fa&ccedil;ons d&rsquo;am&eacute;liorer votre score CLS, ainsi que le niveau de difficult&eacute; et l&rsquo;impact de chaque m&eacute;thode.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-definir-les-dimensions-des-images-et-des-videos\">1. D&eacute;finir les dimensions des images et des vid&eacute;os<\/h3><p><strong>Niveau de difficult&eacute; : facile<\/strong><\/p><p><strong>Impact : &eacute;lev&eacute;<\/strong><\/p><p>Tous les &eacute;l&eacute;ments images et vid&eacute;os d&rsquo;une page internet n&eacute;cessitent des attributs de largeur et de hauteur pour &eacute;viter les d&eacute;calages inattendus. Voici un exemple de d&eacute;finition des attributs de largeur et de hauteur :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img src=\"example.jpg\" width=\"400\" height=\"400\" alt=\"Example of an image.\"&gt;<\/pre><p>Cependant, les images responsives doivent utiliser le m&ecirc;me rapport d&rsquo;aspect pour aider les navigateurs &agrave; calculer la quantit&eacute; correcte d&rsquo;espace requis pour les afficher.<\/p><p>L&rsquo; attribut <strong>srcset <\/strong>d&eacute;finit un ensemble de tailles d&rsquo;image diff&eacute;rentes employant le m&ecirc;me format d&rsquo;image pour aider les navigateurs &agrave; fournir correctement des images responsives. Voici un exemple de ce &agrave; quoi ressemble le code en utilisant cet attribut :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img width=\"1000\" height=\"1000\" src=\"example-1000.jpg\" srcset=\"example-1000.jpg 1000w, example-2000.jpg 2000w, example-3000.jpg 3000w\" alt=\"Example of an image.\"&gt;<\/pre><p>La plupart des navigateurs modernes peuvent &eacute;galement d&eacute;finir le format d&rsquo;image par d&eacute;faut en fonction des attributs de largeur et de hauteur de l&rsquo;image ou de la vid&eacute;o. Ainsi, un moyen d&rsquo;emp&ecirc;cher les changements de mise en page consiste &agrave; utiliser des formats d&rsquo;image CSS comme dans l&rsquo;exemple ci-dessous :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">img {\naspect-ratio:attr(width)\/attr(height);\n}<\/pre><p>Ce code aide le navigateur &agrave; pr&eacute;dire les diff&eacute;rents rapports d&rsquo;aspect en suivant les dimensions de l&rsquo;image lors de son chargement.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-definition-de-la-largeur-et-de-la-hauteur-des-bannieres-publicitaires-des-embeds-et-des-iframes\">2. D&eacute;finition de la largeur et de la hauteur des banni&egrave;res publicitaires, des embeds et des iFrames<\/h3><p><strong>Niveau de difficult&eacute; : moyen<\/strong><\/p><p><strong>Impact : &eacute;lev&eacute;<\/strong><\/p><p>R&eacute;server de l&rsquo;espace pour les banni&egrave;res publicitaires, les embeds et les iFrames permet d&rsquo;&eacute;viter les changements de mise en page.<\/p><p><strong>Banni&egrave;re publicitaire<\/strong><\/p><p>Les banni&egrave;res publicitaires pr&eacute;sentant du contenu visible peuvent entra&icirc;ner des changements de mise en page importants, ce qui conduit &agrave; une exp&eacute;rience utilisateur non optimale. Les r&eacute;seaux publicitaires et les &eacute;diteurs qui prennent en charge les tailles d&rsquo;annonces dynamiques doivent r&eacute;server un espace au pr&eacute;alable pour &eacute;viter de mauvais scores CLS.<\/p><p>Donnez d&rsquo;abord un style &agrave; l&rsquo;&eacute;l&eacute;ment avant le chargement de la biblioth&egrave;que de tags d&rsquo;emplacements publicitaires. Cela permet d&rsquo;emp&ecirc;cher ces banni&egrave;res publicitaires de diffuser du contenu visible.&nbsp;<\/p><p>L&rsquo;application de cette m&eacute;thode est &eacute;galement importante lorsqu&rsquo;une annonce remplit toute la ligne ou la colonne d&rsquo;une page. Comme cela, vous &eacute;vitez les changements de mise en page m&ecirc;me si l&rsquo;annonce ne se charge pas.<\/p><p>Utilisez l&rsquo;&eacute;l&eacute;ment slot pour sp&eacute;cifier la taille de l&rsquo;annonce &agrave; l&rsquo;aide des propri&eacute;t&eacute;s CSS <strong>min-height<\/strong> et <strong>min-width<\/strong> :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div id=\"ad-slot\" style=\"min-width: 300px; min-height: 250px;\"&gt;&lt;\/div&gt;<\/pre><p>En outre, ajoutez des requ&ecirc;tes m&eacute;dias CSS (media queries) pour sp&eacute;cifier diff&eacute;rents minimums lors de l&rsquo;utilisation de diff&eacute;rentes tailles d&rsquo;&eacute;cran&nbsp;:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media screen and (max-width: 970px) {\n  #ad-slot {\n    min-height: 250px;\n  }\n}<\/pre><p>Utilisez vos donn&eacute;es historiques pour choisir la meilleure taille pour l&rsquo;emplacement publicitaire. Assurez-vous de tenir compte des divers facteurs de forme et de diff&eacute;rences subtiles entre les tailles des annonces.<\/p><p>Cette m&eacute;thode fonctionne &eacute;galement quand vous ins&eacute;rez des publicit&eacute;s non collantes (non sticky ads) &agrave; une page Web. En ajoutant l&rsquo;espace requis, les pubs ne d&eacute;clencheront pas de d&eacute;calage de mise en page lorsqu&rsquo;elles sont charg&eacute;es hors &eacute;cran.<\/p><p><strong>Embeds et iFrames<\/strong><\/p><p>Les embeds peuvent prendre diff&eacute;rentes formes. Il est donc plus facile d&rsquo;&ecirc;tre incertain de leurs tailles sur une page web. Par cons&eacute;quent, les plateformes ne r&eacute;servent pas toujours l&rsquo;espace requis pour les widgets et applications int&eacute;grables.<\/p><p>De m&ecirc;me, un cadre en ligne (iFrame) apporte &eacute;galement des &eacute;l&eacute;ments tiers &agrave; une page Web, ce qui peut provoquer des d&eacute;calages de mise en page.<\/p><p>Pour &eacute;viter d&rsquo;avoir des embeds et des iFrames causant de mauvais scores CLS, vous devez inspecter leurs tailles &agrave; l&rsquo;aide d&rsquo;outils de d&eacute;veloppement de votre navigateur. Cliquez sur l&rsquo;ic&ocirc;ne du pointeur dans le coin sup&eacute;rieur gauche des outils de d&eacute;veloppement et s&eacute;lectionnez les &eacute;l&eacute;ments que vous souhaitez inspecter.<\/p><p>Apr&egrave;s avoir s&eacute;lectionn&eacute; l&rsquo;&eacute;l&eacute;ment, l&rsquo;outil affiche sa taille.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"963\" height=\"635\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/inspecter-taille-element.png\/public\" alt=\"Inspection de la taille d'un &eacute;l&eacute;ment &agrave; l'aide de l'outil de d&eacute;veloppement.\" class=\"wp-image-20180\" title=\"inspection-taille\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/inspecter-taille-element.png\/w=963,fit=scale-down 963w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/inspecter-taille-element.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/inspecter-taille-element.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/02\/inspecter-taille-element.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 963px) 100vw, 963px\" \/><\/figure><p>Ajoutez ces tailles &agrave; vos &eacute;l&eacute;ments embed ou iFrames.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-utilisation-de-la-police-affichage-des-polices-personnalisees\">3. Utilisation de la police : affichage des polices personnalis&eacute;es<\/h3><p><strong>Niveau de difficult&eacute; : moyen<\/strong><\/p><p><strong>Impact : moyen<\/strong><\/p><p><a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/changer-polices-wordpress\">Ajouter une police personnalis&eacute;e<\/a> &agrave; votre site Web peut augmenter le score CLS en provoquant :<\/p><ul class=\"wp-block-list\">\n<li><strong>Flashs de texte invisible (FOIT)<\/strong> &ndash; le rendu de la page affichera du texte invisible ou une police vierge jusqu&rsquo;&agrave; ce qu&rsquo;il charge la police personnalis&eacute;e.<\/li>\n\n\n\n<li><strong>Flashs de texte non stylis&eacute; (FOUT)<\/strong> &ndash; les navigateurs affichent une police de secours jusqu&rsquo;&agrave; ce qu&rsquo;ils chargent la police personnalis&eacute;e, ignorant momentan&eacute;ment la mise en page.<\/li>\n<\/ul><p>Le chargement d&rsquo;une police web personnalis&eacute;e peut entra&icirc;ner un d&eacute;calage important de la mise en page. Le plus souvent, cela se produit en raison de l&rsquo;utilisation d&rsquo;un espace diff&eacute;rent de celui requis. Utilisez donc les valeurs <strong>font:display<\/strong> , telles qu&rsquo;<strong>auto<\/strong> , <strong>fallback<\/strong> , <strong>block<\/strong> <strong>, swap<\/strong> et <strong>optional<\/strong> , pour &eacute;viter le texte invisible et sans style.<\/p><p>Une autre fa&ccedil;on d&rsquo;&eacute;viter des changements de style assez significatifs dans vos polices Web consiste &agrave; choisir un syst&egrave;me de police similaire :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@font-face {\n  font-family: 'Pacifico';\n  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(www.examplefonts.woff2) format('woff2');\n  font-display: swap;\n}<\/pre><p>Avec les polices Web personnalis&eacute;es de Google, &eacute;vitez les changements de mise en page en ajoutant <strong>&amp;display=swap<\/strong> apr&egrave;s votre lien :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto:400,700&amp;display=swap\" rel=\"stylesheet\"&gt;<\/pre><p>L&rsquo;ajout d&rsquo;une valeur <strong>&lt;link rel=preload&gt;<\/strong> &agrave; votre fichier de police permet &eacute;galement d&rsquo;&eacute;viter le changement de mise en page lors du chargement de polices personnalis&eacute;es.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-examen-du-contenu-injecte-dynamiquement\">4. Examen du contenu inject&eacute; dynamiquement<\/h3><p><strong>Niveau de difficult&eacute; : moyen<\/strong><\/p><p><strong>Impact : &eacute;lev&eacute;<\/strong><\/p><p>Une autre raison derri&egrave;re un probl&egrave;me CLS se rapporte au contenu dynamique. Les sites internet utilisent souvent un contenu dynamique pour inciter les visiteurs &agrave; effectuer une action sp&eacute;cifique. Cependant, lorsqu&rsquo;un nouvel &eacute;l&eacute;ment de contenu appara&icirc;t en haut ou en bas d&rsquo;une page, il d&eacute;place la plupart du temps le contenu qui l&rsquo;entoure.<\/p><p>Par cons&eacute;quent, il faut &eacute;viter d&rsquo;injecter du contenu dynamique au-dessus du contenu existant. Voici quelques-unes des fa&ccedil;ons d&rsquo;examiner le contenu inject&eacute; dynamiquement :<\/p><ul class=\"wp-block-list\">\n<li><strong>Inviter les utilisateurs &agrave; initier des modifications<\/strong> &ndash; ajoutez un &eacute;l&eacute;ment d&rsquo;interaction utilisateur pour d&eacute;clencher un nouveau chargement de contenu afin d&rsquo;&eacute;viter les changements inattendus. Certains exemples incluent un bouton <strong>En savoir plus<\/strong> ou <strong>Actualiser<\/strong>. Notez que vous devez maintenir les d&eacute;calages de mise en page dans les <strong>500 ms<\/strong> pour &eacute;viter d&rsquo;affecter le score du CLS.<\/li>\n\n\n\n<li><strong>Chargement du contenu hors &eacute;cran<\/strong> &ndash; &eacute;tant donn&eacute; que les changements qui se produisent hors &eacute;cran ne contribuent pas au CLS, une autre option consiste &agrave; charger le contenu dynamique en dehors de la fen&ecirc;tre d&rsquo;affichage de l&rsquo;utilisateur. Ensuite, vous devez utiliser une superposition pour inviter les utilisateurs &agrave; le voir, comme une notification de d&eacute;filement vers le haut.<\/li>\n\n\n\n<li><strong>L&rsquo;utilisation d&rsquo;un conteneur de taille fixe <\/strong>&ndash; permet d&rsquo;&eacute;viter de modifier votre mise en page. L&rsquo;une des options n&eacute;cessite l&rsquo;usage d&rsquo;un carrousel. Celui-ci repr&eacute;sente &eacute;galement une alternative appropri&eacute;e si votre contenu dynamique remplace un &eacute;l&eacute;ment par un autre. Assurez-vous que tous les liens ou contr&ocirc;les attendent la transition pour ne pas faire de clics accidentels.<\/li>\n<\/ul><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/public\" alt=\"\" class=\"wp-image-41467\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>Le CLS mesure les changements inattendus dans la zone de la fen&ecirc;tre d&rsquo;affichage pour &eacute;valuer l&rsquo;exp&eacute;rience de l&rsquo;utilisateur. De plus, en tant que facteur de classement Google, le CLS offre un impact significatif sur votre SEO.<\/p><p>Une page Web avec une grande stabilit&eacute; visuelle poss&egrave;de un score CLS inf&eacute;rieur &agrave; <strong>0,1<\/strong>, tandis que tout ce qui est sup&eacute;rieur &agrave; <strong>0,25<\/strong> indique des performances m&eacute;diocres. Nous avons pr&eacute;sent&eacute; deux m&eacute;thodes pour mesurer le CLS : avec des outils de dev et directement en live, sur le site. Bien qu&rsquo;il soit possible de choisir une autre m&eacute;thode comme Javascript, l&rsquo;utilisation des deux m&eacute;thodes pr&eacute;sent&eacute;es ensemble produira immanquablement des r&eacute;sultats plus fiables sur les performances du site internet.<\/p><p>Apr&egrave;s avoir discut&eacute; de la fa&ccedil;on d&rsquo;identifier les &eacute;l&eacute;ments augmentant votre score CLS, nous avons expliqu&eacute; comment r&eacute;soudre les probl&egrave;mes de CLS &agrave; l&rsquo;aide de ces quatre m&eacute;thodes :<\/p><ul class=\"wp-block-list\">\n<li>D&eacute;finition des dimensions des images et des vid&eacute;os.<\/li>\n\n\n\n<li>D&eacute;finition d&rsquo;une largeur et d&rsquo;une hauteur pour les banni&egrave;res publicitaires, les embeds et les iFrames.<\/li>\n\n\n\n<li>Utilisation des valeurs <strong>font:display<\/strong> pour des polices personnalis&eacute;es.<\/li>\n\n\n\n<li>Examen du contenu dynamique.<\/li>\n<\/ul><p>Faites-nous savoir quelle est la m&eacute;thode qui a le mieux fonctionn&eacute; pour votre score CLS dans la section des commentaires ci-dessous.<\/p><p>Si vous souhaitez continuer &agrave; am&eacute;liorer les performances de votre site Web, assurez-vous d&rsquo;utiliser un <a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-web\">plan d&rsquo;h&eacute;bergement web<\/a> fiable. Bonne chance!<\/p><h2 class=\"wp-block-heading\" id=\"h-faq-sur-le-cumulative-layout-shift-cls\">FAQ sur le Cumulative Layout Shift (CLS)<\/h2><div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1668550696901\"><h3 class=\"schema-faq-question\">Qu&rsquo;est-ce qu&rsquo;un changement de disposition attendu et inattendu ?<\/h3> <p class=\"schema-faq-answer\">Un changement de disposition attendu se produit lorsque l&rsquo;utilisateur r&eacute;alise une action. Par exemple, il se produit lorsqu&rsquo;un utilisateur clique sur un bouton. D&rsquo;autre part, un changement de disposition inattendu se produit quand un &eacute;l&eacute;ment visible se d&eacute;place sans qu&rsquo;aucune action ait &eacute;t&eacute; initi&eacute;e par l&rsquo;utilisateur. Notez que votre score CLS ne prend en compte que les changements de mise en page inattendus.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1668550709431\"><h3 class=\"schema-faq-question\">Le lazy-loading affecte-t-il le CLS ?<\/h3> <p class=\"schema-faq-answer\">Le chargement diff&eacute;r&eacute; peut entra&icirc;ner des changements de mise en page lorsque l&rsquo; utilisateur fait d&eacute;filer une page Web et que l&rsquo;&eacute;l&eacute;ment visuel est toujours en cours de chargement. Cependant, le chargement diff&eacute;r&eacute; est essentiel pour aider &agrave; optimiser les images sur une Page Web.<br><br>Par cons&eacute;quent, n&rsquo;oubliez pas de sp&eacute;cifier les dimensions des images &agrave; chargement diff&eacute;r&eacute; pour &eacute;viter d&rsquo;affecter votre score CLS.<br><\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1668550721727\"><h3 class=\"schema-faq-question\">Le score CLS est-il calcul&eacute; uniquement pour le contenu qui est au-dessus du pli ?<\/h3> <p class=\"schema-faq-answer\">Oui, seuls les changements de mise en page dans le contenu au-dessus du pli affectent votre score CLS. Cependant, l&rsquo;optimisation de tous les &eacute;l&eacute;ments d&rsquo;une page Web garantit de meilleures performances globales et une meilleure <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/test-de-vitesse-de-site-web\">vitesse du site Web<\/a> , ce qui &agrave; son tour affectera le trafic et le classement.<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Le Cumulative Layout Shift (CLS) est une m&eacute;trique qui &eacute;value l&rsquo;exp&eacute;rience sur le site en d&eacute;terminant &agrave; quel point les pages du site se d&eacute;calent de mani&egrave;re inattendue. M&ecirc;me si plusieurs &eacute;l&eacute;ments du site ont un impact sur l&rsquo;exp&eacute;rience utilisateur, un mauvais score de CLS affecte &eacute;galement le positionnement de votre site web sur les [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/cumulative-layout-shift\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":189,"featured_media":18723,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Cumulative Layout Shift (CLS) : Conseils Pour l'Optimiser","rank_math_description":"Vous souhaitez optimiser le Cumulative Layout Shift (CLS) ? D\u00e9couvrez notre article qui r\u00e9pondra \u00e0 toutes vos questions.","rank_math_focus_keyword":"cumulative layout shift","footnotes":""},"categories":[5811,4804],"tags":[],"class_list":["post-16414","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-optimisation","category-developpement-site-web"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/cumulative-layout-shift","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/cumulative-layout-shift","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-cumulative-layout-shift","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cumulative-layout-shift","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/cumulative-layout-shift","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-cumulative-layout-shift","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-cumulative-layout-shift","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-cumulative-layout-shift","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/cumulative-layout-shift-cls","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/16414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/189"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=16414"}],"version-history":[{"count":42,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/16414\/revisions"}],"predecessor-version":[{"id":29835,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/16414\/revisions\/29835"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media\/18723"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=16414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=16414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=16414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}