Categoria: SEO

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.

No mundo moderno do desenvolvimento web, onde os usuários acessam sites através de diversos dispositivos com diferentes tamanhos de tela e resoluções, implementar imagens responsivas tornou-se uma necessidade crucial. A técnica srcset emerge como uma solução poderosa para entregar imagens otimizadas para cada contexto, melhorando a experiência do usuário e o desempenho do site.

Neste guia completo, exploraremos desde os conceitos fundamentais até implementações avançadas do srcset, permitindo que você domine esta tecnologia essencial para o desenvolvimento web moderno.

O Que é srcset e Por Que Usá-lo?

Definindo o srcset

O srcset é um atributo HTML que permite aos desenvolvedores especificar uma lista de imagens alternativas, junto com suas respectivas características (como largura ou densidade de pixels), dando ao navegador a liberdade de escolher a imagem mais adequada baseando-se nas condições do dispositivo do usuário.

Vantagens do uso do srcset

• Melhoria de performance: Carrega imagens apropriadas para cada dispositivo
• Economia de banda: Dispositivos móveis não precisam baixar imagens desktop
• Melhor qualidade visual: Imagens nítidas em telas de alta densidade
• SEO melhorado: Sites mais rápidos são melhor rankeados
• Experiência do usuário superior: Carregamento mais rápido e visual adequado

Sintaxe Básica do srcset

Para diferentes resoluções (densidade de pixels)

<img 
  src="imagem-padrao.jpg" 
  srcset="imagem-1x.jpg 1x,
          imagem-2x.jpg 2x,
          imagem-3x.jpg 3x" 
  alt="Descrição da imagem">

Para diferentes tamanhos (largura)

<img 
  src="imagem-padrao.jpg" 
  srcset="imagem-320w.jpg 320w,
          imagem-640w.jpg 640w,
          imagem-1024w.jpg 1024w,
          imagem-1600w.jpg 1600w" 
  sizes="(max-width: 480px) 100vw,
         (max-width: 1024px) 50vw,
         800px" 
  alt="Descrição da imagem">

Entendendo os Componentes

O atributo srcset

Especifica as imagens disponíveis e suas características:

• Para densidade: imagem.jpg 2x (2x indica densidade de pixels)
• Para largura: imagem.jpg 640w (w indica largura em pixels)

O atributo sizes

Define como a imagem será exibida em diferentes breakpoints:

sizes="(condição) tamanho, 
       (condição) tamanho, 
       tamanho padrão"

O atributo src

Fornece uma fallback para navegadores que não suportam srcset.

Implementação Passo a Passo

Passo 1: Preparar as imagens

Crie múltiplas versões da mesma imagem em diferentes tamanhos:

• Exemplo: 320px, 640px, 1024px, 1600px de largura
• Use ferramentas como Photoshop, GIMP ou processamento em lote

Passo 2: Definir a estratégia de breakpoints

Baseie-se nos breakpoints do seu site:

/* Exemplo de breakpoints comuns */
@media (max-width: 480px) { /* Mobile */ }
@media (max-width: 768px) { /* Tablet */ }
@media (max-width: 1024px) { /* Laptop */ }
@media (min-width: 1025px) { /* Desktop */ }

Passo 3: Escrever o código HTML

<img 
  src="imagem-640w.jpg" 
  srcset="imagem-320w.jpg 320w,
          imagem-640w.jpg 640w,
          imagem-1024w.jpg 1024w,
          imagem-1600w.jpg 1600w" 
  sizes="(max-width: 480px) 100vw,
         (max-width: 1024px) 50vw,
         800px" 
  alt="Descrição detalhada da imagem"
  loading="lazy">

Passo 4: Testar em diferentes dispositivos

Use ferramentas de desenvolvedor para simular diferentes dispositivos e verificar se as imagens corretas estão sendo carregadas.

Exemplos Práticos

Exemplo 1: Imagem full-width em um hero banner

<img 
  src="hero-medium.jpg" 
  srcset="hero-small.jpg 640w,
          hero-medium.jpg 1280w,
          hero-large.jpg 1920w,
          hero-xlarge.jpg 2560w" 
  sizes="100vw" 
  alt="Banner principal do site"
  class="hero-image">

Exemplo 2: Galeria de produtos responsiva

