O que é mudança cumulativa de layout?

Web.dev define Cumulative Layout Shift (CLS) como:

“O 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.

Uma mudança de layout ocorre sempre que um elemento visível muda sua posição de um quadro renderizado para o próximo. ”

Muitas vezes, esse é o primeiro obstáculo para os proprietários de sites, pois (a menos que você já tenha um alto nível de conhecimento nessa área) essa definição levanta mais perguntas do que respostas. Em termos gerais, CLS é quando os elementos da página mudam de posição durante o carregamento da página, ou:

“Por que isso acabou de se mover?!”

Por que o CLS é ruim?

A atualização do Core Web Vitals visa estimular os proprietários de sites a oferecer uma experiência fantástica ao usuário. Ter um site que demonstra um alto nível de CLS provavelmente se manifestará na movimentação de peças importantes de conteúdo, o que pode impedir a entrada do usuário.

No caso de elementos como conteúdo escrito ou imagens, o efeito provavelmente será bastante cosmético, mas não menos incômodo. Considere um usuário real tentando visualizar uma página de destino em seu site, quando de repente o texto que ele está lendo salta e ele tem que pesquisar a página para encontrar onde está.

Em seguida, considere uma versão um pouco mais séria do CLS, em que um usuário clica em sua call-to-action ou botão principal e a página muda, impedindo que sejam convertidos corretamente. Embora o movimento possa representar apenas um pequeno número de pixels, se cada estágio de seu caminho de conversão incluir CLS, você corre o risco de perder um cliente, não importa quão bom seja o resto do site.

O que causa o CLS?

Como muitos outros na comunidade SEO, a equipe da Coast passou um tempo trabalhando em sites de clientes para descobrir a causa de pontuações baixas do Core Web Vitals. No caso do CLS, a maioria das pontuações baixas é causada por um dos (mas não se limitando a) o seguinte:

Fontes personalizadas sendo carregadas de maneira ineficiente

Cobrimos isso brevemente na parte 2 desta série, que introduziu as solicitações de chave de pré-carregamento. Quando seu site for carregado pela primeira vez, você poderá ver rapidamente uma exibição de fonte diferente antes que a fonte escolhida seja ativada. Ocasionalmente, você pode até ver um espaço em branco onde seu texto deveria estar.

Esses problemas são conhecidos respectivamente como “flash of unstyled text” e “flash of invisible text”, e podem ser contabilizados em sua pontuação baixa no CLS.

Imagens responsivas sendo carregadas de maneira ineficiente

Abordamos a otimização de imagens na parte 1 desta série, onde mencionamos brevemente que as imagens podem ter um efeito quando você mede o CLS. As imagens normalmente são a fonte de pontuações CLS fracas quando não foram otimizadas ou dimensionadas de maneira adequada.

Quando uma imagem é carregada em seu site, é útil se o servidor souber o quão grande é a quantidade de espaço para a imagem. Dessa forma, ele pode fornecer uma imagem no tamanho correto. Se as dimensões não estiverem incluídas, o espaço para a imagem pode não ser alocado até que o download seja iniciado.

Conteúdo injetado dinamicamente

Após o advento do GDPR e com a situação contínua do COVID, a maioria dos sites está repleta de barras superiores, inferiores e pop-ups que visam compartilhar informações importantes. Infelizmente, esses mesmos elementos geralmente são responsáveis ​​por algum nível de CLS se não forem carregados corretamente.

Uma maneira fácil de encontrar a fonte do CLS

O objetivo de todos esses artigos é ajudar a transformar o Core Web Vitals em um conjunto de tarefas simples e acionáveis ​​que qualquer proprietário de site pode usar para melhorar sua posição atual. Com isso em mente, você pode ficar feliz em descobrir que existe uma maneira realmente fácil de encontrar a fonte do CLS em seu site usando ferramentas às quais todos têm acesso.

1. Visite sua página de destino
2. Clique com o botão direito do mouse e clique em “Inspecionar”
3. Selecione a guia “Desempenho” no módulo de inspeção que se abre (clique na divisa dupla para ver mais opções se você não puder ver o desempenho imediatamente)
4. Clique no botão “Gravar” no canto superior esquerdo da janela
5. Atualize sua página de destino
6. Quando a página terminar de carregar, clique no botão parar no módulo de inspeção

Você deve ver algo como o abaixo (pode ser necessário expandir as seções dentro do módulo de inspeção para encontrar esta visualização, caso não a tenha acessado antes):

Cada bloco vermelho que você pode ver representa CLS. Passar o mouse sobre cada instância deve destacar o elemento que causou a mudança em sua página de destino, permitindo que você identifique rapidamente as áreas problemáticas. Você pode até descobrir que alguns dos recursos de todo o site estão causando o problema, o que significa que você só precisa fazer uma correção.

Como corrigir problemas de CLS

É aqui que as coisas ficam um pouco complicadas. Dependendo dos problemas que você está vendo, você pode tentar aplicar algumas das táticas de nossos artigos anteriores, o que pode ajudar a reduzir sua pontuação CLS.

No entanto, alguns problemas do CLS podem ser específicos ao seu site, ao tema que você está usando ou mesmo a quaisquer plug-ins necessários para carregar a página. Outras fontes comuns de problemas de CLS que nossa equipe encontrou são:

• Animação de elemento
• Carregamento de fonte dentro de plug-ins

Em alguns casos, você pode desativar as animações ou encontrar uma maneira de estabilizar as fontes nos plug-ins para reduzir sua pontuação CLS, mas, dependendo do plug-in de escolha, isso nem sempre é possível. Nesses casos, você pode precisar da ajuda de um desenvolvedor.

Outra aterrissagem feliz

Esperançosamente, ao seguir os conselhos incluídos em todos esses artigos, você está no caminho certo para que seu site seja aprovado no Core Web Vitals e no aumento de classificação que o Google promete. No entanto, vale lembrar que esta é uma atualização ENORME, então se você não está progredindo muito, pode valer a pena ter seu site analisado por um especialista em SEO.

Além disso, os problemas que exploramos não se aplicam necessariamente a todos os sites, portanto, sua primeira parada deve ser sempre uma análise completa de seu próprio site para que você possa entender melhor onde (e como) concentrar seus esforços.

Se desejar ajuda com este processo, sinta-se à vontade para entrar em contato com nossa equipe  podemos ajudá-lo a começar.