{"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\/br\/blog\/comment-ameliorer-le-cls-cumulative-layout-shift\/","title":{"rendered":"Como melhorar o 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;\">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>Respons\u00e1vel pela \u00e1rea de 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>J\u00e1 faz um ano que o Google leva em conta a experi\u00eancia do usu\u00e1rio como fator de posicionamento em seus resultados de pesquisa. Os KPIs de desempenho da Web, que s\u00e3o os Core Web Vitals, s\u00e3o atualmente acompanhados de perto pelos respons\u00e1veis por SEO. O senhor deseja saber mais sobre a mudan\u00e7a cumulativa de layout.<\/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\/br\/news-seo\/la-vitesse-et-lux-impactent-elles-le-seo\/\">Principais dados vitais da Web<\/a> (Signaux Web Essentiels em franc\u00eas) avaliam o desempenho do carregamento de uma p\u00e1gina da Web para um 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\">Qual \u00e9 o prazo antes do primeiro 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\">Qual \u00e9 a reatividade da p\u00e1gina a uma intera\u00e7\u00e3o (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\">Qual \u00e9 a estabilidade visual durante o carregamento (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;\">O que \u00e9 a mudan\u00e7a cumulativa de layout?<\/h2><\/div><div class=\"fusion-text fusion-text-4\" style=\"--awb-text-transform:none;\"><p>O CLS (Cumulative Layout Shift) mede, portanto, a estabilidade visual de uma p\u00e1gina. O exemplo mais not\u00e1vel \u00e9 o de um site de m\u00eddia, por natureza denso em conte\u00fado publicit\u00e1rio. Aparecem o t\u00edtulo e o in\u00edcio de um artigo, o internauta se apressa em fazer o delineamento, mas no momento em que clica, aparece um banner publicit\u00e1rio. O internauta \u00e9, portanto, direcionado a um site que n\u00e3o deseja, e deve se adiantar para voltar ao seu artigo e ficar atento para n\u00e3o clicar novamente na bandeira surpresa.<\/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>Otimizar a mudan\u00e7a cumulativa de layout - Google - <a href=\"https:\/\/web.dev\/optimize-cls\/\" target=\"_blank\" rel=\"noopener\">https:\/\/web.dev\/optimize-cls\/<\/a><\/em><\/p>\n<p>Como a situa\u00e7\u00e3o \u00e9 atual nos sites modernos da Web, \u00e9 coerente que o Google tenha criado um indicador de medi\u00e7\u00e3o para incentivar os editores de sites a aprimor\u00e1-lo.<\/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;\">Como o senhor pode medir?<\/h2><\/div><div class=\"fusion-text fusion-text-6\" style=\"--awb-text-transform:none;\"><p>Trata-se de uma m\u00e9trica composta por dois elementos:<\/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 = a superf\u00edcie da tela afetada pela redu\u00e7\u00e3o<\/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>Por exemplo: o elemento principal cobre 50% da tela e se desloca de 25%, explorando um total de 75% da tela.<\/p>\n<p>O CLS \u00e9, portanto: Superf\u00edcie x Dist\u00e2ncia = 0,75 * 0,25 = 0,1875<\/p>\n<p>Estamos, portanto, no 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>De forma mais simples, os utilit\u00e1rios de desempenho da Web do Google permitem que o CLS de uma p\u00e1gina seja divulgado: PageSpeed Insights (camadas do site) e Lighthouse (m\u00f3dulo do navegador Google Chrome). A melhor fonte de dados continua sendo naturalmente aquela que remete aos dados reais dos usu\u00e1rios, ou seja, o Search Console. No relat\u00f3rio dos Signaux Web Essentiels, \u00e9 relevante o n\u00famero de p\u00e1ginas consideradas como Lentes ou que precisam de aprimoramento, e cada KPI disp\u00f5e de seu relat\u00f3rio.<\/p>\n<p>O senhor pode identificar facilmente as p\u00e1ginas mais afetadas, reagrupadas por p\u00e1ginas semelhantes (gabarito \/ modelo).<\/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;\">Como melhorar o CLS?<\/h2><\/div><div class=\"fusion-text fusion-text-9\" style=\"--awb-text-transform:none;\"><p>Boa novidade, al\u00e9m de nos dar o m\u00e1ximo de dados de medi\u00e7\u00e3o, <a href=\"https:\/\/web.dev\/optimize-cls\/\" target=\"_blank\" rel=\"noopener\">Google nous guide<\/a> para solucionar eventuais problemas de instabilidade visual.<br \/>\nV\u00e1rios cen\u00e1rios atuais s\u00e3o abordados:<\/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>Imagens ou publica\u00e7\u00f5es sem dimens\u00f5es 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>Conte\u00fado injetado dinamicamente (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>Cobran\u00e7a de pol\u00edticas<\/p>\n<\/div><\/li><\/ul><div class=\"fusion-text fusion-text-10\" style=\"--awb-text-transform:none;\"><p>O caso das imagens que s\u00e3o carregadas ap\u00f3s a estrutura da p\u00e1gina \u00e9 comum em qualquer tipo de site, principalmente no com\u00e9rcio eletr\u00f4nico (fichas ou listas de produtos).<\/p>\n<p>No exemplo a seguir, o nome dos produtos \u00e9 carregado em primeiro lugar e, em seguida, aparecem as imagens dos produtos. Elas diminuem os nomes que j\u00e1 foram carregados, tornando a p\u00e1gina inst\u00e1vel durante o carregamento.<\/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>\u00c9 poss\u00edvel evitar esse comportamento definindo as zonas reservadas para essas imagens, antes mesmo de carreg\u00e1-las.<\/p>\n<p>Um dos m\u00e9todos poss\u00edveis \u00e9 declarar as dimens\u00f5es das imagens e, em seguida, os navegadores podem reservar um espa\u00e7o calculando a propor\u00e7\u00e3o entre tamanho e altura (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>Tamb\u00e9m \u00e9 poss\u00edvel declarar diretamente um aspect-ratio no CSS para aplic\u00e1-lo a uma categoria de imagens semelhantes.<\/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>Observe que essa melhoria melhorou consideravelmente as pontua\u00e7\u00f5es do site em quest\u00e3o durante sua entrada em produ\u00e7\u00e3o: de um CLS de 0,178, passamos para 0,002. E de 26% de visitantes afetados por uma instabilidade visual do site, passamos a 1,27% (dados provenientes do Search Console, referentes aos desempenhos constatados pelos usu\u00e1rios do site).<\/p>\n<\/div><\/div><\/div><\/div><\/article><\/p>","protected":false},"excerpt":{"rendered":"<p>O senhor quer saber hoje sobre o 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\/br\/wp-json\/wp\/v2\/blog\/67574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.artefact.com\/br\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.artefact.com\/br\/wp-json\/wp\/v2\/types\/blog"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.artefact.com\/br\/wp-json\/wp\/v2\/media\/67575"}],"wp:attachment":[{"href":"https:\/\/www.artefact.com\/br\/wp-json\/wp\/v2\/media?parent=67574"}],"wp:term":[{"taxonomy":"blog-category","embeddable":true,"href":"https:\/\/www.artefact.com\/br\/wp-json\/wp\/v2\/blog-category?post=67574"},{"taxonomy":"blog-language","embeddable":true,"href":"https:\/\/www.artefact.com\/br\/wp-json\/wp\/v2\/blog-language?post=67574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}