Corrigir Erro de Problema CLS nos Core Web Vitals no GSC

Com a introdução dos Core Web Vitals no GSC, o Google deixou claro que considerará os Web Vitals para páginas como um fator de classificação. Isso funcionará junto com outros fatores de classificação do Google, como Velocidade da Página, HTTPS, Amigabilidade para Dispositivos Móveis e Navegação Segura. Não muitos detalhes foram divulgados até agora, mas o Google Search Console começou a mostrar relatórios para os Core Web Vitals.

Consiste em três métricas de desempenho da web;

1. LCP: Largest Contentful Paint
2. FID: First Input Delay
3. CLS: Cumulative Layout Shift

Não há muitas informações disponíveis no momento sobre como você pode corrigir esses problemas, mas existem algumas práticas que podem ajudá-lo a resolver o Cumulative Layout Shift (CLS) ‘ Mais do que’ para suas páginas da web.

O que é Cumulative Layout Shift?

É uma métrica de página que relata a estabilidade da página. Em termos simples, quando você carrega uma página da web, começa a ler ou realizar qualquer ação, e se de repente o conteúdo ou os elementos da página da web pulam ou mudam, isso pode causar problemas levando em consideração a experiência de visualização dos usuários.

CLS mede a soma total de todas as pontuações de mudança de layout individuais para cada mudança de layout inesperada que ocorre durante toda a vida útil da página.

O exemplo acima mostra que um carregamento repentino de elementos acima da caixa de confirmação de pedido causou um clique acidental. O CLS é a média de todas essas mudanças de conteúdo da página.

Para proporcionar uma boa experiência ao usuário, os sites devem se esforçar para ter uma pontuação CLS inferior a 0.1

O que causa um alto CLS?

Pode haver uma série de problemas que podem causar um CLS mais alto, mas vou apontar algumas das principais razões;

• Refluxo de Conteúdo de Carregamento Preguiçoso
• Imagens sem dimensões
• Injeção de Anúncios
• Embeds e iframes sem dimensões
• Um conteúdo esperando para carregar devido a uma resposta lenta

Refluxo de Conteúdo de Carregamento Preguiçoso

O Carregamento Preguiçoso é um ótimo plugin que carrega as imagens apenas quando uma página é rolada e o conteúdo entra na área de visualização. Mas muitas vezes isso faz com que o conteúdo se desloque para cima e para baixo, causando refluxo, onde o conteúdo abaixo ou ao redor da imagem é empurrado para dar espaço à imagem recém-carregada.

Injeção de Anúncios

Os anúncios são um dos maiores contribuintes para mudanças de layout na web, empurrando o conteúdo visível que você está visualizando para baixo na página. Isso acontece ao carregar as unidades de anúncio após a página ser carregada, causando um Jank significativo.

Elemento Esperando para Carregar devido à Resposta Lenta

Às vezes, devido a uma resposta HTTP lenta, alguns elementos podem levar algum tempo para carregar, fazendo com que o conteúdo se desloque para cima ou para baixo.

Como corrigir o erro de alto CLS nos Web Vitals?

Se as imagens demoram a carregar e o conteúdo ocupa espaço para as imagens. Então, quando o conteúdo carrega, ele desloca o conteúdo para baixo, causando instabilidade no layout.

Para imagens que causam Mudança de Conteúdo (Jank), reserve o espaço necessário com caixas de proporção de aspecto CSS. Essa abordagem garante que o navegador possa alocar a quantidade correta de espaço no documento enquanto a mídia está carregando. Você pode ler este post para Carregamento de Imagem Sem Jank.

Imagens carregadas preguiçosamente também podem causar o problema, elas podem criar um grande espaço antes de ocupar o espaço da imagem. Se você está enfrentando o problema de Refluxo de Conteúdo devido ao Carregamento Preguiçoso de imagens, você pode ler este artigo para as soluções.

Se você estiver colocando anúncios no conteúdo, certifique-se de que os deslocamentos sejam eliminados reservando o tamanho do slot. Use um espaço reservado se não houver anúncio retornado, em vez de colapsar o espaço reservado. Se você estiver usando WordPress, um bom plugin de anúncios como Ad-Inserter cuidará de manter o espaço correto para os anúncios, para que você não precise se preocupar.

Evite conteúdo dinâmico, o conteúdo dinâmico é aquele que é inserido após a página ser carregada. Especialmente o conteúdo acima da dobra, por exemplo, newsletters, inscrições, postagens relacionadas no DOM do conteúdo. Evite carregar esse tipo de conteúdo acima da dobra, se possível, tente usar uma caixa pop-up.

Uma resposta HTTP lenta do servidor também pode causar Instabilidade de Conteúdo. Se você estiver usando um CDN e ele levar muitos milissegundos para carregar os elementos pretendidos e isso causar o conteúdo a pular, então você precisa criar um espaço no DOM ou sincronizar o carregamento com outros elementos.

Existem também outras causas para um alto CLS, você pode encontrar um guia detalhado para otimizar o CLS no site oficial do Web.Dev

Conclusão: O post não contém soluções técnicas ou relacionadas a código, mas dá uma visão geral do que exatamente causa o problema e como você pode abordar a correção do problema.

Se você tiver alguma opinião sobre Corrigir Erro de Problema CLS nos Core Web Vitals no GSC, sinta-se à vontade para deixar um comentário abaixo. Além disso, inscreva-se em nosso canal do YouTube DigitBin para tutoriais em vídeo. Saúde!