O CLS (Cumulative Layout Shift), em português Mudança Cumulativa de Layout, é uma métrica usada para medir a estabilidade visual de um site, ou seja, para mensurar com qual frequência os elementos visuais da página mudam de maneira inesperada.
Essa é uma das principais métricas utilizadas pelo Google para ranquear uma página. Sendo assim, os sites que apresentam uma pontuação de cumulative layout shift ruim podem ser penalizados pelo buscador. Por isso, é muito importante saber como analisar e melhorar o CLS.
O que é CLS?
O CLS é uma métrica utilizada para mensurar as mudanças de layout inesperadas que ocorrem em uma página enquanto ela carrega. Essas alterações podem atrapalhar a experiência do usuário.
Além disso, o cumulative layout shift faz parte das Core Web Vitals (Principais Métricas da Web, em portugês). Isso significa que o CLS impacta diretamente no ranqueamento do site.
Uma mudança de layout ocorre sempre que um elemento visual muda de posição. Em algumas ocasiões, isso pode acontecer por causa de um comando dado pelo usuário, que pode ter clicado em um banner ou em um botão localizado na página web, por exemplo.
Quando as mudanças ocorrem dessa maneira, não há nenhum problema, já que o comando foi dado pelo usuário e, portanto, ele já esperava que essas alterações fossem ocorrer.
Contudo, as mudanças ocorridas de maneira inesperada podem comprometer a nota de CLS de um site. Um exemplo de alteração não esperada é quando o usuário aguarda a página terminar de carregar para clicar em um botão e, quando isso acontece, o botão já não está mais no mesmo lugar.
Outro tipo de mudança não esperada pelo usuário é quando um banner entra na frente do texto e atrapalha a leitura. Isso é muito comum em sites que permitem propagandas de terceiros.
Como avaliar o CLS de um site?
Uma das melhores formas de avaliar o CLS de um site é usando o Google Search Console. Essa ferramenta fornece um relatório indicando qual é a pontuação do cumulative layout shift do seu site.
A pontuação dessa métrica varia de 0 a 1. Se o seu site recebeu mais de 0,25 pontos, isso significa que ele está com problemas de CLS e que, portanto, pode ser penalizado pelo Google por causa disso.
As páginas web que recebem uma pontuação entre 0,1 a 0,25 precisam de algumas melhorias. Se o seu site recebeu nota acima de 0,1, é importante fazer os ajustes necessários para melhorar a experiência do usuário e não ser penalizado pelo Google.
Como descobrir qual elemento está causando uma pontuação de CLS ruim?
Se você quiser saber exatamente qual elemento visual está impactando negativamente a pontuação do CLS do seu site, precisa usar o PageSpeed Insights, uma ferramenta prática para quem quer melhorar o desempenho da sua página no Google.
Para usar essa plataforma basta inserir a URL do seu site, então, a ferramenta vai carregar a sua página web e mostrar quais são as mudanças inesperadas de layout que ela apresenta.
Quais são as principais causas de uma pontuação ruim do CLS?
Na maioria dos casos, os elementos visuais de um site que podem prejudicar a pontuação do CLS são banners mal posicionados, principalmente aqueles que mudam o texto de lugar.
Além disso, outros elementos que podem ocasionar esse problema são fontes que demoram para carregar, imagens e vídeos mal dimensionados e código-fonte do site mal feito.
Contudo, pode ser que a pontuação ruim do CLS do seu site não seja causada por um dos componentes citados acima. Por isso, é importante contar com o auxílio de plataformas que mostram exatamente quais elementos estão causando esse problema.
Como melhorar o CLS do seu site?
Uma vez que você notou que a pontuação do CLS da sua página web está ruim, você precisa corrigir esse problema quanto antes. Caso contrário, o seu site poderá ser penalizado pelo Google.
Se o problema na sua página for causado por banners de anúncios de terceiros, o ideal é que você delimite um espaço no seu site para eles. Dessa forma, esses elementos não vão surgir de maneira inesperada e nem vão atrapalhar a experiência do usuário.
Outra forma de melhorar essa métrica é definindo dimensões (tamanho e largura) para as imagens. Somente com esse ajuste simples já é possível evitar alterações inesperadas.
Também é importante que as imagens responsivas tenham o mesmo tamanho, pois isso ajuda o navegador a calcular o espaço necessário para mostrá-las aos usuários, seja no computador ou no celular.
Além disso, para garantir uma boa pontuação para o CLS do seu site, é importante que você não coloque um conteúdo novo em cima de um já existente porque vai gerar mudanças de layout inesperadas e prejudicar a experiência do usuário.
Quais outros elementos podem impactar no desempenho de um site?
Agora que você já sabe o que é CLS e como essa métrica pode impactar no seu site, precisa conhecer outros fatores que influenciam no ranqueamento de uma página web. Por isso, vale a pena conferir o nosso artigo sobre a importância do SEO para e-commerce.
