{"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\/es\/blog\/comment-ameliorer-le-cls-cumulative-layout-shift\/","title":{"rendered":"\u00bfC\u00f3mo mejorar el CLS - Desplazamiento de dise\u00f1o acumulativo?"},"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;\">Autor<\/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 del \u00e1rea 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>Hace ya 1 a\u00f1o que Google tiene en cuenta la experiencia del usuario como factor de posicionamiento en sus resultados de b\u00fasqueda. Los KPI de rendimiento web que son los Core Web Vitals son seguidos desde hace tiempo por los 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\/es\/news-seo\/la-vitesse-et-lux-impactent-elles-le-seo\/\">Core Web Vitals<\/a> (Signaux Web Essentiels en fran\u00e7ais) eval\u00faan el rendimiento de la carga de una p\u00e1gina web para un internauta :<\/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\">\u00bfQu\u00e9 plazo hay antes del primer elemento visual (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\">\u00bfC\u00f3mo reacciona la p\u00e1gina a una interacci\u00f3n (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;\">\u00bfQu\u00e9 es el desplazamiento de disposici\u00f3n acumulativo?<\/h2><\/div><div class=\"fusion-text fusion-text-4\" style=\"--awb-text-transform:none;\"><p>El CLS (Cumulative Layout Shift) mide as\u00ed la estabilidad visual de una p\u00e1gina. 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>Optimizar el desplazamiento de dise\u00f1o acumulativo - Google - <a href=\"https:\/\/web.dev\/optimize-cls\/\" target=\"_blank\" rel=\"noopener\">https:\/\/web.dev\/optimize-cls\/<\/a><\/em><\/p>\n<p>La situaci\u00f3n es actual en los sitios web modernos, por lo que Google ha lanzado un indicador de medici\u00f3n para animar a los editores de sitios web a mejorarlo.<\/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;\">\u00bfC\u00f3mo medirlo?<\/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>Superficie = la superficie de la pantalla afectada por el recorte<\/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>Distancia = la distancia de los elementos afectados, su distancia parcourue sobre el \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 : Superficie x Distancia = 0,75 * 0,25 = 0,1875<\/p>\n<p>Por tanto, se trata de una mejora necesaria para que la p\u00e1gina en cuesti\u00f3n se considere deficitaria 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>M\u00e1s sencillamente, las herramientas de rendimiento web de Google permiten conocer el CLS de una p\u00e1gina dada : PageSpeed Insights (a nivel de sitio) y Lighthouse (m\u00f3dulo del navegador Google Chrome). La mejor fuente de datos sigue siendo, por naturaleza, la que recoge los datos reales de los usuarios, por ejemplo, Search Console. En el informe de Signaux Web Essentiels, se releva el n\u00famero de p\u00e1ginas consideradas como Lentes o que necesitan una mejora, y cada KPI dispone de su informe.<\/p>\n<p>As\u00ed se identifican f\u00e1cilmente las p\u00e1ginas m\u00e1s afectadas, reagrupadas por p\u00e1ginas similares (gabarit \/ plantilla).<\/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;\">\u00bfC\u00f3mo mejorar el 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> para resolver posibles problemas de inestabilidad visual.<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>Im\u00e1genes o anuncios sin dimensiones definidas<\/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>Carga de las p\u00f3lizas<\/p>\n<\/div><\/li><\/ul><div class=\"fusion-text fusion-text-10\" style=\"--awb-text-transform:none;\"><p>El caso de las im\u00e1genes que se cargan despu\u00e9s de la estructura de la p\u00e1gina es frecuente en todo tipo de sitios, sobre todo en el comercio electr\u00f3nico (fichas o listas de productos).<\/p>\n<p>En el siguiente ejemplo, el nombre de los productos se carga en primer lugar y a continuaci\u00f3n aparecen las im\u00e1genes de los productos. \u00c9stas eliminan los nombres ya cargados, haciendo que la p\u00e1gina sea inestable durante su carga.<\/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>Es posible evitar este comportamiento definiendo zonas reservadas para las im\u00e1genes antes de cargarlas.<\/p>\n<p>Uno de los m\u00e9todos posibles consiste en determinar las dimensiones de las im\u00e1genes, para que los navegadores les devuelvan un espacio calculando la relaci\u00f3n entre tama\u00f1o y altura (relaci\u00f3n de aspecto).<\/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>Tambi\u00e9n es posible definir directamente una relaci\u00f3n de aspecto en el CSS para aplicarla a una categor\u00eda de im\u00e1genes similares.<\/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. Y de 26% de visitantes afectados por una inestabilidad visual del sitio, se ha pasado a 1,27% (datos procedentes de la Search Console, restando los rendimientos constatados por los usuarios del sitio).<\/p>\n<\/div><\/div><\/div><\/div><\/article><\/p>","protected":false},"excerpt":{"rendered":"<p>Int\u00e9ressons-nous aujourd'hui au Desplazamiento de la disposici\u00f3n acumulativa.<\/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\/es\/wp-json\/wp\/v2\/blog\/67574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.artefact.com\/es\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.artefact.com\/es\/wp-json\/wp\/v2\/types\/blog"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.artefact.com\/es\/wp-json\/wp\/v2\/media\/67575"}],"wp:attachment":[{"href":"https:\/\/www.artefact.com\/es\/wp-json\/wp\/v2\/media?parent=67574"}],"wp:term":[{"taxonomy":"blog-category","embeddable":true,"href":"https:\/\/www.artefact.com\/es\/wp-json\/wp\/v2\/blog-category?post=67574"},{"taxonomy":"blog-language","embeddable":true,"href":"https:\/\/www.artefact.com\/es\/wp-json\/wp\/v2\/blog-language?post=67574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}