O Cumulative Layout Shift (CLS) é uma métrica fundamental para o desempenho de sites, pois mede a estabilidade dos elementos visuais de uma página.
Esse requisito é fundamental para a experiência de navegação e para o resultado de estratégias de marketing digital. Portanto, indicadores insuficientes de CSL prejudicam imensamente o sucesso de um site.
Uma estatística da Toptal mostra que 88% dos usuários provavelmente não retornam a um mesmo site após uma má experiência.
Por isso, vamos te explicar o que é Cumulative Layout Shift na prática, como melhorar essa métrica e por que esse indicador gera um impacto tão relevante para seu projeto digital.
Boa leitura!
Cumulative Layout Shift: o que é?
O Cumulative Layout Shift é uma métrica de desempenho para site que mede o quanto os elementos de uma página se mexem inesperadamente enquanto o visitante navega.
Bons indicadores de CLS impactam positivamente a experiência do usuários e contribuem até para as métricas de SEO (Search Engine Optimization).
Ou seja, os algoritmos do Google contemplam sites com bons resultados para essa métrica com as primeiras posições nos resultados de pesquisa.
Portanto, entender o que é Cumulative Layout Shift e como melhorar os indicadores de navegação do seu site é fundamental para o sucesso de qualquer projeto digital.
Qual é o significado de CLS?
CLS é a sigla para Cumulative Layout Shift (deslocamento cumulativo de layout). Essa métrica calcula a fração de distância (o tanto que o elemento se move na área visível da página) multiplicada pela fração de impacto (tamanho e relevância do elemento).
Indicador CLS = Fração de Distância X Fração de Impacto
Portanto, a base do cálculo leva em consideração o tamanho, relevância e quantas vezes os elementos oscilam enquanto o usuário navega. Saiba mais sobre esses dois fatores!
- Fração de distância: o espaço em px (pixels) que o elemento se move sobre o tamanho do viewport (área visível da página).
- Fração de impacto: comparação entre o viewport, o tamanho do elemento e a distância desse ponto até o topo da página em px.
Esses são os elementos básicos do cálculo, mas as fórmulas dessas frações são bastante complexas e variam de ferramenta para ferramenta.
Quando o resultado está abaixo de 0,1, considera-se o CLS baixo; entre 0,1 e 0,24, o CLS é médio; já acima de 0,25, o indicador está alto.
Quanto mais baixo é o resultado, melhor é a experiência do usuário, pois é sinal de que a página é estável. Já indicadores acima de 0,25 são prejudiciais para a navegação.
O que é problema de CLS?
O problema é a deformação do layout da página durante o carregamento. Elementos visuais saem da sua posição original e prejudicam a navegação do usuário, como uma imagem que oscila e interfere na leitura do conteúdo
Imagens em alta definição e fontes tipográficas pesadas causam esse problema.
Por exemplo, o navegador precisa redimensionar imagens muito pesadas para acomodá-las nas páginas de um site. Esse procedimento a desloca inesperadamente e prejudica a experiência de navegação.
Em alguns casos, o deslocamento interfere na leitura de um artigo para blog ou faz com que o visitante não consiga clicar no link que deseja.
A frustração na experiência aumenta as métricas de taxa de rejeição (indicador que mostra usuários que entraram em uma página, mas saíram rapidamente) e prejudica seriamente o sucesso e o engajamento de um site.
Além disso, os algoritmos do Google estão de olho nos indicadores de Cumulative Layout Shift. Índices altos para essa métrica descontam pontos preciosos para o ranqueamento da página nos primeiros resultados de pesquisa.
O CLS é um dos Core Web Vitals do Google, que são três métricas específicas para melhorar a performance do site.
As outras duas são First Input Delay (FID), que mede o tempo de resposta à primeira interação do usuário na página, e o Largest Contentful Paint (LCP), que calcula o tempo de carregamento do conteúdo principal da página.
Saiba mais sobre SEO e otimize o conteúdo do seu site para brilhar no Google:
Como melhorar o Cumulative Layout Shift?
Imagens em alta definição, fontes tipográficas assíncronas e anúncios sem otimização são as causas de problemas com o CLS. Como melhorar essa métrica?
- Use uma ferramenta para redimensionar e compactar imagens;
- insira o código font-display: swap no CSS para otimizar a fonte;
- trabalhe com ferramentas de anúncios confiáveis;
A Adobe conta com um excelente recurso para redimensionar imagens de site. Já para compactar e tornar arquivo mais leve, use ferramentas on-line, como o Tinypng ou o Convertio.
O próximo passo é escolher fontes tradicionais e web-safe, como Arial, Time News Roman e Verdana, pois já constam na maioria dos dispositivos e otimizam o tempo de carregamento.
Evite utilizar um grande número de fontes e conte com o recurso swap do CSS para usar uma opção reserva enquanto a fonte principal carrega.
A hospedagem do site também é fundamental para melhorar o CLS. Escolha um servidor dedicado ou VPS para armazenar e processar os arquivos, softwares e conteúdos do seu domínio para oferecer a melhor estabilidade e velocidade de carregamento.
Por fim, utilize ferramentas famosas, como o Google Ads e o Facebooks Ads, que se preocupam com os indicadores de CLS e Core Web Vitals ao gerar os anúncios.
Cumulative layout shift no Wordpress
Melhore o Cumulative Layout Shift no Wordpress com a ajuda de alguns plugins de desempenho:
- WP Rocket: esse plugin de cache otimiza o carregamento de imagens do site e otimiza diversos outros recursos;
- Smush: reduz o tamanho das imagens sem comprometer a qualidade;
- Perfmatters: pacote completo para melhorar o desempenho do site.
Use essas ferramentas em conjunto com as dicas de otimização primárias, como redimensionamento das imagens, otimização de fontes e anúncios e, claro, a escolha do plano de hospedagem perfeito.
Cumulative Layout Shift: como melhorar com a GoDaddy?
A GoDaddy oferece diversos planos de hospedagem com recursos modernos e eficientes para melhorar o Cumulative Layout Shift e alavancar o desempenho do site.
As opções da GoDaddy oferecem:
- 99,9% de uptime;
- servidores DNS exclusivos para velocidades de carregamento 40% maior que a concorrência;
- Certificado SSL gratuito;
- capacidade de armazenamento de acordo com as necessidades do seu projeto digital, e muito mais!
Saiba mais sobre a importância de um bom plano de hospedagem para seu site com vídeo abaixo:
Leia também:
