O que \u00e9 Cumulative Layout Shift (CLS)? Explicando o significado de Cumulative Layout Shift<\/h2>\n
O Cumulative Layout Shift \u00e9 a medida de quanto uma p\u00e1gina em seu site se move inesperadamente durante a visita de um usu\u00e1rio, conforme medido pelo Layout Instability API<\/a>, um API de teste de desempenho<\/a> padronizado.<\/p>\n O Cumulative Layout Shift (CLS) \u00e9 uma das tr\u00eas m\u00e9tricas da iniciativa do Google<\/a>, com a Largest Contentful Paint (LCP) e First Input Delay (FID).<\/p>\n A fim de entender o significado do Cumulative Layout Shift, \u00e9 importante discutir o Layout Shift, em geral.<\/p>\n Uma mudan\u00e7a de layout ocorre quando o conte\u00fado do seu site “se move” ou “se desloca” inesperadamente.<\/p>\n Ou, em termos t\u00e9cnicos, \u00e9 quando qualquer elemento vis\u00edvel no viewport muda sua posi\u00e7\u00e3o inicial entre dois quadros.<\/p>\n Um exemplo comum \u00e9 quando voc\u00ea est\u00e1 lendo um bloco de texto e, de repente, um an\u00fancio de carregamento lento aparece, empurrando seu conte\u00fado de texto para baixo da p\u00e1gina.<\/p>\n Aqui est\u00e1 outro exemplo de imagem do Google que mostra isso acontecendo:<\/p>\n Voc\u00ea quase certamente j\u00e1 encontrou mudan\u00e7as de layout ao navegar pela web, mesmo que voc\u00ea n\u00e3o as conhe\u00e7a por esse nome.<\/p>\n Uma \u00fanica visita pode ter v\u00e1rios eventos separados de mudan\u00e7a de layout. Por esta raz\u00e3o, a m\u00e9trica do Cumulative Layout Shift visa capturar o quadro inteiro medindo a quantidade total de mudan\u00e7as inesperadas de layout em uma p\u00e1gina*.<\/p>\n *A medida exata \u00e9 um pouco mais t\u00e9cnica depois de algumas mudan\u00e7as feitas pelo Google, mas essa ainda \u00e9 a ideia b\u00e1sica. Se voc\u00ea estiver interessado nos detalhes de granulometria, voc\u00ea pode <\/em>leia sobre isso aqui<\/em><\/a>.<\/em><\/p>\n\n A principal raz\u00e3o pela qual o Cumulative Layout Shift \u00e9 ruim \u00e9 que ele cria uma m\u00e1 experi\u00eancia de usu\u00e1rio<\/a> em seu site.<\/p>\n Na melhor das hip\u00f3teses, \u00e9 um pouco irritante para os seus visitantes. Na pior das hip\u00f3teses, pode levar os visitantes a realizar a\u00e7\u00f5es que eles n\u00e3o querem realizar.<\/p>\n Por exemplo, imagine se um usu\u00e1rio quiser clicar em “Cancelar” mas acidentalmente clicar em “Confirmar” porque uma mudan\u00e7a de layout moveu a posi\u00e7\u00e3o dos bot\u00f5es para a direita quando a pessoa estava clicando.<\/p>\n Al\u00e9m de afetar a experi\u00eancia dos seus visitantes humanos, uma pontua\u00e7\u00e3o ruim no Layout Shift Cumulativo tamb\u00e9m pode afetar a classifica\u00e7\u00e3o do seu site nos mecanismos de pesquisa<\/a>.<\/p>\n A partir da atualiza\u00e7\u00e3o do Page Experience do Google<\/a> (que terminou em agosto de 2021), o Google usa o Core Web Vitals como um de seus fatores de classifica\u00e7\u00e3o SEO. Como o Cumulative Layout Shift \u00e9 parte do Core Web Vitals, isso significa que ele pode afetar o desempenho da pesquisa do seu site<\/a>.<\/p>\n Basicamente, a corre\u00e7\u00e3o de qualquer problema do Cumulative Layout Shift em seu site ajudar\u00e1 a torn\u00e1-lo melhor tanto para os visitantes humanos quanto para os mecanismos de pesquisa.<\/p>\n Ent\u00e3o, o que poderia estar causando o Layout Cumulative Shift? Falaremos disso a seguir…<\/p>\n Aqui est\u00e1 um r\u00e1pido resumo das causas mais populares:<\/p>\n Mais tarde, neste artigo, analisaremos essas quest\u00f5es mais detalhadamente enquanto mostramos a voc\u00ea como resolver cada problema.<\/p>\n H\u00e1 uma s\u00e9rie de ferramentas que voc\u00ea pode usar para testar a pontua\u00e7\u00e3o do Cumulative Layout Shift do seu site.<\/p>\n O Cumulative Layout Shift \u00e9 parte da auditoria do Lighthouse, portanto qualquer ferramenta de teste de velocidade que use o Lighthouse como parte de sua auditoria incluir\u00e1 dados CLS – isso inclui PageSpeed Insights<\/a>, GTmetrix<\/a>, Chrome Developer Tools, e muitas outras ferramentas de teste populares<\/a>.<\/p>\n Aqui est\u00e3o algumas das principais ferramentas de teste Cumulative Layout Shift que se destacam por sua utilidade..<\/p>\n PageSpeed Insights<\/a> \u00e9 uma das ferramentas mais \u00fateis para avaliar o estado da mudan\u00e7a de layout do seu site, pois fornece duas fontes de dados:<\/p>\n Voc\u00ea tamb\u00e9m pode visualizar dados tanto para desktop quanto para celular, alternando entre as abas.<\/p>\n Nota <\/strong>– os dados do laborat\u00f3rio s\u00f3 conseguem medir as mudan\u00e7as de layout que ocorrem durante o carregamento da p\u00e1gina, ent\u00e3o os resultados do seu usu\u00e1rio real podem ser ligeiramente maiores se voc\u00ea tiver mudan\u00e7as de layout que ocorrem ap\u00f3s o carregamento da p\u00e1gina.<\/p>\n O Chrome Developer Tools oferece alguns recursos \u00fateis<\/a> tanto para medir CLS quanto para depurar as mudan\u00e7as de layout individuais que est\u00e3o ocorrendo no seu site.<\/p>\n Primeiro, voc\u00ea pode executar uma auditoria do Lighthouse para ver a pontua\u00e7\u00e3o do seu site no CLS. Aqui est\u00e1 como:<\/p>\n Ap\u00f3s uma breve espera, voc\u00ea deve ent\u00e3o ver a interface de auditoria regular do Lighthouse (que se parece muito com PageSpeed Insights).<\/p>\n Entretanto, o Chrome Developer Tools tamb\u00e9m permite que voc\u00ea v\u00e1 mais fundo no CLS com sua an\u00e1lise de Rendering<\/strong>. Isso permitir\u00e1 que voc\u00ea destaque regi\u00f5es individuais de mudan\u00e7a de layout em seu site, o que o ajudar\u00e1 a depur\u00e1-las.<\/p>\n Veja como:<\/p>\n Agora, recarregue a p\u00e1gina que voc\u00ea quer testar e o Chrome deve destacar quaisquer \u00e1reas com mudan\u00e7as de layout usando uma caixa azul. Estes destaques aparecer\u00e3o na p\u00e1gina atual, j\u00e1 que o conte\u00fado est\u00e1 carregando e desaparecem ap\u00f3s o fim do turno.<\/p>\n Se os destaques forem muito r\u00e1pidos para serem seguidos, voc\u00ea pode diminuir a velocidade do site e observ\u00e1-lo carregar quadro a quadro usando a aba Performance<\/strong>.<\/p>\n Embora o Google Search Console<\/a> n\u00e3o permita que voc\u00ea execute testes de laborat\u00f3rio para determinar o Cumulative Layout Shift, ele lhe d\u00e1 uma maneira f\u00e1cil de ver os problemas com o Cumulative Layout Shift em seu site, conforme medido pelo relat\u00f3rio Chrome UX.<\/p>\n A vantagem de usar o Google Search Console<\/a> sobre outras ferramentas \u00e9 que ele permite que voc\u00ea veja rapidamente os problemas em todo o seu site ao inv\u00e9s de testar p\u00e1gina por p\u00e1gina.<\/p>\n Veja aqui como visualizar poss\u00edveis problemas no seu site:<\/p>\n Se aplic\u00e1vel, o Google destacar\u00e1 URLs<\/a> com pontua\u00e7\u00f5es de Layout Cumulative Shift problem\u00e1ticas.<\/p>\n Nota <\/strong>– voc\u00ea s\u00f3 ver\u00e1 dados aqui se o seu site tiver tr\u00e1fego mensal suficiente para ser inclu\u00eddo no relat\u00f3rio Chrome UX.<\/p>\n Como o nome sugere, o Layout Shift GIF Generator<\/a> gera um GIF dos turnos de layout em seu site para que voc\u00ea possa ver exatamente o conte\u00fado que est\u00e1 causando problemas. Ele tamb\u00e9m lhe dar\u00e1 sua pontua\u00e7\u00e3o, embora esse n\u00e3o seja o foco principal da ferramenta.<\/p>\n Tudo o que voc\u00ea faz \u00e9 adicionar a URL que voc\u00ea quer testar e escolher entre dispositivos m\u00f3veis ou desktop. Ent\u00e3o, ele ir\u00e1 gerar um GIF do seu site com destaque verde mostrando os elementos exatos que est\u00e3o mudando.<\/p>\n Ao ver quais elementos est\u00e3o se deslocando e contribuindo para \u00e0 sua pontua\u00e7\u00e3o no Cumulative Layout Shift, voc\u00ea pode saber exatamente onde se concentrar quando se trata de melhorar a pontua\u00e7\u00e3o do seu site.<\/p>\n De acordo com a iniciativa Core Web Vitals do Google, uma boa pontua\u00e7\u00e3o Cumulative Layout Shift \u00e9 0.1 ou menos<\/strong>.<\/p>\n Se \u00e0 sua pontua\u00e7\u00e3o do Cumulative Layout Shift estiver entre 0,1 e 0,25, o Google define isso como “Precisa Melhorar”.<\/p>\n Se \u00e0 sua pontua\u00e7\u00e3o no Cumulative Layout Shift estiver acima de 0,25, o Google define isso como “Pobre”.<\/p>\n Aqui est\u00e1 um gr\u00e1fico do site Core Web Vitals do Google que mostra estas pontua\u00e7\u00f5es visualmente:<\/p>\n Agora que voc\u00ea entende o que est\u00e1 acontecendo com o Cumulative Layout Shift, \u00e9 hora de mudar para algumas dicas acion\u00e1veis sobre como corrigir o Cumulative Layout Shift no WordPress.<\/p>\n Essas dicas s\u00e3o da perspectiva do WordPress, mas s\u00e3o todas universais e aplic\u00e1veis \u200b\u200ba outras ferramentas de cria\u00e7\u00e3o de sites.<\/p>\n Uma das causas mais populares de mudan\u00e7a de layout \u00e9 o carregamento tardio de imagens movimentando conte\u00fado, especialmente se voc\u00ea estiver usando t\u00e1ticas como o carregamento pregui\u00e7oso<\/a>.<\/p>\n Para evitar isso, voc\u00ea pode especificar as dimens\u00f5es de uma imagem no c\u00f3digo quando voc\u00ea a incorpora. Dessa forma, o navegador do visitante ir\u00e1 reservar esse espa\u00e7o mesmo que a imagem ainda n\u00e3o tenha sido carregada, o que significa que a imagem n\u00e3o precisar\u00e1 mover o conte\u00fado.<\/p>\n Se voc\u00ea estiver incorporando imagens por meio de um editor do WordPress (seja o editor de blocos do Gutenberg<\/a> ou o cl\u00e1ssico editor TinyMCE<\/a>), n\u00e3o precisar\u00e1 especificar manualmente as dimens\u00f5es da imagem, pois o WordPress faz isso automaticamente.<\/p>\n O mesmo se aplica aos plugins populares de constru\u00e7\u00e3o de p\u00e1ginas<\/a> como Elementor, Divi<\/a>, Beaver Builder, e assim por diante.<\/p>\n Entretanto, problemas podem surgir se voc\u00ea estiver incorporando imagens manualmente usando seu pr\u00f3prio c\u00f3digo, o que pode acontecer se voc\u00ea estiver adicionando conte\u00fado a um plugin, editando os arquivos de template do seu child theme<\/a>, e assim por diante.<\/p>\n O c\u00f3digo HTML para uma incorpora\u00e7\u00e3o b\u00e1sica de imagem se parece com isso:<\/p>\n Para especificar suas dimens\u00f5es, voc\u00ea pode adicionar par\u00e2metros de altura<\/strong> e largura<\/strong>. Aqui est\u00e1 um exemplo de como isso pode parecer para uma imagem de 600\u00d7300px:<\/p>\n Muitos plugins de desempenho WordPress<\/a> tamb\u00e9m incluem recursos para automatizar isso, como os recursos Add Missing Image Dimensions<\/strong> no WP Rocket ou Perfmatters.<\/p>\n Semelhante \u00e0s imagens, voc\u00ea tamb\u00e9m vai querer especificar dimens\u00f5es sempre que estiver adicionando v\u00eddeos, iframes ou outras m\u00eddias incorporadas.<\/p>\n A maioria das ferramentas de incorpora\u00e7\u00e3o de sites devem especificar automaticamente as dimens\u00f5es para a incorpora\u00e7\u00e3o.<\/p>\n Por exemplo, se voc\u00ea olhar para o c\u00f3digo incorporado do YouTube<\/a>, voc\u00ea ver\u00e1 que ele inclui dimens\u00f5es:<\/p>\n O mesmo se aplica a muitos outros servi\u00e7os.<\/p>\n Entretanto, se o seu c\u00f3digo de incorpora\u00e7\u00e3o n\u00e3o especificar a altura e largura, voc\u00ea pode adicionar manualmente estas dimens\u00f5es ao c\u00f3digo de incorpora\u00e7\u00e3o.<\/p>\n Quest\u00f5es com carregamento de fontes e otimiza\u00e7\u00e3o podem ser outra fonte comum de mudan\u00e7as de layout atrav\u00e9s de duas quest\u00f5es potenciais:<\/p>\n Para evitar estes problemas, voc\u00ea precisa otimizar como voc\u00ea carrega as fontes em seu site (o que tamb\u00e9m pode ter alguns benef\u00edcios para o desempenho do seu site).<\/p>\n Ao hospedar fontes localmente e usar o pr\u00e9-carregamento, voc\u00ea diz aos navegadores dos visitantes para colocar uma prioridade maior no carregamento de arquivos de fontes personalizados.<\/p>\n Ao carregar arquivos de fontes antes de outros recursos, voc\u00ea pode garantir que os arquivos de fontes j\u00e1 estejam carregados quando o navegador come\u00e7ar a renderizar seu conte\u00fado, o que pode evitar problemas com FOUT e FOIT.<\/p>\n Para aprender como hospedar fontes localmente no WordPress, voc\u00ea pode ler nosso guia completo para hospedar fontes localmente no WordPress<\/a>.<\/p>\n A partir da\u00ed, voc\u00ea pode configurar o pr\u00e9-carregamento da fonte manualmente ou usando um plugin. A maioria dos plugins de desempenho inclui op\u00e7\u00f5es para pr\u00e9-carregar fontes, incluindo WP Rocket, Perfmatters, Autoptimize<\/a>, e outros.<\/p>\n Se voc\u00ea estiver usando as fontes do Google<\/a>, voc\u00ea tamb\u00e9m pode usar o plugin gratuito OMGF<\/a> para hospedar as fontes localmente e<\/em> pr\u00e9-carreg\u00e1-las.<\/p>\n Voc\u00ea tamb\u00e9m pode pr\u00e9-carregar manualmente as fontes adicionando o c\u00f3digo na se\u00e7\u00e3o <head><\/strong> do seu site.<\/p>\n Aqui est\u00e1 um exemplo do c\u00f3digo – certifique-se de substitu\u00ed-lo pelo nome\/localiza\u00e7\u00e3o real do arquivo da fonte que voc\u00ea quer pr\u00e9-carregar:<\/p>\n Voc\u00ea pode adicion\u00e1-lo diretamente usando um child theme de WordPress<\/a> ou injet\u00e1-lo com uma hook wp_head<\/a> e um plugin como o Code Snippets<\/a>.<\/p>\n A propriedade CSS Font-Display<\/a> permite que voc\u00ea controle o comportamento de renderiza\u00e7\u00e3o das fontes em seu site e evite FOIT.<\/p>\n Essencialmente, ele permite que voc\u00ea use uma fonte fallback em situa\u00e7\u00f5es onde sua fonte personalizada ainda n\u00e3o tenha sido carregada.<\/p>\n H\u00e1 duas op\u00e7\u00f5es principais que voc\u00ea pode usar para abordar o CLS:<\/p>\n Com Swap<\/strong>, o navegador sempre<\/strong> mudar\u00e1 para a fonte personalizada assim que ela for carregada.<\/p>\n Enquanto o Swap<\/strong> resolve completamente FOIT, ele pode levar a FOUT. Para minimizar isso, voc\u00ea deve certificar-se de que a fonte fallback use o mesmo espa\u00e7amento que a fonte personalizada (pelo menos o m\u00e1ximo poss\u00edvel). Dessa forma, mesmo que o estilo da fonte mude, isso n\u00e3o levar\u00e1 a mudan\u00e7as de layout, pois o espa\u00e7amento ser\u00e1 o mesmo.<\/p>\n Com Optional<\/strong>, o navegador dar\u00e1 a fonte personalizada de 100 ms para carregar. No entanto, se a fonte personalizada n\u00e3o estiver dispon\u00edvel at\u00e9 l\u00e1, o navegador simplesmente ficar\u00e1 com a fonte fallback\u00a0e nunca a mudar\u00e1 para a fonte personalizada para aquela visualiza\u00e7\u00e3o de p\u00e1gina (ele usar\u00e1 a fonte personalizada para visualiza\u00e7\u00f5es de p\u00e1ginas subsequentes, pois \u00e9 prov\u00e1vel que o arquivo da fonte tenha sido baixado e colocado em cache at\u00e9 l\u00e1<\/em>).<\/p>\n Embora Optional <\/strong>possa resolver tanto FOIT como FOUT, o lado negativo \u00e9 que o visitante pode ficar preso com a fonte fallback para sua primeira visualiza\u00e7\u00e3o\u00a0 de p\u00e1gina.<\/p>\n Se voc\u00ea se sente confort\u00e1vel trabalhando com CSS, voc\u00ea pode editar manualmente a propriedade Font-Display na folha de estilo do seu child theme.<\/p>\n Se voc\u00ea n\u00e3o se sente confort\u00e1vel fazendo isso, voc\u00ea tamb\u00e9m pode encontrar alguns plugins que ir\u00e3o ajudar:<\/p>\n Se voc\u00ea estiver usando Elementor<\/a>, tamb\u00e9m h\u00e1 uma op\u00e7\u00e3o integrada para fazer isso. V\u00e1 para Elementor \u2192 Settings \u2192 Advanced<\/strong>. Voc\u00ea pode ent\u00e3o definir o carregamento\u00a0 em Google Fonts Load<\/strong> e selecionar Swap ou Optional de acordo com suas prefer\u00eancias:<\/p>\n Se toda essa conversa sobre pr\u00e9-carregamento e exibi\u00e7\u00e3o de fontes o confunde, uma solu\u00e7\u00e3o simples \u00e9 usar uma pilha de fontes do sistema ao inv\u00e9s de uma pilha de fontes personalizada.<\/p>\n Enquanto isso limita suas op\u00e7\u00f5es de design, ele resolver\u00e1 completamente os problemas de fonte Cumulative Layout Shift, FOIT, e FOUT. Al\u00e9m disso, ele tamb\u00e9m ajudar\u00e1 o seu site a carregar muito mais r\u00e1pido.<\/p>\n Se voc\u00ea estiver interessado, d\u00ea uma olhada no guia do Brian sobre como usar um sistema de fontes no WordPress<\/a>.<\/p>\n Se voc\u00ea usa an\u00fancios gr\u00e1ficos, \u00e9 importante reservar espa\u00e7o para esses an\u00fancios no c\u00f3digo do seu site. Isso segue a mesma ideia de reservar espa\u00e7o para imagens, v\u00eddeos e incorpora\u00e7\u00f5es.<\/p>\n Entretanto, os an\u00fancios de exibi\u00e7\u00e3o merecem uma men\u00e7\u00e3o especial porque \u00e9 muito comum ter an\u00fancios de exibi\u00e7\u00e3o com carregamento tardio se voc\u00ea estiver usando qualquer tipo de tecnologia de licita\u00e7\u00e3o. Isso porque a tecnologia de licita\u00e7\u00e3o precisa de tempo para funcionar e descobrir qual an\u00fancio exibir.<\/p>\n Tamb\u00e9m pode ser um problema com an\u00fancios autom\u00e1ticos do AdSense<\/a> se voc\u00ea tiver slots de an\u00fancios din\u00e2micos, porque, al\u00e9m do problema de licita\u00e7\u00e3o, o AdSense tamb\u00e9m carregar\u00e1 an\u00fancios de tamanhos diferentes<\/a> (assim voc\u00ea pode n\u00e3o saber o tamanho do an\u00fancio com anteced\u00eancia).<\/p>\n Se voc\u00ea estiver usando uma das populares redes de an\u00fancios<\/a> como Mediavine ou AdThrive, eles j\u00e1 devem oferecer ferramentas para ajud\u00e1-lo a evitar mudan\u00e7as de layout com seus an\u00fancios. Por exemplo, se voc\u00ea abrir a \u00e1rea de Configura\u00e7\u00f5es de an\u00fancios<\/strong> do Mediavine, voc\u00ea pode habilitar uma altern\u00e2ncia para otimizar os an\u00fancios para o CLS<\/strong>:<\/p>\n Para otimizar o AdSense para o Cumulative Layout Shift, \u00e9 um pouco mais complicado.<\/p>\n Uma corre\u00e7\u00e3o comum \u00e9 adicionar um elemento wrapper <div> ao redor de cada unidade de an\u00fancio que especifica uma altura m\u00ednima usando a propriedade CSS de altura m\u00ednima<\/strong><\/a>.\u00a0Voc\u00ea tamb\u00e9m pode usar consultas de m\u00eddia para mudar a altura m\u00ednima com base no dispositivo do usu\u00e1rio.<\/p>\n O Google recomenda definir a altura m\u00ednima para o tamanho do seu an\u00fancio ou o maior tamanho poss\u00edvel. Isso pode resultar em desperd\u00edcio de espa\u00e7o ao veicular an\u00fancios menores, mas \u00e9 a melhor op\u00e7\u00e3o para eliminar a possibilidade de altera\u00e7\u00f5es de layout.<\/p>\n Ao configurar este elemento wrapper, certifique-se de usar um CSS ID em vez de uma classe<\/a>, j\u00e1 que AdSense frequentemente ir\u00e1 retirar a classe CSS dos objetos principais.<\/p>\n Este \u00e9 o visual que o CSS pode ter:<\/p>\n E isso \u00e9 o que a incorpora\u00e7\u00e3o do AdSense poderia parecer:<\/p>\n No frontend, voc\u00ea ver\u00e1 agora que seu site reserva espa\u00e7o para aquele an\u00fancio, mesmo que ele esteja vazio:<\/p>\n Muitos sites WordPress ir\u00e3o injetar dinamicamente conte\u00fado para fun\u00e7\u00f5es como avisos de consentimento de cookies, conte\u00fado relacionado, formul\u00e1rios de e-mail opt-in<\/a>, e assim por diante.<\/p>\n Embora isso seja bom, voc\u00ea vai querer ter cuidado para evitar fazer isso de uma forma que cause mudan\u00e7as de layout.<\/p>\n Uma boa pr\u00e1tica de web design<\/a> aqui \u00e9 nunca injetar conte\u00fado acima <\/em>do conte\u00fado existente a menos que o usu\u00e1rio tenha feito uma intera\u00e7\u00e3o espec\u00edfica (por exemplo, clicando em um bot\u00e3o).<\/p>\n Por exemplo, se voc\u00ea estiver adicionando um aviso de consentimento de cookie<\/a>, voc\u00ea n\u00e3o vai querer coloc\u00e1-lo no topo da p\u00e1gina porque o conte\u00fado seria empurrado para baixo (a menos que voc\u00ea j\u00e1 tenha reservado um espa\u00e7o para o banner de consentimento de cookie<\/em>).<\/p>\n Ao inv\u00e9s disso, voc\u00ea deve exibir o aviso no final da p\u00e1gina, o que evitar\u00e1 o deslocamento para baixo do conte\u00fado vis\u00edvel.<\/p>\n Para ver se o conte\u00fado din\u00e2mico est\u00e1 causando o problema, voc\u00ea pode usar as ferramentas de visualiza\u00e7\u00e3o (por exemplo, Layout Shift GIF Generator<\/a>).<\/p>\n Se voc\u00ea achar que o conte\u00fado de um plugin espec\u00edfico est\u00e1 causando altera\u00e7\u00f5es no layout, ajuste as configura\u00e7\u00f5es desse plugin ou mude para um plugin diferente.<\/p>\n Por exemplo, alguns plugins de consentimento de cookies s\u00e3o melhores do que outros quando se trata de mudan\u00e7as de layout, ent\u00e3o vale a pena experimentar com plugins diferentes se voc\u00ea estiver tendo problemas.<\/p>\n Se voc\u00ea quiser ir ainda mais fundo no comportamento de plugins, voc\u00ea pode usar uma ferramenta de monitoramento de desempenho de aplicativos<\/a>. Se voc\u00ea hospedar com Kinsta, a ferramenta APM da Kinsta<\/a>\u00a0est\u00e1 dispon\u00edvel gratuitamente no seu painel MyKinsta<\/a>, ou voc\u00ea pode encontrar outras ferramentas APM<\/a>.<\/p>\n Para ajudar voc\u00ea a testar plugins, voc\u00ea tamb\u00e9m pode usar o ambiente de teste da Kinsta<\/a> ou a ferramenta de desenvolvimento local DevKinsta<\/a>.<\/p>\n Se voc\u00ea estiver usando anima\u00e7\u00f5es em seu site, estas podem ser outro culpado comum por mudan\u00e7as de layout.<\/p>\n Para evitar problemas com anima\u00e7\u00f5es que causam mudan\u00e7as de layout, voc\u00ea deve usar a fun\u00e7\u00e3o CSS Transform<\/a> para anima\u00e7\u00f5es ao inv\u00e9s de outras t\u00e1ticas:<\/p>\n Esta \u00e9 mais uma dica t\u00e9cnica, ent\u00e3o \u00e9 improv\u00e1vel que voc\u00ea precise fazer isso a menos que voc\u00ea esteja adicionando seu pr\u00f3prio CSS. Para saber mais, voc\u00ea pode ler a p\u00e1gina do Google no CLS e anima\u00e7\u00f5es\/transi\u00e7\u00f5es<\/a>.<\/p>\n\n Se o seu site tem uma alta pontua\u00e7\u00e3o do Cumulative Layout Shift, \u00e9 importante corrigi-la tanto para criar uma melhor experi\u00eancia para seus visitantes humanos quanto para maximizar o desempenho do seu site nos resultados de pesquisa do Google.<\/p>\n Dois dos problemas mais comuns s\u00e3o a falta de tamanhos de imagem\/embed e problemas de carregamento de caracteres. Se voc\u00ea resolver isso, voc\u00ea deve conseguir obter uma pontua\u00e7\u00e3o melhor.<\/p>\n Outros sites podem precisar ir mais longe e se aprofundar no carregamento de an\u00fancios, conte\u00fado din\u00e2mico e anima\u00e7\u00f5es. Se voc\u00ea mesmo est\u00e1 lutando para implementar estes tipos de otimiza\u00e7\u00e3o, voc\u00ea pode considerar trabalhar com uma ag\u00eancia WordPress<\/a> ou com um freelancer.<\/p>\n Para saber mais sobre o Core Web Vitals, voc\u00ea pode ler o guia completo da Kinsta para Core Web Vitals<\/a>.<\/p>\n E se voc\u00ea quer um provedor de hospedagem de sites WordPress que possa ajud\u00e1-lo a criar um site de alto desempenho<\/a> que se saia bem no Core Web Vitals, considere o uso da hospedagem gerenciada de WordPress da Kinsta<\/a> – podemos migrar seus sites WordPress gratuitamente<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":" Problemas com o Cumulative Layout Shift em seu site? Ou n\u00e3o tem certeza o que significa o Cumulative Layout Shift? Cumulative Layout Shift, ou CLS, resumindo, …<\/p>\n","protected":false},"author":199,"featured_media":56367,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1005,1011],"class_list":["post-56127","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-estrategia-de-seo","topic-experiencia-usuario"],"yoast_head":"\n![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-example-1024x749.jpg\")
Por que o Cumulative Layout Shift \u00e9 ruim?<\/h2>\n
O que causa o Cumulative Layout Shift?<\/h2>\n
\n
Como medir o Cumulative Layout Shift: Melhores ferramentas de teste<\/h2>\n
PageSpeed Insights<\/h3>\n
\n
![\"Pontua\u00e7\u00f5es](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pagespeed-insights-cls-1024x960.jpg\")
Chrome Developer Tools<\/h3>\n
\n
![\"Como](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/chrome-developer-tools-1-1024x763.jpg\")
\n
![\"Como](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/chrome-developer-tools-2-enable-rendering-report-1024x580.jpg\")
Google Search Console<\/h3>\n
\n
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-search-console-1024x696.jpg\")
![\"Como](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-search-console-list-1024x982.jpg\")
Layout Shift GIF Generator<\/h3>\n
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/layout-shift-gif-generator-1024x724.jpg\")
Qual \u00e9 a melhor pontua\u00e7\u00e3o do Cumulative Layout Shift?<\/h2>\n
![\"Recomenda\u00e7\u00f5es](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-scores-1024x252.jpg\")
Como corrigir o\u00a0Cumulative Layout Shift no WordPress (ou em outras plataformas)<\/h2>\n
Sempre especifique dimens\u00f5es para imagens<\/h3>\n
<img src=\"https:\/\/kinsta.com\/example-image.jpg\" alt=\"An example image\"><\/code><\/p>\n<img src=\"https:\/\/kinsta.com\/example-image.jpg\" alt=\"An example image\" width=\"600\" height=\"300\"<\/strong>><\/code><\/p>\nSempre especifique dimens\u00f5es para v\u00eddeos, iframes e outras m\u00eddias incorporadas<\/h3>\n
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/youtube-embed-code-1024x605.jpg\")
Corrigindo e otimizando o carregamento de fontes<\/h3>\n
\n
Hospede fontes localmente e pr\u00e9-carregue fontes<\/h4>\n
<link rel=\"preload\" href=\"https:\/\/kinsta.com\/fonts\/roboto.woff2\" as=\"font\/woff2\" crossorigin><\/code><\/p>\nDefina Font-Display como Optional ou Swap<\/h4>\n
\n
\n
![\"Op\u00e7\u00f5es](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/elementor-font-display-1024x796.jpg\")
Muito complexo? Considere um sistema de pilha de fontes!<\/h4>\n
Reserve espa\u00e7o para an\u00fancios (se estiver usando an\u00fancios de exibi\u00e7\u00e3o)<\/h3>\n
![\"Configura\u00e7\u00e3o](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/optimize-mediavine-ads-cls-1024x597.jpg\")
![\"Alguns](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-1024x775.jpg\")
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-embed-code-1024x703.jpg\")
![\"Seu](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-frontend-example-1024x611.jpg\")
Seja inteligente ao injetar dinamicamente conte\u00fado com plugins<\/h3>\n
Use o CSS Transform Property para anima\u00e7\u00f5es sempre que poss\u00edvel<\/h3>\n
\n
Resumo<\/h2>\n