Como medir e melhorar o CLS do seu site com o Dev Tools do Chrome
Aprenda como medir e melhorar as mudanças cumulativas de layout (CLS - Cumulative Layout Shift) das páginas do seu site que podem prejudicar a classificação no Google.
PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO
Se você tem um site e se preocupa com a classificação dele no Google, com certeza já está por dentro das Principais Métricas da Web (Core Web Vitals), certo? Se está, seu site foi reprovado na Experiência da Página do Search Console?
▶ Se preferir, acesse "Como medir o CLS do seu site com o Dev Tools do Chrome" no YouTube.
Essas métricas mostram como anda a Experiência do Usuário ao interagir com seu site.
A CLS (Cumulative Layout Shift) é uma métrica que serve para medir a estabilidade visual da página, pois ajuda a quantificar com que frequência os usuários experimentam mudanças inesperadas no layout.
O maior impacto negativo dessa métrica acontece quando está com valor ruim, ou seja, maior que 0,1. Ele é notado principalmente em celulares, quando o usuário vai clicar em um item e acaba clicando em outro sem querer, por causa de mudanças repentinas nas posições dos elementos.
Para medir os valores de CLS, você pode usar o Google PageSpeed ou mesmo conferir dentro do Google Search Console.
Como medir o CLS com o Dev Tools do Chrome
Você também pode medir o CLS usando o Dev Tools do Google Chrome, seguindo os passos a seguir:
- Acesse a página do seu site desejada
- Abra o Dev Tools em Menu Principal > Ferramentas > Desenvolvedor (CTRL + SHIFT + I)
- Acesse o Menu Principal do Dev Tools > Mais Ferramentas > Renderização (Rendering)
- Marque as opções Layout Shift Regions e Core Web Vitals
- Recarregue a página (F5)
- Utilize a rolagem de tela para navegar na página
- Observe o valor do CLS no canto superior direito
Como corrigir o CLS alto
O CLS pode ser melhorado com as seguintes tarefas de otimização:
- Sempre inclua atributos de dimensões exatas nas imagens
- Se seu site utiliza lazy load para imagens, garanta que a troca não mude a posição dos elementos
- Se seu site utiliza fonte personalizada, considere trocar font-display:swap por block
- Se seu site utiliza anúncios, garanta uma área de tamanho fixo para eles, até que sejam carregados
O Google está dando muito importância para a Experiência dos Usuários, portanto se preocupe em corrigir isso em todas as páginas do seu site, além de oferecer conteúdo de qualidade.
E não se esqueça que o CLS é apenas uma das Principais Métricas da Web.
Então é isso, eu espero que você tenha gostado desta publicação. Fique à vontade para compartilhar nas suas redes sociais para ajudar na divulgação e crescimento do site.
Aproveite para se inscrever no meu canal do YouTube e também na News do site pra ficar por dentro das novidades em artigos, tutoriais e cursos online.
Abraço e até a próxima!