<img 
  src="product-480w.jpg" 
  srcset="product-240w.jpg 240w,
          product-480w.jpg 480w,
          product-720w.jpg 720w,
          product-960w.jpg 960w" 
  sizes="(max-width: 320px) 280px,
         (max-width: 480px) 440px,
         (max-width: 768px) 340px,
         280px" 
  alt="Nome do produto"
  class="product-image">

Exemplo 3: Imagem com art direction usando picture + srcset

<picture>
  <source media="(max-width: 599px)" 
          srcset="imagem-retrato-640w.jpg 1x,
                  imagem-retrato-1280w.jpg 2x">
  <source media="(min-width: 600px)" 
          srcset="imagem-paisagem-1024w.jpg 1x,
                  imagem-paisagem-2048w.jpg 2x">
  <img src="imagem-paisagem-1024w.jpg" 
       alt="Descrição da imagem">
</picture>

Otimização e Boas Práticas

Escolha dos tamanhos de imagem

• Considere os tamanhos de viewport mais comuns
• Inclua pelo menos 3 variações para cobertura adequada
• Adicione uma versão de fallback de tamanho médio

Nomenclatura consistente

Use padrões claros para nomear arquivos:

• nome-imagem-320w.jpg
• nome-imagem-640w.jpg
• nome-imagem-1024w.jpg

Compressão adequada

• Use formatos modernos como WebP quando possível
• Mantenha qualidade balanceada com tamanho de arquivo
• Considere ferramentas como Sharp, ImageMagick ou serviços cloud

Lazy loading

Combine com loading=”lazy” para melhor performance:

<img srcset="..." sizes="..." alt="..." loading="lazy">

Trabalhando com o Elemento Picture para Art Direction

Para casos onde não basta redimensionar, mas sim recortar ou usar imagens completamente diferentes:

<picture>
  <source media="(max-width: 799px)" 
          srcset="imagem-mobile-320w.jpg 320w,
                  imagem-mobile-640w.jpg 640w"
          sizes="100vw">
  <source media="(min-width: 800px)" 
          srcset="imagem-desktop-1024w.jpg 1024w,
                  imagem-desktop-2048w.jpg 2048w"
          sizes="50vw">
  <img src="imagem-desktop-1024w.jpg" 
       alt="Descrição da imagem">
</picture>

Ferramentas e Recursos Úteis

Geradores de srcset

• Sharp (Node.js): Para processamento em lote
• Responsive Breakpoints: Gerador online
• gatsby-plugin-image: Para usuários do Gatsby
• next/image: Para usuários do Next.js

Ferramentas de teste

• DevTools do navegador (Network tab)
• WebPageTest
• Lighthouse
• BrowserStack para testes cross-device

Serviços de imagem responsiva

• Cloudinary
• Imgix
• Akamai Image Manager
• WordPress com srcset nativo

Solução de Problemas Comuns

Navegador não escolhe a imagem esperada

• Verifique a sintaxe do sizes
• Confirme se os viewports estão corretos
• Teste em diferentes navegadores

Imagens não carregando

• Verifique os caminhos dos arquivos
• Confirme se as imagens existem no servidor

Problemas de cache

• Use versionamento ou busting de cache
• Nomeie arquivos diferentes para diferentes versões

Falta de suporte em navegadores antigos

• O atributo src serve como fallback
• Considere polyfills se necessário

Considerações de SEO e Acessibilidade

Textos alt sempre descritivos

<!-- Ruim -->
<img srcset="..." alt="imagem1">

<!-- Bom -->
<img srcset="..." alt="Pessoa usando laptop em café com vista para montanhas">

Combine com microdata quando apropriado

<img srcset="..." alt="Produto XYZ" itemprop="image">

Velocidade como fator SEO

• Imagens otimizadas melhoram o Core Web Vitals
• LCP (Largest Contentful Paint) beneficia-se de imagens adequadas

Conclusão

Implementar imagens responsivas com srcset é uma habilidade essencial para desenvolvedores web modernos. Esta técnica oferece benefícios tangíveis em performance, experiência do usuário e SEO, tornando-a indispensável em projetos profissionais.

Comece implementando srcset em componentes críticos como hero images e galerias, depois expanda gradualmente para todo o site. Lembre-se de testar rigorosamente em diferentes dispositivos e condições de rede para garantir a melhor experiência possível para todos os usuários.

Com as práticas e técnicas apresentadas neste guia, você está equipado para criar experiências visuais otimizadas que se adaptam perfeitamente a qualquer dispositivo ou contexto de visualização.