Problemas com o Cumulative Layout Shift em seu site? Ou não tem certeza o que significa o Cumulative Layout Shift?
Cumulative Layout Shift, ou CLS, resumindo, é uma métrica que faz parte da iniciativa Core Web Vitals do Google.
Em poucas palavras, ele mede o quanto o conteúdo de uma página da internet muda “inesperadamente”. Uma alta pontuação CLS pode indicar uma má experiência do usuário e também pode afetar o SEO do seu site.
Neste artigo, você aprenderá tudo o que precisa saber sobre o Cumulative Layout Shift e como ele afeta os sites de WordPress (e a internet em geral).
O que é Cumulative Layout Shift (CLS)? Explicando o significado de Cumulative Layout Shift
O Cumulative Layout Shift é a medida de quanto uma página em seu site se move inesperadamente durante a visita de um usuário, conforme medido pelo Layout Instability API, um API de teste de desempenho padronizado.
O Cumulative Layout Shift (CLS) é uma das três métricas da iniciativa do Google, com a Largest Contentful Paint (LCP) e First Input Delay (FID).
A fim de entender o significado do Cumulative Layout Shift, é importante discutir o Layout Shift, em geral.
Uma mudança de layout ocorre quando o conteúdo do seu site “se move” ou “se desloca” inesperadamente.
Ou, em termos técnicos, é quando qualquer elemento visível no viewport muda sua posição inicial entre dois quadros.
Um exemplo comum é quando você está lendo um bloco de texto e, de repente, um anúncio de carregamento lento aparece, empurrando seu conteúdo de texto para baixo da página.
Aqui está outro exemplo de imagem do Google que mostra isso acontecendo:
Você quase certamente já encontrou mudanças de layout ao navegar pela web, mesmo que você não as conheça por esse nome.
Uma única visita pode ter vários eventos separados de mudança de layout. Por esta razão, a métrica do Cumulative Layout Shift visa capturar o quadro inteiro medindo a quantidade total de mudanças inesperadas de layout em uma página*.
*A medida exata é um pouco mais técnica depois de algumas mudanças feitas pelo Google, mas essa ainda é a ideia básica. Se você estiver interessado nos detalhes de granulometria, você pode leia sobre isso aqui.
Por que o Cumulative Layout Shift é ruim?
A principal razão pela qual o Cumulative Layout Shift é ruim é que ele cria uma má experiência de usuário em seu site.
Na melhor das hipóteses, é um pouco irritante para os seus visitantes. Na pior das hipóteses, pode levar os visitantes a realizar ações que eles não querem realizar.
Por exemplo, imagine se um usuário quiser clicar em “Cancelar” mas acidentalmente clicar em “Confirmar” porque uma mudança de layout moveu a posição dos botões para a direita quando a pessoa estava clicando.
Além de afetar a experiência dos seus visitantes humanos, uma pontuação ruim no Layout Shift Cumulativo também pode afetar a classificação do seu site nos mecanismos de pesquisa.
A partir da atualização do Page Experience do Google (que terminou em agosto de 2021), o Google usa o Core Web Vitals como um de seus fatores de classificação SEO. Como o Cumulative Layout Shift é parte do Core Web Vitals, isso significa que ele pode afetar o desempenho da pesquisa do seu site.
Basicamente, a correção de qualquer problema do Cumulative Layout Shift em seu site ajudará a torná-lo melhor tanto para os visitantes humanos quanto para os mecanismos de pesquisa.
Então, o que poderia estar causando o Layout Cumulative Shift? Falaremos disso a seguir…
O que causa o Cumulative Layout Shift?
Aqui está um rápido resumo das causas mais populares:
- Falha na definição do tamanho das imagens, iframes, vídeos ou outros.
- Problemas com carregamento de fontes personalizadas, que podem fazer com que o texto fique invisível ou mudar o tamanho conforme as fontes personalizadas são carregadas.
- Servir anúncios responsivos (por exemplo, AdSense) com tamanhos diferentes (e não reservar espaço para esses anúncios).
- Injetar dinamicamente conteúdo com plugins (avisos de consentimento de cookies, formulários de geração de leads, etc.).
- Usando animações sem a propriedade CSS Transform.
Mais tarde, neste artigo, analisaremos essas questões mais detalhadamente enquanto mostramos a você como resolver cada problema.
Como medir o Cumulative Layout Shift: Melhores ferramentas de teste
Há uma série de ferramentas que você pode usar para testar a pontuação do Cumulative Layout Shift do seu site.
O Cumulative Layout Shift é parte da auditoria do Lighthouse, portanto qualquer ferramenta de teste de velocidade que use o Lighthouse como parte de sua auditoria incluirá dados CLS – isso inclui PageSpeed Insights, GTmetrix, Chrome Developer Tools, e muitas outras ferramentas de teste populares.
Aqui estão algumas das principais ferramentas de teste Cumulative Layout Shift que se destacam por sua utilidade..
PageSpeed Insights
PageSpeed Insights é uma das ferramentas mais úteis para avaliar o estado da mudança de layout do seu site, pois fornece duas fontes de dados:
- Dados de campo – dados reais do usuário do relatório Chrome UX (assumindo que seu site tenha tráfego suficiente para ser incluído no relatório). Isso permite que você veja os dados reais do Cumulative Layout Shift para seus visitantes humanos reais. Estes também são os dados que o Google usa como um sinal de ranking.
- Dados de laboratório – dados de teste simulados coletados pelo Lighthouse (é o que PageSpeed Insights usa para gerar seus relatórios de análise de desempenho).
Você também pode visualizar dados tanto para desktop quanto para celular, alternando entre as abas.
Nota – os dados do laboratório só conseguem medir as mudanças de layout que ocorrem durante o carregamento da página, então os resultados do seu usuário real podem ser ligeiramente maiores se você tiver mudanças de layout que ocorrem após o carregamento da página.
Chrome Developer Tools
O Chrome Developer Tools oferece alguns recursos úteis tanto para medir CLS quanto para depurar as mudanças de layout individuais que estão ocorrendo no seu site.
Primeiro, você pode executar uma auditoria do Lighthouse para ver a pontuação do seu site no CLS. Aqui está como:
- Ferramentas abertas para desenvolvedores do Chrome.
- Vá para a aba Lighthouse.
- Configure seu teste.
- Clique no botão Analyze page load para executar o teste.
Após uma breve espera, você deve então ver a interface de auditoria regular do Lighthouse (que se parece muito com PageSpeed Insights).
Entretanto, o Chrome Developer Tools também permite que você vá mais fundo no CLS com sua análise de Rendering. Isso permitirá que você destaque regiões individuais de mudança de layout em seu site, o que o ajudará a depurá-las.
Veja como:
- Clique no ícone “três pontos” no canto superior direito da interface do Chrome Developer Tools.
- Selecione More Tools → Rendering, que deve abrir uma nova interface na parte inferior.
- Marque a caixa para Layout Shift Regions.
Agora, recarregue a página que você quer testar e o Chrome deve destacar quaisquer áreas com mudanças de layout usando uma caixa azul. Estes destaques aparecerão na página atual, já que o conteúdo está carregando e desaparecem após o fim do turno.
Se os destaques forem muito rápidos para serem seguidos, você pode diminuir a velocidade do site e observá-lo carregar quadro a quadro usando a aba Performance.
Google Search Console
Embora o Google Search Console não permita que você execute testes de laboratório para determinar o Cumulative Layout Shift, ele lhe dá uma maneira fácil de ver os problemas com o Cumulative Layout Shift em seu site, conforme medido pelo relatório Chrome UX.
A vantagem de usar o Google Search Console sobre outras ferramentas é que ele permite que você veja rapidamente os problemas em todo o seu site ao invés de testar página por página.
Veja aqui como visualizar possíveis problemas no seu site:
- Vá para o Google Search Console. Se você ainda não verificou seu site, você pode seguir nosso guia sobre como verificar o Google Search Console.
- Abra o relatório Core Web Vitals em Experience.
- Clique em Open Report ao lado de Mobile ou Desktop, dependendo do que você deseja analisar.
Se aplicável, o Google destacará URLs com pontuações de Layout Cumulative Shift problemáticas.
Nota – você só verá dados aqui se o seu site tiver tráfego mensal suficiente para ser incluído no relatório Chrome UX.
Layout Shift GIF Generator
Como o nome sugere, o Layout Shift GIF Generator gera um GIF dos turnos de layout em seu site para que você possa ver exatamente o conteúdo que está causando problemas. Ele também lhe dará sua pontuação, embora esse não seja o foco principal da ferramenta.
Tudo o que você faz é adicionar a URL que você quer testar e escolher entre dispositivos móveis ou desktop. Então, ele irá gerar um GIF do seu site com destaque verde mostrando os elementos exatos que estão mudando.
Ao ver quais elementos estão se deslocando e contribuindo para à sua pontuação no Cumulative Layout Shift, você pode saber exatamente onde se concentrar quando se trata de melhorar a pontuação do seu site.
Qual é a melhor pontuação do Cumulative Layout Shift?
De acordo com a iniciativa Core Web Vitals do Google, uma boa pontuação Cumulative Layout Shift é 0.1 ou menos.
Se à sua pontuação do Cumulative Layout Shift estiver entre 0,1 e 0,25, o Google define isso como “Precisa Melhorar”.
Se à sua pontuação no Cumulative Layout Shift estiver acima de 0,25, o Google define isso como “Pobre”.
Aqui está um gráfico do site Core Web Vitals do Google que mostra estas pontuações visualmente:
Como corrigir o Cumulative Layout Shift no WordPress (ou em outras plataformas)
Agora que você entende o que está acontecendo com o Cumulative Layout Shift, é hora de mudar para algumas dicas acionáveis sobre como corrigir o Cumulative Layout Shift no WordPress.
Essas dicas são da perspectiva do WordPress, mas são todas universais e aplicáveis a outras ferramentas de criação de sites.
Sempre especifique dimensões para imagens
Uma das causas mais populares de mudança de layout é o carregamento tardio de imagens movimentando conteúdo, especialmente se você estiver usando táticas como o carregamento preguiçoso.
Para evitar isso, você pode especificar as dimensões de uma imagem no código quando você a incorpora. Dessa forma, o navegador do visitante irá reservar esse espaço mesmo que a imagem ainda não tenha sido carregada, o que significa que a imagem não precisará mover o conteúdo.
Se você estiver incorporando imagens por meio de um editor do WordPress (seja o editor de blocos do Gutenberg ou o clássico editor TinyMCE), não precisará especificar manualmente as dimensões da imagem, pois o WordPress faz isso automaticamente.
O mesmo se aplica aos plugins populares de construção de páginas como Elementor, Divi, Beaver Builder, e assim por diante.
Entretanto, problemas podem surgir se você estiver incorporando imagens manualmente usando seu próprio código, o que pode acontecer se você estiver adicionando conteúdo a um plugin, editando os arquivos de template do seu child theme, e assim por diante.
O código HTML para uma incorporação básica de imagem se parece com isso:
<img src="https://kinsta.com/example-image.jpg" alt="An example image">
Para especificar suas dimensões, você pode adicionar parâmetros de altura e largura. Aqui está um exemplo de como isso pode parecer para uma imagem de 600×300px:
<img src="https://kinsta.com/example-image.jpg" alt="An example image" width="600" height="300">
Muitos plugins de desempenho WordPress também incluem recursos para automatizar isso, como os recursos Add Missing Image Dimensions no WP Rocket ou Perfmatters.
Sempre especifique dimensões para vídeos, iframes e outras mídias incorporadas
Semelhante às imagens, você também vai querer especificar dimensões sempre que estiver adicionando vídeos, iframes ou outras mídias incorporadas.
A maioria das ferramentas de incorporação de sites devem especificar automaticamente as dimensões para a incorporação.
Por exemplo, se você olhar para o código incorporado do YouTube, você verá que ele inclui dimensões:
O mesmo se aplica a muitos outros serviços.
Entretanto, se o seu código de incorporação não especificar a altura e largura, você pode adicionar manualmente estas dimensões ao código de incorporação.
Corrigindo e otimizando o carregamento de fontes
Questões com carregamento de fontes e otimização podem ser outra fonte comum de mudanças de layout através de duas questões potenciais:
- Flash de texto invisível (FOIT – Flash of invisible text) – a página é inicialmente carregada sem que nenhum conteúdo de texto apareça. Uma vez que a fonte personalizada é carregada, o texto aparece de repente (o que pode fazer com que o conteúdo existente seja deslocado).
- Flash de texto sem estilo (FOUT – Flash of unstyled text) – o conteúdo de texto é carregado usando uma fonte do sistema (não arquivada). Uma vez que a fonte personalizada é carregada, o texto muda para aquela fonte personalizada, o que pode causar o deslocamento do conteúdo porque o tamanho e o espaçamento do texto podem ser diferentes.
Para evitar estes problemas, você precisa otimizar como você carrega as fontes em seu site (o que também pode ter alguns benefícios para o desempenho do seu site).
Hospede fontes localmente e pré-carregue fontes
Ao hospedar fontes localmente e usar o pré-carregamento, você diz aos navegadores dos visitantes para colocar uma prioridade maior no carregamento de arquivos de fontes personalizados.
Ao carregar arquivos de fontes antes de outros recursos, você pode garantir que os arquivos de fontes já estejam carregados quando o navegador começar a renderizar seu conteúdo, o que pode evitar problemas com FOUT e FOIT.
Para aprender como hospedar fontes localmente no WordPress, você pode ler nosso guia completo para hospedar fontes localmente no WordPress.
A partir daí, você pode configurar o pré-carregamento da fonte manualmente ou usando um plugin. A maioria dos plugins de desempenho inclui opções para pré-carregar fontes, incluindo WP Rocket, Perfmatters, Autoptimize, e outros.
Se você estiver usando as fontes do Google, você também pode usar o plugin gratuito OMGF para hospedar as fontes localmente e pré-carregá-las.
Você também pode pré-carregar manualmente as fontes adicionando o código na seção <head> do seu site.
Aqui está um exemplo do código – certifique-se de substituí-lo pelo nome/localização real do arquivo da fonte que você quer pré-carregar:
<link rel="preload" href="https://kinsta.com/fonts/roboto.woff2" as="font/woff2" crossorigin>
Você pode adicioná-lo diretamente usando um child theme de WordPress ou injetá-lo com uma hook wp_head e um plugin como o Code Snippets.
Defina Font-Display como Optional ou Swap
A propriedade CSS Font-Display permite que você controle o comportamento de renderização das fontes em seu site e evite FOIT.
Essencialmente, ele permite que você use uma fonte fallback em situações onde sua fonte personalizada ainda não tenha sido carregada.
Há duas opções principais que você pode usar para abordar o CLS:
- Swap – usa uma fonte fallback enquanto a fonte personalizada está carregando e então a muda para sua fonte personalizada uma vez que a fonte é carregada.
- Optional – permite que o navegador determine se deve ou não usar uma fonte personalizada com base na velocidade de conexão de um visitante.
Com Swap, o navegador sempre mudará para a fonte personalizada assim que ela for carregada.
Enquanto o Swap resolve completamente FOIT, ele pode levar a FOUT. Para minimizar isso, você deve certificar-se de que a fonte fallback use o mesmo espaçamento que a fonte personalizada (pelo menos o máximo possível). Dessa forma, mesmo que o estilo da fonte mude, isso não levará a mudanças de layout, pois o espaçamento será o mesmo.
Com Optional, o navegador dará a fonte personalizada de 100 ms para carregar. No entanto, se a fonte personalizada não estiver disponível até lá, o navegador simplesmente ficará com a fonte fallback e nunca a mudará para a fonte personalizada para aquela visualização de página (ele usará a fonte personalizada para visualizações de páginas subsequentes, pois é provável que o arquivo da fonte tenha sido baixado e colocado em cache até lá).
Embora Optional possa resolver tanto FOIT como FOUT, o lado negativo é que o visitante pode ficar preso com a fonte fallback para sua primeira visualização de página.
Se você se sente confortável trabalhando com CSS, você pode editar manualmente a propriedade Font-Display na folha de estilo do seu child theme.
Se você não se sente confortável fazendo isso, você também pode encontrar alguns plugins que irão ajudar:
- Swap Google Fonts Display: permite trocar facilmente a exibição das fontes pelo Google Fonts.
- Asset CleanUp: suporta as fontes locais do Google Fonts gratuitamente e personalizadas com a versão Pro.
- Perfmatters: oferece um recurso para as Fontes do Google.
Se você estiver usando Elementor, também há uma opção integrada para fazer isso. Vá para Elementor → Settings → Advanced. Você pode então definir o carregamento em Google Fonts Load e selecionar Swap ou Optional de acordo com suas preferências:
Muito complexo? Considere um sistema de pilha de fontes!
Se toda essa conversa sobre pré-carregamento e exibição de fontes o confunde, uma solução simples é usar uma pilha de fontes do sistema ao invés de uma pilha de fontes personalizada.
Enquanto isso limita suas opções de design, ele resolverá completamente os problemas de fonte Cumulative Layout Shift, FOIT, e FOUT. Além disso, ele também ajudará o seu site a carregar muito mais rápido.
Se você estiver interessado, dê uma olhada no guia do Brian sobre como usar um sistema de fontes no WordPress.
Reserve espaço para anúncios (se estiver usando anúncios de exibição)
Se você usa anúncios gráficos, é importante reservar espaço para esses anúncios no código do seu site. Isso segue a mesma ideia de reservar espaço para imagens, vídeos e incorporações.
Entretanto, os anúncios de exibição merecem uma menção especial porque é muito comum ter anúncios de exibição com carregamento tardio se você estiver usando qualquer tipo de tecnologia de licitação. Isso porque a tecnologia de licitação precisa de tempo para funcionar e descobrir qual anúncio exibir.
Também pode ser um problema com anúncios automáticos do AdSense se você tiver slots de anúncios dinâmicos, porque, além do problema de licitação, o AdSense também carregará anúncios de tamanhos diferentes (assim você pode não saber o tamanho do anúncio com antecedência).
Se você estiver usando uma das populares redes de anúncios como Mediavine ou AdThrive, eles já devem oferecer ferramentas para ajudá-lo a evitar mudanças de layout com seus anúncios. Por exemplo, se você abrir a área de Configurações de anúncios do Mediavine, você pode habilitar uma alternância para otimizar os anúncios para o CLS:
Para otimizar o AdSense para o Cumulative Layout Shift, é um pouco mais complicado.
Uma correção comum é adicionar um elemento wrapper <div> ao redor de cada unidade de anúncio que especifica uma altura mínima usando a propriedade CSS de altura mínima. Você também pode usar consultas de mídia para mudar a altura mínima com base no dispositivo do usuário.
O Google recomenda definir a altura mínima para o tamanho do seu anúncio ou o maior tamanho possível. Isso pode resultar em desperdício de espaço ao veicular anúncios menores, mas é a melhor opção para eliminar a possibilidade de alterações de layout.
Ao configurar este elemento wrapper, certifique-se de usar um CSS ID em vez de uma classe, já que AdSense frequentemente irá retirar a classe CSS dos objetos principais.
Este é o visual que o CSS pode ter:
E isso é o que a incorporação do AdSense poderia parecer:
No frontend, você verá agora que seu site reserva espaço para aquele anúncio, mesmo que ele esteja vazio:
Seja inteligente ao injetar dinamicamente conteúdo com plugins
Muitos sites WordPress irão injetar dinamicamente conteúdo para funções como avisos de consentimento de cookies, conteúdo relacionado, formulários de e-mail opt-in, e assim por diante.
Embora isso seja bom, você vai querer ter cuidado para evitar fazer isso de uma forma que cause mudanças de layout.
Uma boa prática de web design aqui é nunca injetar conteúdo acima do conteúdo existente a menos que o usuário tenha feito uma interação específica (por exemplo, clicando em um botão).
Por exemplo, se você estiver adicionando um aviso de consentimento de cookie, você não vai querer colocá-lo no topo da página porque o conteúdo seria empurrado para baixo (a menos que você já tenha reservado um espaço para o banner de consentimento de cookie).
Ao invés disso, você deve exibir o aviso no final da página, o que evitará o deslocamento para baixo do conteúdo visível.
Para ver se o conteúdo dinâmico está causando o problema, você pode usar as ferramentas de visualização (por exemplo, Layout Shift GIF Generator).
Se você achar que o conteúdo de um plugin específico está causando alterações no layout, ajuste as configurações desse plugin ou mude para um plugin diferente.
Por exemplo, alguns plugins de consentimento de cookies são melhores do que outros quando se trata de mudanças de layout, então vale a pena experimentar com plugins diferentes se você estiver tendo problemas.
Se você quiser ir ainda mais fundo no comportamento de plugins, você pode usar uma ferramenta de monitoramento de desempenho de aplicativos. Se você hospedar com Kinsta, a ferramenta APM da Kinsta está disponível gratuitamente no seu painel MyKinsta, ou você pode encontrar outras ferramentas APM.
Para ajudar você a testar plugins, você também pode usar o ambiente de teste da Kinsta ou a ferramenta de desenvolvimento local DevKinsta.
Use o CSS Transform Property para animações sempre que possível
Se você estiver usando animações em seu site, estas podem ser outro culpado comum por mudanças de layout.
Para evitar problemas com animações que causam mudanças de layout, você deve usar a função CSS Transform para animações ao invés de outras táticas:
- Ao invés de usar as propriedades de altura e largura, use transform: scale()
- Se você quiser mover elementos, use transformar: translate() em vez de cima, baixo, direita, ou esquerda
Esta é mais uma dica técnica, então é improvável que você precise fazer isso a menos que você esteja adicionando seu próprio CSS. Para saber mais, você pode ler a página do Google no CLS e animações/transições.
Resumo
Se o seu site tem uma alta pontuação do Cumulative Layout Shift, é importante corrigi-la tanto para criar uma melhor experiência para seus visitantes humanos quanto para maximizar o desempenho do seu site nos resultados de pesquisa do Google.
Dois dos problemas mais comuns são a falta de tamanhos de imagem/embed e problemas de carregamento de caracteres. Se você resolver isso, você deve conseguir obter uma pontuação melhor.
Outros sites podem precisar ir mais longe e se aprofundar no carregamento de anúncios, conteúdo dinâmico e animações. Se você mesmo está lutando para implementar estes tipos de otimização, você pode considerar trabalhar com uma agência WordPress ou com um freelancer.
Para saber mais sobre o Core Web Vitals, você pode ler o guia completo da Kinsta para Core Web Vitals.
E se você quer um provedor de hospedagem de sites WordPress que possa ajudá-lo a criar um site de alto desempenho que se saia bem no Core Web Vitals, considere o uso da hospedagem gerenciada de WordPress da Kinsta – podemos migrar seus sites WordPress gratuitamente!
Deixe um comentário