{"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&#8217;est-ce que c&#8217;est et comment l&#8217;am\u00e9liorer ?"},"content":{"rendered":"<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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\"><div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                   Qu'est-ce que le cumulative layout shift ?\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">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><\/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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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>\n<\/div><p class=\"wp-block-paragraph\">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>\n<\/div><p class=\"wp-block-paragraph\">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>\n<\/div><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">1. <strong>Entrez une URL de page Web<\/strong> et cliquez sur le bouton <strong>Analyser<\/strong> pour tester ses performances.<\/p><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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>\n<\/div><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">Le calcul pour obtenir un score CLS est :<\/p><p class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><strong>Fraction d&rsquo;impact = R&eacute;gion d&rsquo;impact \/ Zone de la fen&ecirc;tre d&rsquo;affichage<\/strong><\/p><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><strong>Fraction de distance = distance de d&eacute;placement maximale \/ zone de la fen&ecirc;tre d&rsquo;affichage<\/strong><\/p><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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>\n<\/div><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><strong>Niveau de difficult&eacute; : facile<\/strong><\/p><p class=\"wp-block-paragraph\"><strong>Impact : &eacute;lev&eacute;<\/strong><\/p><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><strong>Niveau de difficult&eacute; : moyen<\/strong><\/p><p class=\"wp-block-paragraph\"><strong>Impact : &eacute;lev&eacute;<\/strong><\/p><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><strong>Banni&egrave;re publicitaire<\/strong><\/p><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><strong>Embeds et iFrames<\/strong><\/p><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><strong>Niveau de difficult&eacute; : moyen<\/strong><\/p><p class=\"wp-block-paragraph\"><strong>Impact : moyen<\/strong><\/p><p class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><strong>Niveau de difficult&eacute; : moyen<\/strong><\/p><p class=\"wp-block-paragraph\"><strong>Impact : &eacute;lev&eacute;<\/strong><\/p><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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":[5838,5888],"tags":[],"class_list":["post-16414","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing-numerique","category-seo"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/cumulative-layout-shift-cls\/","default":1},{"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-PH","link":"https:\/\/www.hostinger.com\/ph\/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-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/cumulative-layout-shift-cls\/","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":"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},{"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":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/cumulative-layout-shift\/","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}]}}