Tag: experiência do usuário

Cumulative Layout Shift (CLS) é uma métrica fundamental de experiência do usuário que mede a estabilidade visual de uma página web. Ele quantifica a frequência e a intensidade dos deslocamentos inesperados de elementos na página, aqueles momentos frustrantes em que você está prestes a clicar em um link e a página “pula”, fazendo com que você clique no lugar errado. Como um dos Core Web Vitals do Google, o CLS tornou-se um fator crítico tanto para a experiência do usuário quanto para o ranking nos mecanismos de busca.

Este guia completo explica o que é o CLS, por que é importante, como é calculado e, o mais crucial, como você pode medir e otimizar essa métrica em seu site.

1 O Que É CLS e Por Que Ele Importa?

O Cumulative Layout Shift (CLS) é uma pontuação que mede a instabilidade visual de uma página durante todo seu ciclo de vida. Diferente de outras métricas de velocidade, o CLS não é medido em segundos, mas sim por um valor sem unidade (um “score”) – quanto menor, melhor.

• Impacto na Experiência do Usuário: Movimentos inesperados de layout são mais do que apenas irritantes. Eles podem fazer com que os usuários cliquem no botão errado, percam o lugar onde estavam lendo ou, em casos extremos, realizem uma ação indesejada, como uma compra acidental. Em dispositivos móveis, onde a tela é menor, esse problema é ainda mais pronunciado.
• Impacto no SEO e nos Negócios: Desde 2021, o CLS é um sinal de ranking conhecido para a pesquisa do Google. Um site com baixo CLS proporciona uma experiência melhor, o que pode levar a taxas de rejeição mais baixas, maior engajamento e melhores taxas de conversão. Um caso de estudo do The Telegraph mostrou que, após otimizar seu CLS, a empresa viu uma melhoria de 250% na métrica, o que direcionou mais tráfego e aumentou o tempo que os visitantes passavam no site.

2 Entendendo a Pontuação do CLS

2.1 O Que É uma Boa Pontuação?

Os benchmarks do Google para o CLS são claros:

Para passar no teste dos Core Web Vitals, pelo menos 75% das visitas à sua página devem ter uma pontuação CLS “boa” (≤ 0.1).

2.2 Como o CLS É Calculado?

A pontuação de cada deslocamento de layout individual é calculada multiplicando duas medidas:

• Fração de Impacto (Impact Fraction): Representa a porcentagem da tela (viewport) que é afetada pelo elemento instável. É a área combinada que o elemento ocupa antes e depois do deslocamento.
• Fração de Distância (Distance Fraction): Representa a distância que o elemento instável se moveu em relação à maior dimensão da tela (altura ou largura, a que for maior).

Fórmula do CLS: Pontuação do Deslocamento = Fração de Impacto × Fração de Distância 

Imagine um elemento que ocupa 50% da altura da tela e, de repente, desloca-se 25% da altura da tela para baixo. A Fração de Impacto seria de 0,75 (a união da área antes e depois), e a Fração de Distância seria de 0,25. Portanto, a pontuação desse deslocamento seria 0,75 × 0,25 = 0,1875.

O CLS final da página não é a soma de todos os deslocamentos. Em vez disso, o navegador agrupa os deslocamentos que ocorrem em rápida sucessão (em menos de 1 segundo) em “janelas de sessão” com duração máxima de 5 segundos. A pontuação CLS reportada é a maior soma de pontuações dentro de uma única janela de sessão ao longo de toda a vida da página.

2.3 Deslocamentos Esperados vs. Inesperados

Nem todo deslocamento é penalizado. Mudanças de layout que ocorrem em resposta a uma interação do usuário (como clicar em um botão para abrir um menu) são consideradas esperadas e não contribuem para o CLS, desde que ocorram dentro de uma janela de 500 milissegundos após o input. A métrica foca nos deslocamentos inesperados, que são os que realmente frustram os usuários.

3 Causas Comuns de um CLS Ruim

Identificar a origem dos deslocamentos é o primeiro passo para corrigi-los. Eis as causas mais frequentes:

1. Imagens e Vídeos sem Dimensões: Se as tags <img> e <video> não possuem os atributos width e height, o navegador não sabe quanto espaço reservar para elas. Quando carregam, o conteúdo ao redor é empurrado para dar lugar à mídia.
2. Anúncios, Embeds e Iframes: Conteúdo de terceiros, como anúncios e vídeos incorporados, frequentemente carrega de forma assíncrona. Se o espaço não for reservado antecipadamente, sua inserção pode causar grandes deslocamentos.
3. Web Fonts: Quando um navegador renderiza o texto inicialmente com uma fonte de fallback e depois a substitui por uma fonte web carregada, a diferença no tamanho ou no espaçamento entre as fontes pode causar um refluxo de texto, deslocando o layout.
4. Conteúdo Dinâmico Injetado: Conteúdo que é adicionado ao DOM dinamicamente por JavaScript (como banners de cookies, widgets ou resultados de busca carregados via AJAX) pode empurrar o conteúdo existente se o espaço não for reservado.
5. Animações CSS Ineficientes: Animações que alteram propriedades como height, width, top ou left forçam o navegador a recalcular o layout, potencialmente causando deslocamentos. É mais eficiente usar a propriedade transform.

