{"id":27671,"date":"2022-05-23T19:45:52","date_gmt":"2022-05-23T22:45:52","guid":{"rendered":"\/tutoriais\/?p=27671"},"modified":"2026-03-10T13:00:56","modified_gmt":"2026-03-10T16:00:56","slug":"cumulative-layout-shift","status":"publish","type":"post","link":"\/pt\/tutoriais\/cumulative-layout-shift","title":{"rendered":"Cumulative layout shift (CLS): o que \u00e9 e como melhor\u00e1-lo"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p><strong>Cumulative Layout Shift (CLS)<\/strong>&nbsp;&eacute; uma m&eacute;trica que avalia a experi&ecirc;ncia do usu&aacute;rio medindo o quanto as p&aacute;ginas do seu site mudam inesperadamente.<\/p><p>Embora existam v&aacute;rios elementos do site que afetam a experi&ecirc;ncia do usu&aacute;rio, uma pontua&ccedil;&atilde;o baixa no CLS tamb&eacute;m afeta a otimiza&ccedil;&atilde;o do mecanismo de pesquisa (SEO) do seu site.&nbsp;Portanto, entender o que &eacute; o CLS e como obter uma boa pontua&ccedil;&atilde;o no CLS ajuda a melhorar o desempenho geral do seu site.<\/p><p>Neste artigo, discutiremos as diferentes maneiras de medir uma pontua&ccedil;&atilde;o CLS.&nbsp;Tamb&eacute;m explicaremos quais elementos o influenciam e responderemos a algumas perguntas frequentes sobre o CLS no final deste artigo.<\/p><p>Vamos come&ccedil;ar respondendo a pergunta principal: o que &eacute; CLS?<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Speed-Up-Your-Website-BR.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/eBook_-Speed-Up-your-website-BR-1024x283.png\" alt=\"\" class=\"wp-image-30339\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/eBook_-Speed-Up-your-website-BR.png 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/eBook_-Speed-Up-your-website-BR-300x83.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/eBook_-Speed-Up-your-website-BR-150x41.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/eBook_-Speed-Up-your-website-BR-768x212.png 768w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/12\/eBook_-Speed-Up-your-website-BR-1536x425.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>\n\n\n\n\n<\/p><p><\/p><p><div class=\"protip\">\n                    <h2 class=\"featured-snippet title\">O que &eacute; Cumulative Layout Shift (CLS)?<\/h2>\n                    <p>O Cumulative Layout Shift mede a estabilidade visual das p&aacute;ginas da Web, calculando a quantidade total de mudan&ccedil;as de layout inesperadas em uma p&aacute;gina da Web. Uma mudan&ccedil;a de layout acontece quando um elemento vis&iacute;vel muda de posi&ccedil;&atilde;o ou tamanho, movendo o conte&uacute;do ao seu redor.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-impacto-da-pontuacao-de-cumulative-layout-shift-no-seo\"><strong>Impacto da pontua&ccedil;&atilde;o de Cumulative Layout Shift no SEO<\/strong><\/h2><p>A Cumulative Layout Shift &eacute; um&nbsp;<a href=\"https:\/\/developers.google.com\/search\/blog\/2020\/05\/evaluating-page-experience\" target=\"_blank\" rel=\"noopener\"><strong>fator de classifica&ccedil;&atilde;o no Google<\/strong><\/a>, pois afeta o desempenho do site e a experi&ecirc;ncia do usu&aacute;rio.&nbsp;&Eacute; uma das m&eacute;tricas do&nbsp;<a href=\"\/pt\/tutoriais\/core-web-vitals\"><strong>Core Web Vitals<\/strong><\/a>, e o Google pode penalizar um site que n&atilde;o atenda ao seu padr&atilde;o.<\/p><p>Uma pontua&ccedil;&atilde;o baixa no CLS indica que um site n&atilde;o &eacute; confi&aacute;vel, o que pode fazer com que os visitantes saiam mais rapidamente.&nbsp;Portanto,&nbsp;<a href=\"\/pt\/tutoriais\/otimizacao-de-sites\"><strong>otimizar seu site<\/strong><\/a>&nbsp;para uma pontua&ccedil;&atilde;o CLS alta &eacute; um componente essencial de uma&nbsp;<a href=\"\/pt\/tutoriais\/30-tecnicas-de-seo-para-wordpress\"><strong>estrat&eacute;gia de SEO bem-sucedida<\/strong><\/a>.<\/p><h2 class=\"wp-block-heading\" id=\"h-o-que-e-uma-boa-pontuacao-cls\"><strong>O que &eacute; uma boa pontua&ccedil;&atilde;o CLS?<\/strong><\/h2><p>Uma pontua&ccedil;&atilde;o CLS alta indica um n&uacute;mero consider&aacute;vel de mudan&ccedil;as inesperadas de layout em uma p&aacute;gina da web.&nbsp;Por outro lado, uma p&aacute;gina totalmente est&aacute;tica pode ter uma pontua&ccedil;&atilde;o t&atilde;o baixa quanto&nbsp;<strong>zero<\/strong>.<\/p><p>O Google estabeleceu um padr&atilde;o para todas as m&eacute;tricas do Core Web Vitals para ajudar os propriet&aacute;rios de sites a medirem e melhorar suas pontua&ccedil;&otilde;es de CLS:<\/p><ul class=\"wp-block-list\">\n<li><strong>Bom<\/strong>&nbsp;&ndash; abaixo de&nbsp;<strong>0,1<\/strong>&nbsp;&eacute; a pontua&ccedil;&atilde;o aceit&aacute;vel de acordo com o padr&atilde;o do Google.<\/li>\n\n\n\n<li><strong>Precisa melhorar<\/strong>&nbsp;&ndash; entre&nbsp;<strong>0,1 e 0,25<\/strong>&nbsp;indica que voc&ecirc; precisa fazer altera&ccedil;&otilde;es para reduzir mudan&ccedil;as inesperadas.<\/li>\n\n\n\n<li><strong>Fraco<\/strong>&nbsp;&ndash; acima de&nbsp;<strong>0,25<\/strong>&nbsp;pode prejudicar a classifica&ccedil;&atilde;o do seu site.<\/li>\n<\/ul><p>Um site pode ter pontua&ccedil;&otilde;es CLS diferentes para diferentes p&aacute;ginas e telas da web.&nbsp;As mudan&ccedil;as de layout em telas de dispositivos m&oacute;veis t&ecirc;m um impacto mais significativo nas experi&ecirc;ncias dos usu&aacute;rios de dispositivos m&oacute;veis.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"894\" height=\"317\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2022\/05\/image-4.png\" alt=\"valores aceit&aacute;veis e inaceit&aacute;veis de cumulative layout shift\" class=\"wp-image-27672\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/image-4.png 894w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/image-4-300x106.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/image-4-150x53.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/image-4-768x272.png 768w\" sizes=\"(max-width: 894px) 100vw, 894px\" \/><\/figure><\/div><p><span style=\"font-weight: 400\"><div class=\"protip\">\n                    <h4 class=\"title\">Leia Mais Sobre Core Web Vitals<\/h4>\n                    <p>O que &eacute; First Input Delay e Como Melhor&aacute;-lo<br><\/p>\n                <\/div><\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-como-medir-sua-pontuacao-de-cumulative-layout-shift\"><strong>Como medir sua pontua&ccedil;&atilde;o de Cumulative Layout Shift<\/strong><\/h2><p>Aqui est&atilde;o dois m&eacute;todos populares para fazer um teste de cumulative layout shift:<\/p><ul class=\"wp-block-list\">\n<li><strong>Em laborat&oacute;rio<\/strong>&nbsp;&ndash; simule a experi&ecirc;ncia do usu&aacute;rio em um ambiente controlado.<\/li>\n\n\n\n<li><strong>Em campo<\/strong>&nbsp;&ndash; com base em intera&ccedil;&otilde;es reais do usu&aacute;rio.<\/li>\n<\/ul><p>N&atilde;o h&aacute; um m&eacute;todo melhor que outro. Inclusive, voc&ecirc; pode usar ambos para ter dados mais confi&aacute;veis &#8203;&#8203;sobre o desempenho do seu site.&nbsp;Para ajudar a medir o CLS do seu site, o Google tem v&aacute;rias ferramentas dispon&iacute;veis&nbsp;<strong>gratuitamente<\/strong>.<\/p><h3 class=\"wp-block-heading\"><strong>Op&ccedil;&atilde;o 1. Medindo CLS no Laborat&oacute;rio<\/strong><\/h3><p>Ao medir o CLS no laborat&oacute;rio, o resultado leva em conta uma pequena gama de situa&ccedil;&otilde;es poss&iacute;veis.&nbsp;A maioria das ferramentas de desenvolvedor de navegador oferece uma maneira de calcular a pontua&ccedil;&atilde;o CLS de uma p&aacute;gina da Web, geralmente exibindo uma sobreposi&ccedil;&atilde;o de ret&acirc;ngulo mostrando as regi&otilde;es afetadas.<\/p><p>Aqui est&atilde;o as etapas para medir o CLS usando&nbsp;<strong>as Ferramentas do desenvolvedor do Google Chrome<\/strong>&nbsp;:<\/p><ol class=\"wp-block-list\">\n<li>Clique no menu do seu navegador e v&aacute; para&nbsp;<strong>Mais ferramentas<\/strong>&nbsp;-&gt;&nbsp;<strong>Ferramentas do desenvolvedor<\/strong>.&nbsp;Outra op&ccedil;&atilde;o &eacute; pressionar&nbsp;<strong>Ctrl + Shift + I<\/strong>&nbsp;e selecionar o&nbsp;painel&nbsp;<strong>Performance.<\/strong><br><img decoding=\"async\" width=\"506\" height=\"206\" class=\"wp-image-27673\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2022\/05\/console-google-chrome-performance.jpg\" alt=\"console do google chrome com a aba de performance em destaque\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/console-google-chrome-performance.jpg 506w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/console-google-chrome-performance-300x122.jpg 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/console-google-chrome-performance-150x61.jpg 150w\" sizes=\"(max-width: 506px) 100vw, 506px\" \/><\/li>\n\n\n\n<li>Marque a op&ccedil;&atilde;o&nbsp;<strong>Web Vitals<\/strong>&nbsp;e clique no&nbsp;<strong>bot&atilde;o recarregar<\/strong>&nbsp;ou pressione&nbsp;<strong>Ctrl + Shift + E<\/strong>&nbsp;para gravar o carregamento da p&aacute;gina.<br><img decoding=\"async\" width=\"774\" height=\"347\" class=\"wp-image-27674\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2022\/05\/botao-recarregar-performance.jpg\" alt=\"console do chrome com o bot&atilde;o de recarregar em destaque\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/botao-recarregar-performance.jpg 774w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/botao-recarregar-performance-300x134.jpg 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/botao-recarregar-performance-150x67.jpg 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/botao-recarregar-performance-768x344.jpg 768w\" sizes=\"(max-width: 774px) 100vw, 774px\" \/><\/li>\n\n\n\n<li>Aguarde o resultado e clique na&nbsp;guia&nbsp;<strong>Mudan&ccedil;a de layout <\/strong>ao lado de<strong>&nbsp;Experi&ecirc;ncia.<\/strong>&nbsp;A ferramenta mostrar&aacute; a&nbsp;<strong>Pontua&ccedil;&atilde;o cumulativa<\/strong>&nbsp;em&nbsp;<strong>Resumo<\/strong>.<br><img decoding=\"async\" width=\"679\" height=\"385\" class=\"wp-image-27675\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2022\/05\/layout-shift-experience.jpg\" alt=\"resultado do shift de layout na experi&ecirc;ncia de usu&aacute;rio\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/layout-shift-experience.jpg 679w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/layout-shift-experience-300x170.jpg 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/layout-shift-experience-150x85.jpg 150w\" sizes=\"(max-width: 679px) 100vw, 679px\" \/><\/li>\n<\/ol><p>Observe que pode haver v&aacute;rias guias de&nbsp;<strong>Mudan&ccedil;a de layout<\/strong>&nbsp;que fornecem pontua&ccedil;&otilde;es diferentes devido a v&aacute;rios elementos visuais que mostram altera&ccedil;&otilde;es de layout.&nbsp;Clique em cada guia para ver qual elemento est&aacute; causando o problema em sua p&aacute;gina da web.<\/p><p>Outras ferramentas que ajudam a medir o CLS em um ambiente controlado incluem o&nbsp;<a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\" target=\"_blank\" rel=\"noopener\"><strong>Lighthouse<\/strong><\/a>&nbsp;e a&nbsp;<a href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-vitals\/ahfhijdlegdabablpippeagghigmibma\" target=\"_blank\" rel=\"noopener\"><strong>extens&atilde;o Chrome Web Vitals<\/strong><\/a>.<\/p><h3 class=\"wp-block-heading\"><strong>Op&ccedil;&atilde;o 2. Medindo o CLS no Campo (Dados reais do Usu&aacute;rio)<\/strong><\/h3><p>O outro m&eacute;todo mede as intera&ccedil;&otilde;es reais do usu&aacute;rio usando o&nbsp;<a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\" target=\"_blank\" rel=\"noopener\"><strong>Relat&oacute;rio de experi&ecirc;ncia do usu&aacute;rio do Chrome (CrUX)<\/strong><\/a>&nbsp;como a principal fonte de dados. Isso ajuda a analisar o desempenho geral do seu site.<\/p><p>Uma ferramenta popular para ajudar a medir dados reais dos seus usu&aacute;rios &eacute; o&nbsp;<a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>PageSpeed &#8203;&#8203;Insights<\/strong><\/a>.&nbsp;Aqui est&atilde;o as etapas para usar o PageSpeed &#8203;&#8203;Insights para calcular a pontua&ccedil;&atilde;o CLS de uma p&aacute;gina da web:<\/p><ol class=\"wp-block-list\">\n<li><strong>Insira um URL de p&aacute;gina da web<\/strong>&nbsp;e clique no bot&atilde;o&nbsp;<strong>Analisar<\/strong>&nbsp;para testar seu desempenho.<\/li>\n\n\n\n<li>O PageSpeed &#8203;&#8203;Insights mostrar&aacute; a avalia&ccedil;&atilde;o geral do&nbsp;<strong>Core Web Vitals<\/strong>&nbsp;e se a p&aacute;gina da web atende ao padr&atilde;o do Google.&nbsp;A ferramenta mostrar&aacute; primeiro o resultado para dispositivos&nbsp;<strong>m&oacute;veis<\/strong>.<br><img decoding=\"async\" width=\"930\" height=\"559\" class=\"wp-image-27676\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2022\/05\/google-page-speed-insights.jpg\" alt=\"resultados do google pagespeed insights para dispositivos m&oacute;veis\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/google-page-speed-insights.jpg 930w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/google-page-speed-insights-300x180.jpg 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/google-page-speed-insights-150x90.jpg 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/google-page-speed-insights-768x462.jpg 768w\" sizes=\"(max-width: 930px) 100vw, 930px\" \/><\/li>\n\n\n\n<li>Clique em&nbsp;<strong>Desktop<\/strong>&nbsp;para encontrar a pontua&ccedil;&atilde;o CLS para dispositivos desktop.&nbsp;Observe como a pontua&ccedil;&atilde;o pode ser diferente em telas distintas.<br><img decoding=\"async\" width=\"928\" height=\"547\" class=\"wp-image-27677\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2022\/05\/google-page-speed-insights-desktop.jpg\" alt=\"resultado do google pagespeed insights para desktop\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/google-page-speed-insights-desktop.jpg 928w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/google-page-speed-insights-desktop-300x177.jpg 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/google-page-speed-insights-desktop-150x88.jpg 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/google-page-speed-insights-desktop-768x453.jpg 768w\" sizes=\"(max-width: 928px) 100vw, 928px\" \/><\/li>\n\n\n\n<li>Clique em&nbsp;<strong>Expandir visualiza&ccedil;&atilde;o<\/strong>&nbsp;para entender melhor a pontua&ccedil;&atilde;o.<br><img decoding=\"async\" width=\"470\" height=\"246\" class=\"wp-image-27678\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2022\/05\/cumulative-layout-shift.jpg\" alt=\"resultados detalhados do cumulative layout shift\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/cumulative-layout-shift.jpg 470w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/cumulative-layout-shift-300x157.jpg 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2022\/05\/cumulative-layout-shift-150x79.jpg 150w\" sizes=\"(max-width: 470px) 100vw, 470px\" \/><\/li>\n<\/ol><p>Outras ferramentas populares para ajudar a medir o CLS em campo s&atilde;o o&nbsp;<a href=\"https:\/\/console.cloud.google.com\/projectselector2\/bigquery\" target=\"_blank\" rel=\"noopener\"><strong>BigQuery<\/strong><\/a>&nbsp;e o&nbsp;<a href=\"https:\/\/marketingplatform.google.com\/about\/data-studio\/\" target=\"_blank\" rel=\"noopener\"><strong>Data Studio<\/strong><\/a>.<\/p><h2 class=\"wp-block-heading\" id=\"h-entenda-e-calculada-como-a-pontuacao-do-cls\"><strong>Entenda <strong>&eacute; Calculada<\/strong> Como a Pontua&ccedil;&atilde;o do CLS<\/strong><\/h2><p>Compreender como calcular a pontua&ccedil;&atilde;o de Cumulative Layout Shift ajudar&aacute; a otimiz&aacute;-lo.&nbsp;As pontua&ccedil;&otilde;es do CLS medem dois elementos em uma mudan&ccedil;a inesperada de layout:<\/p><ul class=\"wp-block-list\">\n<li><strong>A fra&ccedil;&atilde;o de impacto<\/strong>&nbsp;&ndash; mede o efeito de um elemento inst&aacute;vel na viewport.<\/li>\n\n\n\n<li><strong>A fra&ccedil;&atilde;o de dist&acirc;ncia<\/strong>&nbsp;&ndash; mede a dist&acirc;ncia que o elemento se move na viewport.<\/li>\n<\/ul><p>O c&aacute;lculo para obter uma pontua&ccedil;&atilde;o CLS &eacute;:<\/p><p><strong>Pontua&ccedil;&atilde;o final do CLS = Fra&ccedil;&atilde;o de impacto x Fra&ccedil;&atilde;o de dist&acirc;ncia<\/strong><\/p><h3 class=\"wp-block-heading\"><strong>Fra&ccedil;&atilde;o de Impacto<\/strong><\/h3><p>A fra&ccedil;&atilde;o de impacto mede quanto espa&ccedil;o um elemento inst&aacute;vel ocupa na &aacute;rea da janela de visualiza&ccedil;&atilde;o.&nbsp;Quando elementos vis&iacute;veis mudam inesperadamente para outra &aacute;rea, a fra&ccedil;&atilde;o de impacto calcula a &aacute;rea total que a mudan&ccedil;a leva:<\/p><p><strong>Fra&ccedil;&atilde;o de impacto = regi&atilde;o de impacto \/ &aacute;rea de viewport<\/strong><\/p><p>Essa pontua&ccedil;&atilde;o demonstra como os elementos inst&aacute;veis &#8203;&#8203;afetam o desempenho geral do site.<\/p><h3 class=\"wp-block-heading\"><strong>Fra&ccedil;&atilde;o de dist&acirc;ncia<\/strong><\/h3><p>A fra&ccedil;&atilde;o de dist&acirc;ncia mede a maior dist&acirc;ncia que os elementos inst&aacute;veis &#8203;&#8203;se moveram durante mudan&ccedil;as inesperadas de layout.&nbsp;O c&aacute;lculo para obter a fra&ccedil;&atilde;o de dist&acirc;ncia &eacute;:<\/p><p><strong>Fra&ccedil;&atilde;o de dist&acirc;ncia = Dist&acirc;ncia m&aacute;xima de movimento \/ &Aacute;rea da janela de visualiza&ccedil;&atilde;o<\/strong><\/p><p>A pontua&ccedil;&atilde;o demonstra at&eacute; que ponto um elemento existente move outros elementos ao mudar inesperadamente.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-descobrir-qual-elemento-esta-causando-uma-pontuacao-de-cls-ruim\"><strong>Como Descobrir Qual Elemento Est&aacute; Causando uma Pontua&ccedil;&atilde;o de CLS Ruim<\/strong><\/h2><p>Se uma p&aacute;gina da Web tiver uma pontua&ccedil;&atilde;o CLS ruim, alguns elementos a serem observados s&atilde;o:<\/p><ul class=\"wp-block-list\">\n<li>An&uacute;ncios de banner, incorpora&ccedil;&otilde;es, iFrames, elementos de imagem e v&iacute;deo sem especifica&ccedil;&otilde;es de tamanho.<\/li>\n\n\n\n<li>Conte&uacute;do din&acirc;mico acima da janela de visualiza&ccedil;&atilde;o atual, sem espa&ccedil;o reservado para o tamanho da tela.<\/li>\n\n\n\n<li>Fontes personalizadas que alteram o comportamento de renderiza&ccedil;&atilde;o.<\/li>\n<\/ul><p>Essas a&ccedil;&otilde;es geralmente aguardam uma resposta da rede para carregar elementos, o que causa mudan&ccedil;as inesperadas de layout ainda maiores.<\/p><p>As ferramentas para medir a pontua&ccedil;&atilde;o CLS de uma p&aacute;gina da Web tamb&eacute;m podem apontar os elementos espec&iacute;ficos que podem causar um problema com as mudan&ccedil;as de layout.<\/p><p>Por exemplo, o painel&nbsp;<strong>Desempenho<\/strong>&nbsp;nas ferramentas de desenvolvedor de um navegador mostra os elementos inst&aacute;veis &#8203;&#8203;na&nbsp;guia&nbsp;<strong>Mudan&ccedil;a de layout.<\/strong> J&aacute; o&nbsp;<strong>Resumo <\/strong>tamb&eacute;m compartilha a<strong> Localiza&ccedil;&atilde;o<\/strong>&nbsp;e o&nbsp;<strong>Tamanho<\/strong>&nbsp;originais e novos de um elemento inst&aacute;vel.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-melhorar-sua-pontuacao-de-cumulative-layout-shift\"><strong>Como Melhorar sua Pontua&ccedil;&atilde;o de Cumulative Layout Shift<\/strong><\/h2><p>A pontua&ccedil;&atilde;o do CLS &eacute; um fator de ranqueamento em mecanismos de busca. Portanto, otimiz&aacute;-lo ajudar&aacute; a&nbsp;<a href=\"\/pt\/tutoriais\/como-gerar-trafego-para-sites\"><strong>direcionar mais tr&aacute;fego para seu site<\/strong><\/a>.<\/p><p>Aqui est&atilde;o quatro maneiras de melhorar sua pontua&ccedil;&atilde;o no CLS, juntamente com o n&iacute;vel de dificuldade e o impacto de cada m&eacute;todo.<\/p><h3 class=\"wp-block-heading\"><strong>1. Defina Dimens&otilde;es para Imagens e V&iacute;deos<\/strong><\/h3><p><strong>N&iacute;vel de dificuldade: F&aacute;cil<\/strong><\/p><p><strong>Impacto: Alto<\/strong><\/p><p>Todos os elementos de imagem e v&iacute;deo em uma p&aacute;gina da Web precisam de atributos de tamanho de largura e altura para evitar mudan&ccedil;as inesperadas.&nbsp;Um exemplo de como definir seus atributos de largura e altura &eacute; assim:<\/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=\"exemplo.jpg\" width=\"400\" height=\"400\" alt=\"Exemplo de uma imagem.\"&gt;<\/pre><p>No entanto, as imagens responsivas precisam usar a mesma propor&ccedil;&atilde;o para ajudar os navegadores a calcular a quantidade correta de espa&ccedil;o necess&aacute;rio para exibi-las.<\/p><p>O atributo&nbsp;<strong>srcset<\/strong>&nbsp;define um conjunto de tamanhos de imagem diferentes usando a mesma propor&ccedil;&atilde;o para ajudar os navegadores a fornecer imagens responsivas corretamente.&nbsp;Aqui est&aacute; um exemplo de como fica o c&oacute;digo quando usamos este atributo:<\/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=\"exemplo-1000.jpg\" srcset=\"exemplo-1000.jpg 1000w, exemplo-2000.jpg 2000w, exemplo-3000.jpg 3000w\" alt=\"Exemplo de uma imagem.\"&gt;<\/pre><p>A maioria dos navegadores modernos tamb&eacute;m pode definir a propor&ccedil;&atilde;o padr&atilde;o com base nos atributos de largura e altura da imagem ou do v&iacute;deo.&nbsp;Portanto, uma maneira de evitar mudan&ccedil;as de layout &eacute; usar caixas de propor&ccedil;&atilde;o de aspecto CSS como no exemplo abaixo:<\/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>Esse c&oacute;digo ajuda o navegador a prever as diferentes propor&ccedil;&otilde;es de aspecto seguindo as dimens&otilde;es da imagem ao carreg&aacute;-la.<\/p><h3 class=\"wp-block-heading\"><strong>2. Configure a Largura e a Altura dos Banners, das Incorpora&ccedil;&otilde;es e dos iFrames<\/strong><\/h3><p><strong>N&iacute;vel de dificuldade: M&eacute;dio<\/strong><\/p><p><strong>Impacto: Alto<\/strong><\/p><p>Reservar espa&ccedil;o para banners, incorpora&ccedil;&otilde;es e iFrames ajuda a evitar mudan&ccedil;as de layout.<\/p><p><strong>An&uacute;ncios<\/strong><\/p><p>An&uacute;ncios de banner que enviam conte&uacute;do vis&iacute;vel podem causar grandes mudan&ccedil;as de layout, o que leva a uma experi&ecirc;ncia de usu&aacute;rio abaixo do ideal.<\/p><p>As redes de an&uacute;ncios e os editores que oferecem suporte a propagandas de tamanhos din&acirc;micos devem reservar um espa&ccedil;o reservado com anteced&ecirc;ncia para evitar pontua&ccedil;&otilde;es de CLS ruins.<\/p><p>Estilize o elemento antes que a biblioteca de tags de an&uacute;ncio seja carregada para evitar que an&uacute;ncios de banner enviem conte&uacute;do vis&iacute;vel.<\/p><p>A aplica&ccedil;&atilde;o desse m&eacute;todo tamb&eacute;m &eacute; importante quando um an&uacute;ncio preenche uma linha ou coluna inteira de uma p&aacute;gina para evitar mudan&ccedil;as de layout, mesmo que o an&uacute;ncio n&atilde;o seja carregado.<\/p><p>Use o elemento slot para especificar o tamanho do an&uacute;ncio usando as&nbsp;propriedades CSS&nbsp;<strong>min-height<\/strong>&nbsp;e&nbsp;<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>Al&eacute;m disso, adicione consultas de m&iacute;dia CSS para especificar diferentes m&iacute;nimos ao usar diferentes tamanhos de tela:<\/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>Use seus dados hist&oacute;ricos para escolher o melhor tamanho para o local do an&uacute;ncio.&nbsp;Certifique-se de considerar v&aacute;rias formas para o an&uacute;ncio, assim como as diferen&ccedil;as sutis nos tamanhos das propagandas.<\/p><p>Esse m&eacute;todo tamb&eacute;m funciona quando voc&ecirc; insere an&uacute;ncios n&atilde;o fixos em uma p&aacute;gina da web.&nbsp;Ao adicionar o espa&ccedil;o necess&aacute;rio, os an&uacute;ncios n&atilde;o acionar&atilde;o mudan&ccedil;as de layout quando carregados fora da tela.<\/p><p><strong>Incorpora&ccedil;&otilde;es e iFrames<\/strong><\/p><p>As incorpora&ccedil;&otilde;es podem assumir v&aacute;rias formas, por isso &eacute; mais f&aacute;cil n&atilde;o ter certeza de seu tamanho em uma p&aacute;gina da web.&nbsp;Portanto, as plataformas nem sempre reservam o espa&ccedil;o necess&aacute;rio para widgets e aplicativos incorpor&aacute;veis.<\/p><p>Da mesma forma, um&nbsp;<a href=\"\/pt\/tutoriais\/o-que-e-iframe\"><strong>Inline Frame (iFrame)<\/strong><\/a>&nbsp;tamb&eacute;m traz elementos de terceiros para uma p&aacute;gina da Web, o que pode causar mudan&ccedil;as de layout.<\/p><p>Para evitar que incorpora&ccedil;&otilde;es e iFrames causem pontua&ccedil;&otilde;es ruins no CLS, inspecione seu tamanho usando as ferramentas de desenvolvedor do navegador.&nbsp;Clique no&nbsp;<strong>&iacute;cone do ponteiro<\/strong>&nbsp;no canto superior esquerdo das ferramentas do desenvolvedor e selecione os elementos que deseja inspecionar.<\/p><p>Adicione esses tamanhos aos seus elementos incorporados ou iFrames.<\/p><h2 class=\"wp-block-heading\" id=\"h-3-use-fontdisplay-para-fontes-personalizadas\"><strong>3. Use font:display para Fontes Personalizadas<\/strong><\/h2><p><strong>N&iacute;vel de dificuldade: M&eacute;dio<\/strong><\/p><p><strong>Impacto: M&eacute;dio<\/strong><\/p><p><a href=\"\/pt\/tutoriais\/como-adicionar-fontes-personalizadas-blog-wordpress\"><strong>Adicionar uma fonte personalizada<\/strong><\/a>&nbsp;ao seu site pode aumentar a pontua&ccedil;&atilde;o do CLS, causando:<\/p><ul class=\"wp-block-list\">\n<li><strong>Flashes de texto invis&iacute;vel (FOIT)<\/strong>&nbsp;&ndash; a renderiza&ccedil;&atilde;o da p&aacute;gina exibir&aacute; texto invis&iacute;vel ou uma fonte em branco at&eacute; carregar a fonte personalizada.<\/li>\n\n\n\n<li><strong>Flashes de texto sem estilo (FOUT)<\/strong>&nbsp;&ndash; os navegadores exibem uma fonte de substituta at&eacute; carregarem a fonte personalizada, ignorando momentaneamente o layout da p&aacute;gina.<\/li>\n<\/ul><p>O carregamento de uma fonte da Web personalizada pode fazer com que o layout mude significativamente, geralmente devido ao uso de um espa&ccedil;o diferente do que a fonte do sistema exige.&nbsp;Use valores&nbsp;<strong>font:display<\/strong>, como&nbsp;<strong>auto<\/strong>,&nbsp;<strong>fallback<\/strong>,&nbsp;<strong>block<\/strong>,&nbsp;<strong>swap<\/strong>&nbsp;e&nbsp;<strong>optional<\/strong>, para evitar texto invis&iacute;vel e sem estilo.<\/p><p>Outra maneira de evitar mudan&ccedil;as significativas de estilo em suas fontes da Web &eacute; escolher uma fonte de sistema semelhante:<\/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>Com as fontes da Web personalizadas do Google, evite a mudan&ccedil;a de layout adicionando&nbsp;<strong>&amp;display=swap<\/strong>&nbsp;ap&oacute;s o link:<\/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>Adicionar um valor&nbsp;<strong>&lt;link rel=preload&gt;<\/strong>&nbsp;ao seu arquivo de fonte tamb&eacute;m ajudar&aacute; a evitar a mudan&ccedil;a de layout ao carregar fontes da Web personalizadas.<\/p><h3 class=\"wp-block-heading\"><strong>4. Revisando o conte&uacute;do injetado dinamicamente<\/strong><\/h3><p><strong>N&iacute;vel de dificuldade: M&eacute;dio<\/strong><\/p><p><strong>Impacto: Alto<\/strong><\/p><p>Outra raz&atilde;o por tr&aacute;s de um problema de CLS &eacute; o conte&uacute;do din&acirc;mico.&nbsp;Os sites geralmente usam conte&uacute;do din&acirc;mico para convencer visitantes a concluir uma a&ccedil;&atilde;o espec&iacute;fica.&nbsp;No entanto, quando um novo elemento aparece na parte superior ou inferior de uma p&aacute;gina, ele geralmente desloca o conte&uacute;do ao seu redor.<\/p><p>Portanto, evite injetar conte&uacute;do din&acirc;mico acima do conte&uacute;do existente.&nbsp;Algumas das maneiras de revisar o elementos injetados dinamicamente incluem:<\/p><ul class=\"wp-block-list\">\n<li><strong>Convidar usu&aacute;rios para iniciar mudan&ccedil;as<\/strong>&nbsp;&ndash; adicione um elemento de intera&ccedil;&atilde;o do usu&aacute;rio para acionar o novo carregamento de conte&uacute;do, evitando mudan&ccedil;as inesperadas.&nbsp;Alguns exemplos incluem um bot&atilde;o&nbsp;<strong>Leia mais<\/strong>&nbsp;ou&nbsp;<strong>Atualizar<\/strong>.&nbsp;Observe que voc&ecirc; deve manter as mudan&ccedil;as de layout dentro de&nbsp;<strong>500 ms<\/strong>&nbsp;para evitar afetar o CLS.<\/li>\n\n\n\n<li><strong>Carregar conte&uacute;do fora da tela<\/strong>&nbsp;&ndash; como as mudan&ccedil;as que acontecem fora da tela n&atilde;o contribuem para o CLS, outra op&ccedil;&atilde;o &eacute; carregar conte&uacute;do din&acirc;mico fora da janela de visualiza&ccedil;&atilde;o do usu&aacute;rio e usar uma sobreposi&ccedil;&atilde;o para convidar os usu&aacute;rios a v&ecirc;-lo. Um exemplo disso &eacute; uma&nbsp;notifica&ccedil;&atilde;o de&nbsp;<strong>rolagem para cima.<\/strong><\/li>\n\n\n\n<li><strong>Usar um cont&ecirc;iner de tamanho fixo<\/strong>&nbsp;&ndash; ajuda a evitar a mudan&ccedil;a de layout.&nbsp;Uma das op&ccedil;&otilde;es &eacute; usar um carrossel, que tamb&eacute;m &eacute; uma alternativa adequada caso seu conte&uacute;do din&acirc;mico substitua um elemento por outro.&nbsp;Certifique-se de que quaisquer links ou controles aguardem a transi&ccedil;&atilde;o para evitar cliques acidentais.<\/li>\n<\/ul><figure class=\"wp-block-image size-large\"><a href=\"\/pt\/hospedagem-barata\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-1024x300.png\" alt=\"\" class=\"wp-image-32927\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-768x225.png 768w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-1536x450.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p>O Cumulative Layout Shift mede altera&ccedil;&otilde;es inesperadas na &aacute;rea da janela de visualiza&ccedil;&atilde;o para avaliar a experi&ecirc;ncia do usu&aacute;rio.&nbsp;Al&eacute;m disso, por ser um fator de classifica&ccedil;&atilde;o do Google, o CLS afeta significativamente seu SEO.<\/p><p>Uma p&aacute;gina da web com grande estabilidade visual tem uma pontua&ccedil;&atilde;o CLS abaixo de&nbsp;<strong>0,1<\/strong>, enquanto qualquer coisa acima de&nbsp;<strong>0,25<\/strong>&nbsp;indica desempenho ruim.&nbsp;Apresentamos dois m&eacute;todos para medir CLS: em laborat&oacute;rio e em campo.<\/p><p>Embora seja poss&iacute;vel escolher um &uacute;nico m&eacute;todo, o uso de ambos produzir&aacute; resultados mais confi&aacute;veis &#8203;&#8203;sobre o desempenho do site.<\/p><p>Depois de discutir como identificar os elementos que aumentam sua pontua&ccedil;&atilde;o CLS, compartilhamos como corrigir problemas de Cumulative Layout Shift usando estes quatro m&eacute;todos:<\/p><ul class=\"wp-block-list\">\n<li>Defini&ccedil;&atilde;o de dimens&otilde;es para imagens e v&iacute;deos.<\/li>\n\n\n\n<li>Definir uma largura e altura para an&uacute;ncios de banner, incorpora&ccedil;&otilde;es e iFrames.<\/li>\n\n\n\n<li>Usar os valores&nbsp;<strong>font:display<\/strong>&nbsp;para fontes personalizadas.<\/li>\n\n\n\n<li>Revis&atilde;o de conte&uacute;do din&acirc;mico.<\/li>\n<\/ul><p>Deixe-nos saber quais m&eacute;todos funcionaram melhor para sua pontua&ccedil;&atilde;o CLS na se&ccedil;&atilde;o de coment&aacute;rios abaixo.<\/p><p>Se voc&ecirc; deseja continuar melhorando o desempenho do seu site, certifique-se de usar um plano confi&aacute;vel para&nbsp;<a href=\"\/pt\/hospedagem-de-sites\"><strong>hospedar sites<\/strong><\/a>.&nbsp;Boa sorte!<\/p><h2 class=\"wp-block-heading\" id=\"h-perguntas-frequentes-sobre-cumulative-layout-shift-cls\"><strong>Perguntas frequentes sobre Cumulative Layout Shift (CLS)<\/strong><\/h2><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-6944138a54c0a\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">O que &eacute; uma Mudan&ccedil;a de Layout Esperada e Inesperada?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Uma mudan&ccedil;a de layout esperada acontece quando h&aacute; intera&ccedil;&atilde;o do usu&aacute;rio.&nbsp;Por exemplo, quando um usu&aacute;rio clica em um bot&atilde;o.&nbsp;Por outro lado, uma mudan&ccedil;a inesperada de layout ocorre quando um elemento vis&iacute;vel se move sem uma a&ccedil;&atilde;o iniciada pelo usu&aacute;rio.&nbsp;Observe que sua pontua&ccedil;&atilde;o CLS leva em considera&ccedil;&atilde;o apenas altera&ccedil;&otilde;es inesperadas de layout.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-6944138a54c10\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">O Lazy Loading Afeta o Cumulative Layout Shift?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>O lazy loading pode causar altera&ccedil;&otilde;es de layout quando um usu&aacute;rio rola para baixo em uma p&aacute;gina da Web e o elemento visual ainda est&aacute; sendo carregado.&nbsp;No entanto, o carregamento lento &eacute; essencial para ajudar a&nbsp;otimizar as imagens&nbsp;em uma p&aacute;gina da web.u003cbr \/u003eu003cbr \/u003ePortanto, lembre-se de especificar as dimens&otilde;es das imagens de lazy loading para evitar afetar sua pontua&ccedil;&atilde;o CLS.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-6944138a54c11\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">A Pontua&ccedil;&atilde;o de CLS &eacute; Calculada Apenas para o Primeiro Conte&uacute;do (Above the Fold)?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Sim, apenas mudan&ccedil;as de layout no primeiro conte&uacute;do (above the fold) afetam sua pontua&ccedil;&atilde;o no CLS.&nbsp;No entanto, otimizar todos os elementos em uma p&aacute;gina da web garantir&aacute; um melhor desempenho geral.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Cumulative Layout Shift (CLS)&nbsp;&eacute; uma m&eacute;trica que avalia a experi&ecirc;ncia do usu&aacute;rio medindo o quanto as p&aacute;ginas do seu site mudam inesperadamente. Embora existam v&aacute;rios elementos do site que afetam a experi&ecirc;ncia do usu&aacute;rio, uma pontua&ccedil;&atilde;o baixa no CLS tamb&eacute;m afeta a otimiza&ccedil;&atilde;o do mecanismo de pesquisa (SEO) do seu site.&nbsp;Portanto, entender o que &eacute; [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/pt\/tutoriais\/cumulative-layout-shift\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":125,"featured_media":49284,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"O Cumulative Layout Shift \u00e9 uma m\u00e9trica do Core Web Vitals que ilustra a estabilidade do carregamento da p\u00e1gina. Aprenda a melhor\u00e1-la!","rank_math_focus_keyword":"cumulative layout shift","footnotes":""},"categories":[4941],"tags":[],"class_list":["post-27671","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento-web"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/cumulative-layout-shift","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/cumulative-layout-shift","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-cumulative-layout-shift","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cumulative-layout-shift","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/cumulative-layout-shift","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-cumulative-layout-shift","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-cumulative-layout-shift","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-cumulative-layout-shift","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/cumulative-layout-shift-cls","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/27671","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/users\/125"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/comments?post=27671"}],"version-history":[{"count":10,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/27671\/revisions"}],"predecessor-version":[{"id":49283,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/27671\/revisions\/49283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media\/49284"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media?parent=27671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/categories?post=27671"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/tags?post=27671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}