Compreendendo e otimizando o Cumulative Layout Shift (CLS) #ÚltimasNotícias #tecnologia

Cumulative Layout Shift (CLS) é uma métrica do Google Core Web Vitals que mede um evento de experiência do usuário.

O CLS se tornou um fator de classificação em 2021 e isso significa que é importante entender o que ele é e como otimizá-lo.

O que é mudança cumulativa de layout?

CLS é a mudança inesperada de elementos de uma página da web enquanto um usuário está rolando ou interagindo na página

Os tipos de elementos que tendem a causar mudanças são fontes, imagens, vídeos, formulários de contato, botões e outros tipos de conteúdo.

Minimizar o CLS é importante porque páginas que mudam de lugar podem causar uma experiência ruim ao usuário.

Uma pontuação CLS baixa (abaixo de > 0,1) é indicativa de problemas de codificação que podem ser resolvidos.

O que causa problemas no CLS?

Há quatro razões pelas quais a mudança cumulativa de layout acontece:

• Imagens sem dimensões.
• Anúncios, incorporações e iframes sem dimensões.
• Conteúdo injetado dinamicamente.
• Fontes da Web causando FOIT/FOUT.
• Animações CSS ou JavaScript.

Imagens e vídeos devem ter as dimensões de altura e largura declaradas no HTML. Para imagens responsivas, certifique-se de que os diferentes tamanhos de imagem para as diferentes viewports usem a mesma proporção de aspecto.

Vamos analisar cada um desses fatores para entender como eles contribuem para a CLS.

Imagens sem dimensões

Os navegadores não podem determinar as dimensões da imagem até que as baixem. Como resultado, ao encontrar umaTag HTML, o navegador não consegue alocar espaço para a imagem. O vídeo de exemplo abaixo ilustra isso.

Depois que a imagem é baixada, o navegador precisa recalcular o layout e alocar espaço para a imagem caber, o que faz com que outros elementos na página sejam movidos.

Ao fornecer atributos de largura e altura no tag, você informa ao navegador a proporção da imagem. Isso permite que o navegador aloque a quantidade correta de espaço no layout antes que a imagem seja completamente baixada e previne quaisquer mudanças inesperadas de layout.

Anúncios podem causar CLS

Se você carregar anúncios do AdSense no conteúdo ou na tabela de classificação sobre os artigos sem estilo e configurações adequados, o layout poderá mudar.

Este é um pouco complicado de lidar porque os tamanhos dos anúncios podem ser diferentes. Por exemplo, pode ser um anúncio de 970×250 ou 970×90, e se você alocar espaço de 970×90, ele pode carregar um anúncio de 970×250 e causar uma mudança.

Por outro lado, se você alocar um anúncio de 970×250 e ele carregar um banner de 970×90, haverá muito espaço em branco ao redor dele, fazendo com que a página tenha uma aparência ruim.

É uma troca: ou você carrega anúncios com o mesmo tamanho e se beneficia de um maior inventário e CPMs mais altos, ou carrega anúncios de tamanhos diferentes às custas da experiência do usuário ou da métrica CLS.

Conteúdo injetado dinamicamente

Este é o conteúdo que é injetado na página da web.

Por exemplo, postagens no X (antigo Twitter), que carregam o conteúdo de um artigo, podem ter altura arbitrária dependendo do comprimento do conteúdo da postagem, fazendo com que o layout mude.

Claro, eles geralmente ficam abaixo da dobra e não contam no carregamento inicial da página, mas se o usuário rolar rápido o suficiente para chegar ao ponto onde a postagem X está colocada e ela ainda não tiver sido carregada, isso causará uma mudança de layout e contribuirá para sua métrica CLS.

Uma maneira de atenuar essa mudança é atribuir a propriedade CSS min-height média à tag div pai do tweet, porque é impossível saber a altura do post do tweet antes que ele seja carregado, para que possamos pré-alocar espaço.

Outra maneira de corrigir isso é aplicar uma regra CSS à tag div pai que contém o tweet para corrigir a altura.

#tweet-div {
max-height: 300px;
overflow: auto;
}