4 Como Medir e Identificar Problemas de CLS

Ferramentas de Laboratório (Sintéticas)

Essas ferramentas simulam o carregamento da página em um ambiente controlado e são ideais para identificar problemas durante o desenvolvimento.

• PageSpeed Insights: Fornece tanto dados de campo (de usuários reais) quanto de laboratório. A seção “Diagnose performance issues” mostra o CLS medido em laboratório e, muitas vezes, lista os elementos que causaram os deslocamentos.
• Chrome DevTools:
  • Abas “Performance” e “Experience”: Ao gravar o desempenho da página, a aba “Experience” mostrará uma lista de “Layout Shifts”. Clicar em um deles destacará na tela quais elementos se moveram.
  • Realce em Tempo Real: No painel “Rendering” das DevTools, você pode marcar “Layout Shift Regions”. As áreas da página que se deslocam serão destacadas em azul enquanto você interage com o site.

Ferramentas de Campo (Dados do Mundo Real)

Essas ferramentas medem a experiência real dos seus usuários e são cruciais para entender o problema verdadeiro.

• Chrome UX Report (CrUX): É o conjunto de dados oficial do programa Web Vitals. O PageSpeed Insights exibe um resumo desses dados na seção “Core Web Vitals”.
• Biblioteca web-vitals: Você pode usar esta biblioteca JavaScript para medir e enviar os dados de CLS dos seus usuários para seu próprio sistema de analytics, permitindo um rastreamento personalizado e detalhado.
• Google Search Console: O relatório “Core Web Vitals” no Search Console ajuda a identificar quais páginas do seu site estão com problemas para grupos de usuários reais.

5 Como Otimizar e Corrigir o CLS

1. Especifique Dimensões para Imagens e Vídeos

Sempre inclua os atributos width e height em suas tags <img>. Os navegadores modernos usam esses atributos para calcular automaticamente o aspect ratio do elemento, reservando o espaço correto mesmo antes da imagem carregar.

<img src="imagem.jpg" width="800" height="600" alt="Descrição">

Para imagens responsivas, combine os atributos com o seguinte CSS:

img {
  width: 100%;
  height: auto;
}

Isso garante que a imagem se ajuste ao container, mas o navegador já saberá a altura proporcional a partir dos atributos de dimensão.

2. Reserve Espaço para Anúncios e Iframes

Para elementos de tamanho variável, como anúncios, defina um contêiner com uma altura mínima (min-height) ou use a propriedade CSS aspect-ratio para reservar um espaço que se aproxime do tamanho final do elemento. Evite colapsar o espaço reservado se um anúncio não for carregado, pois isso também causaria um deslocamento.

3. Otimize o Carregamento de Web Fonts

• Pré-carregue Fontes Críticas: Use <link rel="preload"> para fontes essenciais, informando ao navegador para baixá-las o mais cedo possível.
• Use font-display: optional ou swap: A diretiva font-display: optional oculta o texto por até 100ms. Se a fonte não carregar nesse tempo, a fonte de fallback é usada permanentemente, evitando qualquer deslocamento posterior. Já o font-display: swap trocará para a fonte web assim que ela estiver disponível, o que ainda pode causar um deslocamento, mas é melhor do que uma FOIT (Flash of Invisible Text).
• Ajuste as Fontes de Fallback: Use as APIs de substituição de fonte (como size-adjust, ascent-override, etc.) para fazer com que a fonte de fallback se assemelhe o máximo possível à fonte web em tamanho e métricas, minimizando o deslocamento quando a troca ocorrer.

4. Estruture o Carregamento de Conteúdo Dinâmico

Ao injetar conteúdo dinamicamente (via AJAX, por exemplo), reserve espaço antecipadamente. Você pode usar um “esqueleto” (skeleton screen) ou um contêiner com altura fixa que será preenchido quando o conteúdo chegar. Isso é muito mais previsível do que injetar o conteúdo em um espaço vazio.

5. Use Transform e Opacity para Animações

Para animações que mudam a posição ou o tamanho de um elemento, prefira usar transform: translate() e transform: scale(), pois essas propriedades não trigger um novo cálculo de layout. Evite animar propriedades como height, width, top ou left.

Conclusão

O Cumulative Layout Shift (CLS) vai além de ser apenas um número em um relatório de desempenho. É a materialização técnica da frustração do seu usuário. Dominar essa métrica significa entregar uma experiência de navegação estável, profissional e confiável, que inspira confiança e satisfação em seus visitantes.

Ao seguir as práticas outlinedas neste guia – como definir dimensões para mídia, reservar espaço para conteúdo dinâmico e otimizar fontes – você não está apenas melhorando uma pontuação para o SEO. Você está removendo atritos desnecessários e criando um ambiente digital onde seus usuários podem focar no que realmente importa: o conteúdo que você oferece.

Espero que este guia completo sirva como um recurso valioso para você. A estabilidade visual é um pilar da web moderna, e dominá-la é um passo essencial para o sucesso online.