{"id":67574,"date":"2022-06-24T16:39:38","date_gmt":"2022-06-24T15:39:38","guid":{"rendered":"https:\/\/www.artefact.com\/?post_type=news-seo&#038;p=67574"},"modified":"2025-09-04T14:03:39","modified_gmt":"2025-09-04T13:03:39","slug":"comment-ameliorer-le-cls-cumulative-layout-shift","status":"publish","type":"blog","link":"https:\/\/www.artefact.com\/fr\/blog\/comment-ameliorer-le-cls-cumulative-layout-shift\/","title":{"rendered":"Comment am\u00e9liorer le CLS - Cumulative Layout Shift ?"},"content":{"rendered":"<p><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling article-author\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-background-color:#ffffff;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:calc( 1440px + 20px );margin-left: calc(-20px \/ 2 );margin-right: calc(-20px \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_2 1_2 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:10px;--awb-margin-bottom-large:0px;--awb-spacing-left-large:10px;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:10px;--awb-spacing-left-medium:10px;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:10px;--awb-spacing-left-small:10px;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-1 fusion-sep-none fusion-title-text fusion-title-size-two\" style=\"--awb-margin-bottom-small:8px;\"><h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;--fontSize:50;line-height:1.2;\">Auteur<\/h2><\/div><img decoding=\"async\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27150%27%20height%3D%270%27%20viewBox%3D%270%200%20150%200%27%3E%3Crect%20width%3D%27150%27%20height%3D%270%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/www.artefact.com\/wp-content\/uploads\/2021\/02\/Olivier-Perbet-.png\" alt=\"Image\" class=\"lazyload artefact-elegant-image align-left article-author-image\" style=\"width: 150px; border-radius: 54% 46% 77% 23% \/ 74% 40% 60% 26%; overflow: hidden;\" width=\"150\" height=\"auto\" \/><div class=\"fusion-title title fusion-title-2 fusion-sep-none fusion-title-text fusion-title-size-three article-author-name-title\" style=\"--awb-margin-bottom-small:8px;\"><h3 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;--fontSize:20;line-height:1.2;\">Olivier Perbet<\/h3><\/div><div class=\"fusion-text fusion-text-1 article-author-description\" style=\"--awb-text-transform:none;\"><p>Responsable du p\u00f4le SEO<\/p>\n<\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-2 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:calc( 1440px + 20px );margin-left: calc(-20px \/ 2 );margin-right: calc(-20px \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:10px;--awb-margin-bottom-large:0px;--awb-spacing-left-large:10px;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:10px;--awb-spacing-left-medium:10px;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:10px;--awb-spacing-left-small:10px;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-2 description\" style=\"--awb-text-transform:none;\"><p>Cela fait d\u00e9j\u00e0 1 ans que Google prend en compte l'exp\u00e9rience utilisateur comme facteur de positionnement dans ses r\u00e9sultats de recherche. Les KPIs de webperformance que sont les Core Web Vitals sont depuis suivis de pr\u00e8s par les responsables SEO. Int\u00e9ressons-nous aujourd'hui au Cumulative Layout Shift.<\/p>\n<\/div><\/div><\/div><\/div><\/div><article class=\"fusion-fullwidth fullwidth-box fusion-builder-row-3 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-justify-content-center fusion-flex-content-wrap\" style=\"max-width:calc( 1440px + 20px );margin-left: calc(-20px \/ 2 );margin-right: calc(-20px \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-2 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:10px;--awb-margin-bottom-large:0px;--awb-spacing-left-large:10px;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:10px;--awb-spacing-left-medium:10px;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:10px;--awb-spacing-left-small:10px;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-3\" style=\"--awb-text-transform:none;\"><p>Les <a href=\"https:\/\/www.artefact.com\/fr\/news-seo\/la-vitesse-et-lux-impactent-elles-le-seo\/\">Core Web Vitals<\/a> (Signaux Web Essentiels) \u00e9valuent la performance du chargement d'une page web pour un internaute :<\/p>\n<\/div><ul style=\"--awb-line-height:27.2px;--awb-icon-width:27.2px;--awb-icon-height:27.2px;--awb-icon-margin:11.2px;--awb-content-margin:38.4px;\" class=\"fusion-checklist fusion-checklist-1 fusion-checklist-default type-icons paddingList dark-text\"><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-no\"><i class=\"fusion-li-icon awb-icon-check\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">Quel d\u00e9lai avant le premier \u00e9l\u00e9ment visuel (LCP) ?<\/div><\/li><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-no\"><i class=\"fusion-li-icon awb-icon-check\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">Quelle r\u00e9activit\u00e9 de la page \u00e0 une interaction (FID) ?<\/div><\/li><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-no\"><i class=\"fusion-li-icon awb-icon-check\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">Quelle stabilit\u00e9 visuelle lors du chargement (CLS) ?<\/div><\/li><\/ul><div class=\"fusion-title title fusion-title-3 fusion-sep-none fusion-title-text fusion-title-size-two\" style=\"--awb-margin-bottom-small:8px;\"><h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;--fontSize:50;line-height:1.2;\">Qu'est-ce que le Cumulative Layout Shift ?<\/h2><\/div><div class=\"fusion-text fusion-text-4\" style=\"--awb-text-transform:none;\"><p>Le CLS (Cumulative Layout Shift) mesure donc la stabilit\u00e9 visuelle d'une page. L'exemple le plus parlant est celui d'un site m\u00e9dia, par nature dense en encart publicitaire. Le titre et le d\u00e9but d'un article apparaissent, l'internaute s'appr\u00e8te \u00e0 les faire d\u00e9filer, mais au moment o\u00f9 il clique appara\u00eet un bandeau publicitaire. L'internaute est donc amen\u00e9 vers un site tiers non souhait\u00e9, il lui faut faire marche arri\u00e8re pour revenir \u00e0 son article, et \u00eatre vigilant \u00e0 ne pas re-cliquer sur le bandeau surprise.<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\"fusion-imageframe imageframe-none imageframe-1 hover-type-none\"><img decoding=\"async\" width=\"512\" height=\"277\" alt=\"Cumulative Layout Shift \" title=\"CLS1\" src=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS1.png\" data-orig-src=\"https:\/\/www.artefact.com\/wp-content\/uploads\/2022\/06\/CLS1.png\" class=\"lazyload img-responsive wp-image-67575\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27512%27%20height%3D%27277%27%20viewBox%3D%270%200%20512%20277%27%3E%3Crect%20width%3D%27512%27%20height%3D%27277%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS1-200x108.png 200w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS1-400x216.png 400w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS1.png 512w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 512px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-5\" style=\"--awb-text-transform:none;\"><p><em>Optimiser le d\u00e9calage cumulatif de la mise en page - Google - <a href=\"https:\/\/web.dev\/optimize-cls\/\" target=\"_blank\" rel=\"noopener\">https:\/\/web.dev\/optimize-cls\/<\/a><\/em><\/p>\n<p>La situation \u00e9tant courante sur les sites web modernes, il est coh\u00e9rent que Google en ait tir\u00e9 un indicateur de mesure, afin d'encourager les \u00e9diteurs de site \u00e0 l'am\u00e9liorer.<\/p>\n<\/div><div class=\"fusion-title title fusion-title-4 fusion-sep-none fusion-title-text fusion-title-size-two\" style=\"--awb-margin-bottom-small:8px;\"><h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;--fontSize:50;line-height:1.2;\">Comment le mesurer ?<\/h2><\/div><div class=\"fusion-text fusion-text-6\" style=\"--awb-text-transform:none;\"><p>C'est une m\u00e9trique compos\u00e9e de deux \u00e9l\u00e9ments :<\/p>\n<\/div><ul style=\"--awb-line-height:27.2px;--awb-icon-width:27.2px;--awb-icon-height:27.2px;--awb-icon-margin:11.2px;--awb-content-margin:38.4px;\" class=\"fusion-checklist fusion-checklist-2 fusion-checklist-default type-icons paddingList dark-text\"><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-no\"><i class=\"fusion-li-icon awb-icon-check\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">\n<p>Surface = la surface de l'\u00e9cran impact\u00e9e par le d\u00e9calage<\/p>\n<\/div><\/li><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-no\"><i class=\"fusion-li-icon awb-icon-check\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">\n<p>Distance = le d\u00e9calage des \u00e9l\u00e9ments concern\u00e9s, leur distance parcourue sur l'\u00e9cran<\/p>\n<\/div><\/li><\/ul><div class=\"fusion-text fusion-text-7\" style=\"--awb-text-transform:none;\"><p>Dans l'exemple : l'\u00e9l\u00e9ment principal couvre 50% de l'\u00e9cran et se d\u00e9place de 25%, il a donc exploit\u00e9 75% de l'\u00e9cran au total.<\/p>\n<p>Le CLS est donc : Surface x Distance = 0,75 * 0,25 = 0,1875<\/p>\n<p>On est donc dans le seuil d'Am\u00e9lioration n\u00e9cessaire pour que la page concern\u00e9e soit consid\u00e9r\u00e9e comme d\u00e9pourvue de CLS<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\"fusion-imageframe imageframe-none imageframe-2 hover-type-none\"><img decoding=\"async\" width=\"512\" height=\"104\" alt=\"Plus simplement, les outils de webperformance de Google permettent de relever le Cumulative Layout Shift d\u2019une page donn\u00e9e : PageSpeed Insights (site tiers) et Lighthouse (module du navigateur Google Chrome).\" title=\"CLS-2\" src=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-2.jpeg\" data-orig-src=\"https:\/\/www.artefact.com\/wp-content\/uploads\/2022\/06\/CLS-2.jpeg\" class=\"lazyload img-responsive wp-image-67576\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27512%27%20height%3D%27104%27%20viewBox%3D%270%200%20512%20104%27%3E%3Crect%20width%3D%27512%27%20height%3D%27104%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-2-200x41.jpeg 200w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-2-400x81.jpeg 400w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-2.jpeg 512w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 512px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-8\" style=\"--awb-text-transform:none;\"><p>Plus simplement, les outils de webperformance de Google permettent de relever le CLS d'une page donn\u00e9e : PageSpeed Insights (site tiers) et Lighthouse (module du navigateur Google Chrome). La meilleure source de donn\u00e9es reste naturellement celle qui remonte les donn\u00e9es r\u00e9elles d'utilisateurs, \u00e0 savoir la Search Console. Dans le rapport des Signaux Web Essentiels, il est relev\u00e9 le nombre de pages consid\u00e9r\u00e9es comme Lentes ou n\u00e9cessitant une am\u00e9lioration, et chaque KPI dispose de son rapport.<\/p>\n<p>On identifie donc facilement les pages les plus affect\u00e9es, regroup\u00e9es par pages similaires (gabarit \/ template).<\/p>\n<\/div><div class=\"fusion-title title fusion-title-5 fusion-sep-none fusion-title-text fusion-title-size-two\" style=\"--awb-margin-bottom-small:8px;\"><h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;--fontSize:50;line-height:1.2;\">Comment am\u00e9liorer le CLS ?<\/h2><\/div><div class=\"fusion-text fusion-text-9\" style=\"--awb-text-transform:none;\"><p>Bonne nouvelle, en plus de nous donner le maximum de donn\u00e9es de mesure, <a href=\"https:\/\/web.dev\/optimize-cls\/\" target=\"_blank\" rel=\"noopener\">Google nous guide<\/a> pour r\u00e9soudre d'\u00e9ventuels probl\u00e8mes d'instabilit\u00e9 visuelle.<br \/>\nPlusieurs sc\u00e9narios courants sont abord\u00e9s :<\/p>\n<\/div><ul style=\"--awb-line-height:27.2px;--awb-icon-width:27.2px;--awb-icon-height:27.2px;--awb-icon-margin:11.2px;--awb-content-margin:38.4px;\" class=\"fusion-checklist fusion-checklist-3 fusion-checklist-default type-icons paddingList dark-text\"><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-no\"><i class=\"fusion-li-icon awb-icon-check\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">\n<p>Images ou publicit\u00e9s sans dimensions d\u00e9finies<\/p>\n<\/div><\/li><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-no\"><i class=\"fusion-li-icon awb-icon-check\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">\n<p>Contenu inject\u00e9 dynamiquement (pop-ins)<\/p>\n<\/div><\/li><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-no\"><i class=\"fusion-li-icon awb-icon-check\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">\n<p>Chargement des polices<\/p>\n<\/div><\/li><\/ul><div class=\"fusion-text fusion-text-10\" style=\"--awb-text-transform:none;\"><p>Le cas des images se chargeant apr\u00e8s la structure de la page est courant sur tout type de site, notamment en e-commerce (fiches ou listes de produits).<\/p>\n<p>Dans l'exemple suivant, le nom des produits se charge en premier puis viennent les images des produits. Elles d\u00e9calent les noms d\u00e9j\u00e0 charg\u00e9s, rendant la page instable pendant son chargement.<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\"fusion-imageframe imageframe-none imageframe-3 hover-type-none\"><img decoding=\"async\" width=\"475\" height=\"326\" alt=\"Cumulative Layout Shift \" title=\"CLS-3\" src=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-3.png\" data-orig-src=\"https:\/\/www.artefact.com\/wp-content\/uploads\/2022\/06\/CLS-3.png\" class=\"lazyload img-responsive wp-image-67577\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27475%27%20height%3D%27326%27%20viewBox%3D%270%200%20475%20326%27%3E%3Crect%20width%3D%27475%27%20height%3D%27326%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-3-200x137.png 200w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-3-400x275.png 400w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-3.png 475w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 475px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-11\" style=\"--awb-text-transform:none;\"><p>Il est possible d'emp\u00eacher ce comportement en d\u00e9finissant des zones r\u00e9serv\u00e9es pour ces images, avant m\u00eame leur chargement.<\/p>\n<p>Une des m\u00e9thodes possibles est de d\u00e9clarer les dimensions des images, les navigateurs sauront ensuite leur r\u00e9server un espace en calculant le ratio entre largeur et hauteur (aspect-ratio).<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\"fusion-imageframe imageframe-none imageframe-4 hover-type-none\"><img decoding=\"async\" width=\"512\" height=\"328\" alt=\"Cumulative Layout Shift\" title=\"CLS-4\" src=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-4.png\" data-orig-src=\"https:\/\/www.artefact.com\/wp-content\/uploads\/2022\/06\/CLS-4.png\" class=\"lazyload img-responsive wp-image-67578\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27512%27%20height%3D%27328%27%20viewBox%3D%270%200%20512%20328%27%3E%3Crect%20width%3D%27512%27%20height%3D%27328%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-4-200x128.png 200w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-4-400x256.png 400w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-4.png 512w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 512px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-12\" style=\"--awb-text-transform:none;\"><p>Il est aussi possible de d\u00e9clarer directement un aspect-ratio dans le CSS pour l'appliquer \u00e0 une cat\u00e9gorie d'images similaires.<\/p>\n<\/div><div class=\"fusion-image-element\" style=\"--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\"fusion-imageframe imageframe-none imageframe-5 hover-type-none\"><img decoding=\"async\" width=\"512\" height=\"159\" alt=\"Comment am\u00e9liorer le CLS - Cumulative Layout Shift ?\" title=\"CLS-5\" src=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-5.png\" data-orig-src=\"https:\/\/www.artefact.com\/wp-content\/uploads\/2022\/06\/CLS-5.png\" class=\"lazyload img-responsive wp-image-67579\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27512%27%20height%3D%27159%27%20viewBox%3D%270%200%20512%20159%27%3E%3Crect%20width%3D%27512%27%20height%3D%27159%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-5-200x62.png 200w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-5-400x124.png 400w, https:\/\/www.artefact.com\/\/wp-content\/uploads\/2022\/06\/CLS-5.png 512w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 640px) 100vw, 512px\" \/><\/span><\/div><div class=\"fusion-text fusion-text-13\" style=\"--awb-text-transform:none;\"><p>Notons que cette am\u00e9lioration a nettement am\u00e9lior\u00e9 les scores du site web concern\u00e9 lors de sa mise en production : d'un CLS de 0.178 on est pass\u00e9 \u00e0 0.002. Et de 26% des visiteurs affect\u00e9s par une instabilit\u00e9 visuelle du site, on est pass\u00e9 \u00e0 1,27% (donn\u00e9es provenant de la Search Console, remontant les performances constat\u00e9es par les utilisateurs du site).<\/p>\n<\/div><\/div><\/div><\/div><\/article><\/p>","protected":false},"excerpt":{"rendered":"<p>Int\u00e9ressons-nous aujourd'hui au Cumulative Layout Shift.<\/p>","protected":false},"featured_media":67575,"parent":0,"template":"","meta":{"_acf_changed":false,"ep_exclude_from_search":false},"blog-category":[],"blog-language":[],"class_list":["post-67574","blog","type-blog","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.artefact.com\/fr\/wp-json\/wp\/v2\/blog\/67574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.artefact.com\/fr\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.artefact.com\/fr\/wp-json\/wp\/v2\/types\/blog"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.artefact.com\/fr\/wp-json\/wp\/v2\/media\/67575"}],"wp:attachment":[{"href":"https:\/\/www.artefact.com\/fr\/wp-json\/wp\/v2\/media?parent=67574"}],"wp:term":[{"taxonomy":"blog-category","embeddable":true,"href":"https:\/\/www.artefact.com\/fr\/wp-json\/wp\/v2\/blog-category?post=67574"},{"taxonomy":"blog-language","embeddable":true,"href":"https:\/\/www.artefact.com\/fr\/wp-json\/wp\/v2\/blog-language?post=67574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}