Deslocamento cumulativo de layout (CLS)

O que é Cumulative Layout Shift (CLS)?

O CLS (Cumulative Layout Shift) é uma métrica do Core Web Vitals desenvolvida pelo Google para medir a estabilidade visual de uma página da Web. Ela quantifica o total de todas as mudanças inesperadas de layout que ocorrem durante toda a vida útil da página. As mudanças de layout ocorrem quando um elemento visível muda de posição de um quadro renderizado para o próximo.

Como o CLS é medido

As pontuações do CLS variam de 0, representando nenhuma mudança, a valores acima de 0, indicando vários graus de instabilidade. A fórmula considera a fração de impacto e a fração de distância de cada deslocamento, calculando o quanto os elementos se movem e quanto da janela de visualização eles cobrem.

Interpretação da pontuação do CLS

• Bom: 0 - 0,1
• Precisa melhorar: 0.1 - 0.25
• Ruim: acima de 0,25

Por que o CLS é importante?

O CLS é essencial para a experiência do usuário, pois mudanças inesperadas de layout podem causar frustração no usuário. Por exemplo, se um usuário estiver prestes a clicar em um botão e o layout mudar, fazendo com que ele clique em outra coisa sem querer, isso pode resultar em uma experiência ruim para o usuário e na possível perda de conversões.

Causas comuns de CLS ruim

1. Imagens sem dimensões:

   • A inclusão de imagens em seu HTML sem especificar a largura e a altura pode causar mudanças de layout, pois o navegador não sabe quanto espaço deve ser alocado inicialmente.

2. Anúncios, incorporações e iframes sem dimensões:

   • Esses elementos podem ser carregados dinamicamente e causar mudanças de layout se suas dimensões não forem especificadas com antecedência.

3. Conteúdo injetado dinamicamente:

   • A adição de conteúdo acima do conteúdo existente no DOM pode empurrar os elementos para baixo, causando deslocamentos.

4. Fontes da Web que causam FOIT/FOUT:

   • O Flash of Invisible Text (FOIT) e o Flash of Unstyled Text (FOUT) podem causar mudanças de layout à medida que o navegador carrega fontes da Web.

Práticas recomendadas para minimizar o CLS

1. Incluir atributos de tamanho em imagens e vídeos:

   • Sempre defina a largura e a altura das imagens e dos vídeos no HTML para reservar espaço no layout antes que eles sejam carregados.

2. Reserve espaço para anúncios e incorporações:

   • Use CSS para definir dimensões para espaços de anúncio, iframes e incorporações para evitar mudanças de layout quando eles forem carregados.

3. Evite injetar conteúdo dinamicamente sobre o conteúdo existente:

   • Adicione novo conteúdo abaixo da dobra ou dentro de contêineres que já tenham um espaço reservado.

4. Use estratégias de carregamento de fontes:

   • Utilize a propriedade CSS font-display para controlar como as fontes da Web são exibidas e minimizar as mudanças devido a FOIT/FOUT.

5. Use CSS Transform para animações:

   • Use a propriedade transform em vez de top, bottom, left ou right para animar elementos sem causar mudanças de layout.

Conclusão

O CLS (Cumulative Layout Shift, mudança cumulativa de layout) é uma métrica vital para garantir uma experiência de usuário estável e visualmente atraente. Ao compreender os fatores que contribuem para as mudanças de layout e implementar as práticas recomendadas para minimizá-las, é possível melhorar a pontuação CLS da sua página da Web e aumentar a satisfação geral do usuário.

Para obter mais informações sobre como aprimorar o CLS e outros Core Web Vitals, considere explorar a documentação do Google Web Vitals.