WebVitals: O que é CLS (Deslocamento Cumulativo de Layout)

O Deslocamento Cumulativo de Layout (CLS) é uma métrica importante e centrada no usuário para medir a estabilidade visual de uma página e ajuda a quantificar com que frequência os usuários experimentam mudanças inesperadas no layout – um CLS baixo ajuda a garantir que a página seja agradável.

Este Artigo é baseado na Documentação Oficial disponível aqui.

Entendendo o Deslocamento Cumulativo de Layout (CLS)

Você já leu um artigo on-line quando algo de repente muda na página? Sem aviso, o texto se move e você perdeu seu lugar. Ou ainda pior: você está prestes a clicar em um link ou botão, mas no instante em que seu dedo se mexe – BOOM – o link se move e você acaba clicando em outra coisa!

Na maioria das vezes, esse tipo de experiência é apenas irritante, mas, em alguns casos, pode causar danos reais.

O Google até montou um vídeo de exemplo:

O movimento inesperado do conteúdo da página geralmente ocorre porque os recursos são carregados de forma assíncrona ou os elementos DOM são adicionados dinamicamente à página acima do conteúdo existente.

O culpado pode ser uma imagem ou vídeo com dimensões desconhecidas, uma fonte renderizada maior ou menor que seu substituto ou um anúncio ou widget de terceiros que se redimensiona dinamicamente.

Se você usa LazyLoad sem ter um CDN rápido pode sentir esse atraso e o deslocamento do conteúdo na sua página.

Aqui no blog eu coloco anúncios no corpo da página e acredito que tenho que rever essa estratégia com ads.

O que torna esse comportamento ainda mais problemático é que o modo como um site funciona no desenvolvimento geralmente é bem diferente de como os usuários o experimentam.

O conteúdo personalizado ou anúncios de terceiros geralmente não se comporta da mesma forma no desenvolvimento e na produção.

As imagens de teste já estão no cache do navegador do desenvolvedor e as chamadas de API executadas localmente geralmente são tão rápidas que o atraso não é perceptível.

A métrica Deslocamento Cumulativo de Layout (CLS) ajuda a solucionar esse problema, medindo a frequência com que ocorre para usuários reais.

O que é a métrica CLS do WebVitals?

O CLS mede a soma total de todas as pontuações de mudança de layout individuais para cada mudança de layout inesperada que ocorre durante toda a vida útil da página.

Uma mudança de layout ocorre sempre que um elemento visível muda sua posição de um quadro para o próximo.

Veja abaixo os detalhes sobre como as pontuações dos turnos de layout individuais são calculadas.

Qual é uma boa pontuação no CLS?

Para fornecer uma boa experiência do usuário, os sites devem se esforçar para ter uma pontuação CLS menor que 0,1.

cls 8x2 1 WebVitals: O que é CLS (Deslocamento Cumulativo de Layout)

Para garantir que você esteja atingindo essa meta para a maioria dos usuários, um bom limite a ser medido é o percentil 75 de carregamentos de páginas, segmentado em dispositivos móveis e desktop.

Mais detalhes sobre Mudança de Layout

As mudanças de layout são definidas pela API de Instabilidade de Layout, que relata as entradas de mudança de layout sempre que um elemento visível com a viewport altera sua posição inicial (por exemplo, sua posição superior e esquerda no modo de gravação padrão) entre dois quadros. Tais elementos são considerados elementos instáveis.

Observe que as mudanças de layout ocorrem apenas quando os elementos existentes alteram sua posição inicial.

Se um novo elemento é adicionado ao DOM ou um elemento existente altera o tamanho, ele não conta como uma mudança de layout – desde que a alteração não faça com que outros elementos visíveis alterem sua posição inicial.

Pontuação de mudança do layout

Para calcular a pontuação da mudança de layout, o navegador examina o tamanho da janela de visualização e o movimento de elementos instáveis na janela de visualização entre dois quadros renderizados.

A pontuação da mudança de layout é um produto de duas medidas desse movimento: a fração de impacto e a fração de distância (ambas definidas abaixo).

layout shift score = impact fraction * distance fraction

Fração de impacto

