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

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

Continue apos a publicidade

Hot News

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.

Continue após a publicidade

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.

Continue após a publicidade

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.

Continue após a publicidade

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.

Continue após a publicidade

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.

Continue após a publicidade

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.

Tweet com rolagem

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

Continue após a publicidade

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.

Continue após a publicidade
Continue após a publicidade

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.

Continue após a publicidade

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 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”.

Continue após a publicidade
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%.

Continue após a publicidade

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:

Continue após a publicidade

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.

Continue após a publicidade

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

Continue após a publicidade

Siga-nos nas redes sociais:

Hotnews.pt |
Facebook |
Instagram |
Telegram

#hotnews #noticias #tecnologia #AtualizaçõesDiárias #SigaHotnews #FiquePorDentro #ÚltimasNotícias #InformaçãoAtual

Continue após a publicidade

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *