Completando a série das métricas voltadas para experiência do usuário temos o CLS – Cumulative layout Shift – que mede a estabilidade visual de uma página.
Você alguma vez lendo uma notícia, um conteúdo qualquer ao tentar clicar num link a tela se move e você acabou clicando em uma propaganda? Esse tipo de experiência pode levar a perda de usuários. É isso que o CLS objetiva medir.
Segundo o Google, para um site oferecer uma boa experiência do usuário, deve se esforçar para ter uma pontuação CLS de 0,1 ou menos.
Como funciona o CLS?
O CLS mede a soma total de todas as pontuações de mudanças de layout individual para cada alteração inesperada durante toda a vida útil de uma página. Quanto maior o número, indica que mais movimentações de layout ocorreram na página.
As mudanças de posições dos elementos podem ser geradas, por exemplo, por imagens sem dimensões definidas, pela substituição de fontes (fontes do Google) ou ainda por anúncios que são carregados dinamicamente. Todas essas situações impactam negativamente no CLS do seu site.
Analisando a home do site da rede de academias Body Tech é possível encontrar 3 LS (layout sifts) que impactam o CLS do site conforme destacado abaixo na imagem.
Como melhorar o CLS do meu site?
O Google lista algumas ações e atividades que devem ser consideradas no desenvolvimento do seu site:
- Inclua atributos de tamanho nas imagens e elementos de vídeo ou reserve o espaço necessário com algo como caixa de proporção de aspecto CSS.
- Se seu site utiliza lazy load para imagens, garanta que a troca não mude a posição dos elementos.
- Busque utilizar fontes de sistema.
- Dê preferência para animações de transformação a animações de propriedades que acionam mudanças de layout.
- Para anúncios garanta uma área de tamanho fixo para eles até que sejam carregados.
Ferramentas para medir o CLS
Assim como mencionei para o LCP (Largest Contentful Paint) e para o FID (First Input Delay) as principais ferramentas para medir o CLS por tipo de medição são:
Medições de laboratório: consideram o cenário e o dispositivo realizado no contexto do teste
Medições de campo: considera o desempenho e as interações dos usuários reais
Para entender a diferença entre medição de laboratório e medição de campo veja no meu post anterior clicando aqui.
Abaixo um exemplo da medição de laboratório utilizando o Lighthouse para o site da rede de academias SmartFit.
Abaixo analisando a performance da página a partir do navegador do Chrome é possível observar 3 mudanças de layouts que impactam no CLS do site. No “Summary” mostra a mudança de local e tamanho do componente.
De acordo com o Google, o LCP, o FID e o CLS são os indicadores que formam o Core Web Vitals e objetivam medir a experiência do usuário. A otimização dessas métricas é a chave para o sucesso de longo prazo dos sites. É através delas que podemos identificar oportunidades de melhorias que entregam valor a experiência do usuário.
Falando de experiência do usuário veja aqui um roteiro simples de testes de usabilidade do tipo “faça-você-mesmo”.
Gestão de produto & Performance 