A fração de impacto mede como os elementos instáveis afetam a área da janela de visualização entre dois quadros.

A união das áreas visíveis de todos os elementos instáveis para o quadro anterior e o quadro atual – como uma fração da área total da viewport – é a fração de impacto do quadro atual.

layout shift 1 WebVitals: O que é CLS (Deslocamento Cumulativo de Layout)

Na imagem acima, há um elemento que ocupa metade da viewport em um quadro.

Em seguida, no próximo quadro, o elemento diminui em 25% da altura da janela de exibição.

O retângulo pontilhado vermelho indica a união da área visível do elemento nos dois quadros, que, nesse caso, é 75% da viewport total, portanto, sua fração de impacto é 0,75.

Fração de distância

A outra parte da equação de pontuação da mudança de layout mede a distância que os elementos instáveis se moveram, em relação à janela de visualização.

A fração de distância é a maior distância que qualquer elemento instável se moveu no quadro (horizontal ou verticalmente) dividido pela maior dimensão da janela de visualização (largura ou altura, o que for maior).

Fração de distância do CLS

No exemplo acima, a maior dimensão da janela de visualização é a altura, e o elemento instável se moveu em 25% da altura da janela de visualização, o que torna a fração da distância 0,25.

Portanto, neste exemplo, a fração de impacto é 0,75 e a fração da distância é 0,25; portanto, a pontuação da mudança de layout é 0,75 * 0,25 = 0,1875.

O próximo exemplo ilustra como a adição de conteúdo a um elemento existente afeta a pontuação da mudança de layout:

layout shift 3 WebVitals: O que é CLS (Deslocamento Cumulativo de Layout)

O botão “Click Me!” é anexado à parte inferior da caixa cinza com texto em preto, o que empurra a caixa verde com texto em branco para baixo (e parcialmente fora da janela de exibição).

Neste exemplo, a caixa cinza muda de tamanho, mas sua posição inicial não muda, portanto não é um elemento instável.

O “Clique em mim!” O botão não estava anteriormente no DOM, portanto, sua posição inicial também não muda.

A posição inicial da caixa verde, no entanto, muda, mas como foi movida parcialmente para fora da janela de visualização, a área invisível não é considerada ao calcular a fração de impacto.

A união das áreas visíveis para a caixa verde nos dois quadros (ilustrada pelo retângulo pontilhado em vermelho) é igual à área da caixa verde no primeiro quadro – 50% da janela de visualização. A fração de impacto é 0,5.

Animações e transições

Animações e transições, quando bem executadas, são uma ótima maneira de atualizar o conteúdo da página sem surpreender o usuário.

O conteúdo que muda abruptamente e inesperadamente na página quase sempre cria uma experiência ruim para o usuário.

Mas o conteúdo que se move gradualmente e naturalmente de uma posição para a seguinte geralmente pode ajudar o usuário a entender melhor o que está acontecendo e orientá-lo entre as mudanças de estado.

Finalizando

Uma mudança de layout é ruim apenas se o usuário não a estiver esperando.

Por outro lado, as mudanças de layout que ocorrem em resposta às interações do usuário (clicar em um link, pressionar um botão, digitar em uma caixa de pesquisa e similares) geralmente são boas, desde que a mudança ocorra perto o suficiente da interação em que o relacionamento está. claro para o usuário.

Por exemplo, se uma interação do usuário acionar uma solicitação de rede que pode demorar um pouco para ser concluída, é melhor criar algum espaço imediatamente e mostrar um indicador de carregamento para evitar uma mudança desagradável no layout quando a solicitação for concluída.

Se o usuário não perceber que algo está carregando, ou não tiver noção de quando o recurso estará pronto, poderá tentar clicar em outra coisa enquanto aguarda – algo que possa sair dela.

Fique atento os elementos que compõem suas páginas, principalmente os componentes externos com anúncios, imagens de CDN, scripts de terceiros, embeds, etc.

Um abraço!

Luiz Eduardo Oliveira Fonseca

Infra @ Powertic, Rails Developer, Maintainer do Mautic Docker e do Saelos Docker, Revisor da Tradução do Mautic, Administrador da Comunidade Mautic Brasil

Deixe uma resposta