09 / fev / 2024
On-page
7 MIN.

Cumulative Layout Shift (CLS) – Veja como funciona

Rodrigo Botinhão

CEO e Fundador - Gear SEO

Cumulative Layout Shift (CLS) – Veja como funciona
Sumário

Já aconteceu de você estar lendo um artigo online e, de repente, alguma coisa mudar na página sem que você tenha clicado em nada? Ou então, estar prestes a clicar em algum link que se move, de forma totalmente inesperada, e você acabar clicando em outra coisa?

Isso tem a ver com a estabilidade da página e, na maioria das vezes, esses tipos de experiências são apenas irritantes. Porém, é importante estar atento, pois essas alterações podem causar danos reais em alguns casos.

Para monitorar ocorrências como essa no seu site, há o Cumulative Layout Shift (CLS). Ele é uma métrica centrada no usuário e serve para mensurar a estabilidade visual de uma página. O CLS também ajuda a quantificar a frequência com que os usuários experimentam alterações inesperadas de layout.

Um CLS baixo ajuda a garantir que a página seja agradável.

O que é o CLS?

O CLS é responsável por medir a soma das pontuações de mudança de layout individual da página para cada mudança de layout inesperada que ocorre durante toda a vida útil da página.

É importante entender que a mudança de layout acontece sempre que um elemento visível muda sua posição de um quadro renderizado para o próximo. Confira abaixo os detalhes de como são calculadas as pontuações de mudança de layout individuais.

CLS - Cummulative Layout ShiftO que é uma pontuação aceitável de CLS?

Para oferecer uma experiência de usuário satisfatória, é recomendável que os sites tenham uma pontuação CLS inferior a 0,1.

Por que esses movimentos inesperados acontecem?

Esses movimentos inesperados do conteúdo da página ocorrem, geralmente, porque os elementos da página são carregados de forma assíncrona, ou então, são adicionados dinamicamente nas páginas acima do conteúdo que já existe.

As causas podem ser desde uma fonte com comportamento estranho, que acaba sendo carregada maior do que o normal, ou anúncios de terceiros, que se redimensionam dinamicamente, se sobrepondo aos demais elementos da página.

Então, para que esse problema não passe despercebido pela equipe de desenvolvimento do site, é importante fazer uso da métrica CLS. Medindo a frequência dessa situação, é possível solucioná-la rapidamente, evitando que isso aconteça com usuários reais.

Mudanças de layout em detalhes

As mudanças de layout ocorrem apenas quando os elementos existentes na página mudam sua posição inicial. No entanto, se um novo elemento é adicionado ou um existente muda de tamanho, ele não é considerado instável — desde que não faça com que outros elementos visíveis mudem sua posição inicial.

Na imagem acima há um elemento que ocupa metade da janela de visualização em um quadro. Então, no próximo quadro, o elemento é deslocado para baixo em 25% da altura da janela de visualização. Essa mudança é caracterizada como um elemento instável, ocasionando o aumento da métrica CLS.

Na figura acima, o botão “Click Me!” é inserido na parte inferior do bloco de texto cinza, empurrando o conteúdo do bloco verde para baixo e, parcialmente, para fora da janela de visualização. Nesse exemplo, a caixa cinza acaba aumentando de tamanho, mas a sua posição inicial não muda, portanto, não é considerado um elemento instável na página.

Nesse caso, o botão “Click Me!” foi acrescentado à página e, por isso, a sua posição inicial não muda, ou seja, não é caracterizado como um elemento instável.

Já o bloco verde mudou a sua posição inicial, sendo movido para fora da janela. Sendo assim, ele é considerado um elemento instável e será registrado pelo CLS como uma ocorrência de mudança de layout inesperada.

Mudanças de layout esperadas vs. inesperadas

Nem todas as mudanças de layout são ruins. Muitas aplicações na internet frequentemente mudam os elementos iniciais nas páginas de posições. Elas só são consideradas ruins quando o visitante não está esperando por essa alteração.

Por outro lado, as mudanças de layout que ocorrem quando há uma interação do visitante — clicando em um link, pressionando um botão ou digitando em uma caixa de pesquisa, por exemplo — geralmente são aceitáveis, desde que a mudança ocorra próxima à interação e que a relação entre o clique e a mudança fique clara para o visitante.

Por exemplo: se uma interação do visitante acionar uma outra ação que demore para ser concluída, o ideal será criar um espaço próximo dessa interação com um indicador de carregamento, para evitar uma mudança de layout instável quando a solicitação for concluída.

Se o visitante perceber que nada está sendo carregado ou não tiver noção de quanto tempo demorará, ele poderá clicar em algum outro elemento, gerando, assim, outra interação.

Como melhorar o CLS?

Para a maioria dos sites, é possível evitar mudanças inesperadas de layout seguindo alguns princípios de orientação:

  • Sempre inclua atributos de tamanho em suas imagens e elementos de vídeo. Essa abordagem garante que o navegador possa alocar a quantidade correta de espaço no documento enquanto a imagem está sendo carregada;
  • Nunca insira conteúdo acima do já existente, exceto em resposta a uma interação do usuário. Isso garante que quaisquer mudanças de layout que ocorram sejam esperadas,
  • Prefira animações de transformação a animações de propriedades que acionam mudanças de layout. Anime as transições de uma forma que forneça contexto e continuidade de um estado para outro.

Para encontrar outras técnicas de otimização do LCP, confira o documento Web.Dev.

Abaixo, separamos algumas tarefas técnicas que a Gear SEO analisa e leva em consideração, relacionadas com o LCP, de acordo com as ferramentas do Google:

Tamanho da imagem

Normalmente, as imagens representam a maioria de bytes transferidos em uma página do site, além de ocuparem um grande espaço visual. Por isso, elas podem impactar diretamente no tempo de carregamento do site.

Então, para que haja problemas por conta de carregamento e afins, é muito importante que as imagens tenham o tamanho correto, de acordo com o espaço que ocupam em suas respectivas páginas. Ao inseri-las, é preciso sempre tratá-las adequadamente para exibição na web.

Pré-carregamento de recursos (Javascript, CSS e afins)

O tempo de carregamento de uma página é definido por diversos fatores, entre eles os recursos solicitados pelos navegadores, como JavaScript, CSS e afins. Eles normalmente são solicitados em fila, quase um a um.

Realizando esse ajuste de pré-carregamento, conseguimos fazer com que o navegador solicite alguns recursos ao mesmo tempo e, assim, ele processará o recurso junto a outros elementos críticos para o carregamento da página.

WebP

WebP é um formato de imagem que possui características de qualidade e compactação superior em comparação às suas contrapartes mais antigas: JPEG e PNG.

Codificar as imagens no formato WebP significa que elas serão carregadas mais rapidamente e consumirão menos dados de celular, o que resulta em uma performance satisfatória do site, inclusive no mobile.

Abaixo, você pode conferir alguns materiais que preparamos e estão relacionados diretamente com os pontos principais do Core Web Vitals, com exemplos de pontos de melhorias:

Otimização de LCP (Largest Contentful Paint)

Interaction to Next Paint (INP)

Vamos começar um projeto de SEO com a sua empresa?

Fazer uma análise de SEO gratuita