No entanto, isso fará com que uma barra de rolagem apareça, e os usuários terão que rolar para visualizar o tweet, o que pode não ser a melhor experiência do usuário.

Se nenhum dos métodos sugeridos funcionar, você pode tirar uma captura de tela do tweet e criar um link para ele.

Fontes baseadas na Web

Fontes da web baixadas podem causar o que é conhecido como Flash de texto invisível (FOIT).

Uma maneira de evitar isso é usar fontes pré-carregadas

e usando font-display: swap; propriedade css em @font-face em regra.

@font-face {
   font-family: Inter;
   font-style: normal;
   font-weight: 200 900;
   font-display: swap;
   src: url(' format('woff2');
}

Com essas regras, você está carregando fontes da web o mais rápido possível e dizendo ao navegador para usar a fonte do sistema até que ele carregue as fontes da web. Assim que o navegador termina de carregar as fontes, ele troca as fontes do sistema pelas fontes da web carregadas.

No entanto, você ainda pode ter um efeito chamado Flash de texto sem estilo (FOUT), que é impossível de evitar ao usar fontes que não são do sistema, pois leva algum tempo até que as fontes da web sejam carregadas, e as fontes do sistema serão exibidas durante esse tempo.

No vídeo abaixo, você pode ver como a fonte do título é alterada causando um deslocamento.

A visibilidade do FOUT depende da velocidade de conexão do usuário se o mecanismo de carregamento de fonte recomendado for implementado.

Se a conexão do usuário for suficientemente rápida, as fontes da web podem carregar rápido o suficiente e eliminar o efeito FOUT perceptível.

Portanto, usar fontes do sistema sempre que possível é uma ótima abordagem, mas nem sempre é possível devido às diretrizes de estilo da marca ou requisitos específicos de design.

Animações CSS ou JavaScript

Ao animar a altura de elementos HTML via CSS ou JS, por exemplo, ele expande um elemento verticalmente e o encolhe empurrando o conteúdo para baixo, causando uma mudança de layout.

Para evitar isso, use transformações CSS alocando espaço para o elemento que está sendo animado. Você pode ver a diferença entre a animação CSS, que causa um deslocamento à esquerda, e a mesma animação, que usa transformação CSS.

Exemplo de animação CSS causando CLS

Como o deslocamento cumulativo de layout é calculado

Este é um produto de duas métricas/eventos chamados “Fração de Impacto” e “Fração de Distância”.

CLS = ( Impact Fraction)×( Distance Fraction)

Fração de Impacto

A fração de impacto mede quanto espaço um elemento instável ocupa na janela de visualização.

Uma janela de visualização é o que você vê na tela do celular.

Quando um elemento é baixado e depois deslocado, o espaço total que o elemento ocupa, desde o local que ele ocupava na janela de visualização quando é renderizado pela primeira vez até o local final quando a página é renderizada.

O exemplo que o Google usa é um elemento que ocupa 50% da janela de visualização e depois cai outros 25%.

Quando somados, o valor de 75% é chamado de Fração de Impacto e é expresso como uma pontuação de 0,75.

Fração de Distância

A segunda medida é chamada de Distance Fraction. A fração de distância é a quantidade de espaço que o elemento da página moveu da posição original para a posição final.

No exemplo acima, o elemento da página moveu-se 25%.

Então agora a Pontuação Cumulativa de Layout é calculada multiplicando a Fração de Impacto pela Fração de Distância:

0,75 x 0,25 = 0,1875

O cálculo envolve mais um pouco de matemática e outras considerações. O que é importante tirar disso é que a pontuação é uma maneira de medir um fator importante da experiência do usuário.

Aqui está um exemplo de vídeo ilustrando visualmente o que são fatores de impacto e distância:

Entenda a mudança cumulativa de layout

Entender o Cumulative Layout Shift é importante, mas não é necessário saber como fazer os cálculos você mesmo.

No entanto, entender o que isso significa e como funciona é fundamental, pois se tornou parte do fator de classificação do Core Web Vitals.

Mais recursos:

Crédito da imagem em destaque: BestForBest/Shutterstock