Entender o que é CLS se torna indispensável para garantir a estabilidade visual de um site. Essa métrica faz uma avaliação da frequência, no qual os elementos visuais de uma página online são alterados inesperadamente, o que pode afetar a experiência do usuário.Em geral, o CLS (Cumulative Layout Shift) é uma métrica amplamente utilizada pelo Google para posicionar um site ou blog na ferramenta de busca.
Nesse contexto, os sites que apresentam um CLS ruim podem ser penalizados pelo mecanismo de pesquisa. Ao implementar algumas práticas necessárias, você poderá aumentar a pontuação de CLS da sua página online e melhorar o desempenho nos mecanismos de busca – entenda mais sobre o que é CLS conosco!
O que é CLS?
É essencial entender o que é CLS (Cumulative Layout Shift), no qual se trata de uma métrica que mede as alterações de um layout que podem ocorrer em um site enquanto ele carrega. A alteração frequente de layout faz parte dos Core Web Vitals, o que significa que pode impactar o ranqueamento e afetar a navegabilidade dos usuários.
Sua mudança costuma ocorrer quando um elemento visual sofre alteração em sua posição. Em alguns casos, ela pode acontecer por conta da maneira como o usuário interagiu com a página, como um clique em um botão ou banner. No entanto, essas mudanças não são capazes de afetar o CLS.
Por outro lado, alterações que ocorrem inesperadamente, como a movimentação de um botão após o carregamento de uma página, podem afetar a pontuação de um site. Outra mudança inesperada é quando o banner surge por cima de um texto, o que é bastante comum em sites que exibem banners de terceiros.
Dicas para melhorar a pontuação no CLS
Investir em esforços e recursos para melhorar a pontuação CLS é fundamental, bem como conhecer a importância da métrica, o que é CLS e qual a sua relação com a otimização de SEO (Search Engine Optimization).
A experiência do usuário é um fator crítico para a garantir uma boa posição nos mecanismos de busca, especialmente no Google. Isso significa que o Cumulative Layout Shift é algo que precisa de atenção, visto que desempenha um papel vital para o site. Portanto, é fundamental investir em dicas, como:
Verifique a altura e largura dos banners
Para evitar mudanças inesperadas no layout, um fator importante é a configuração da altura e largura dos banners. Algumas maneiras de melhorar a pontuação são por meio da incorporação de iFrames e a atenção aos tamanhos dos anúncios.
- Incorporações e iFrames: para minimizar riscos de baixa pontuação, é importante verificar seu tamanho utilizando ferramentas do desenvolvedor do navegador;
- Anúncios: para evitar pontuações ruins, as redes de anúncios costumam reservar um espaço exclusivo.
Embora os anúncios provenientes de redes, como o Google Adsense, sejam uma maneira de ganhar dinheiro com sites e blogs, eles podem causar grandes impactos em uma página ao enviar conteúdo visível, que pode atrapalhar a visualização de textos.
No entanto, para mitigar erros, eles reservam espaços para anúncios, que podem ser acrescentados manualmente por meio de códigos ou diretamente na plataforma de anúncio de modo automático.
Defina as dimensões dos vídeos e imagens
Para evitar mudanças inesperadas, é indispensável verificar as dimensões de imagens e vídeos. É possível verificá-las por meio dos widgets ou diretamente no HTML do site. Para definir esses atributos, usa-se o seguinte código:
<img src=“imagem.jpg” width=“400” height=“400” alt=“Imagem.”>
As imagens responsivas, por outro lado, devem utilizar a mesma proporção para auxiliar no cálculo da quantidade adequada de espaço, para que possam ser exibidas. Do contrário, podem atrapalhar a visibilidade.
Grande parte dos navegadores atuais podem definir um tamanho padrão conforme os atributos de largura e altura de um vídeo ou imagem. Nesse contexto, o ideal é utilizar caixas de proporções de aspectos CSS.
Utilize font:display
Usar font:display para uma fonte personalizada é indispensável, pois pode aumentar a pontuação CLS, que pode causar FOUT (Flashes de texto sem estilo) e FOIT (Flashes de texto invisível).
No FOUT, é exibida uma fonte que substitui a original até que seja devidamente carregada e, com isso, ignora o layout da página por alguns momentos. Já o FOIT, exibe uma fonte invisível até que a personalizada seja totalmente carregada.
O carregamento de uma fonte personalizada pode alterar o layout de uma página da web significativamente, e na maioria das vezes isso ocorre por conta do uso de um espaço diferente do exigido pela fonte do sistema. Portanto, deve-se utilizar font:display, como:
- Block;
- Optional;
- Fallback;
- Swap;
- Back.
Eles podem ser utilizados para evitar que o texto apareça invisível e sem estilo. Além disso, uma forma proativa de minimizar os riscos de alterações em fontes da web é optar por uma fonte de sistema similar:
@font-face {
font-family: ‘Pacifico’;
src: local( ‘Pacifico Regular’), local (‘Pacifico-Regular’), url(www.umafonte.woff2) format(‘woff2’);
font-display: swap;}
Para evitar mudanças inesperadas no layout personalizado da sua página na web, é necessário adicionar &display=swap” após o link. Com isso, o código deverá ficar do seguinte modo:
<link href=“https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap” rel=”stylesheet”>
Caso ache necessário e não tenha entendimento aprofundado sobre o que é CLS, pode recorrer a um profissional. Outra forma eficaz e inteligente para evitar alterações de layout no momento do carregamento de fontes da Web personalizadas, é adicionar o valor <link rel=preload> ao arquivo da fonte.
Como ver o CLS de outro site?
A melhor maneira para verificar o CLS de um site é por meio do PageSpeed Insights, plataforma que permite a análise de das Core Web Vitals de qualquer site, incluindo o cumulative layout shift – confira abaixo:
Para isso, basta acessar o PageSpeed Insights, inserir a URL do site que deseja verificar e clicar em “Analisar”. Aguarde a conclusão e role a página para conferir as métricas. Assim, você pode conferir a experiência dos usuários que acessam a página por meio do computador ou celular.
Além disso, é possível conferir mais detalhes sobre a página que pesquisou, como o desempenho geral e insights de como é possível melhorar a performance ao corrigir erros indicados.
No contexto do mundo digital, para proprietários de páginas na Web, aprofundar-se sobre o que é CLS é uma questão fundamental para melhorar o desempenho geral de uma página na web.
O que pode causar um CLS ruim no site?
Além de entender o que é CLS, é essencial descobrir quais são as principais causas de um CLS ruim no site. Enquanto um usuário visita uma página, podem ocorrer alguns problemas, que podem ser causados por motivos, como:
- Imagens e vídeos sem a definição de dimensões;
- Código-fonte mal feito;
- Mal posicionamento de banners;
- Incorporações, iFrames, anúncios de banners sem a definição de tamanhos;
- Conteúdo dinâmico sem espaço reservado;
- Fontes personalizadas que causam mudanças na renderização.
Para entender quais são os elementos visuais causadores do problema, utilize ferramentas que indiquem o que causou o CLS ruim em seu site e verifique como pode-se corrigir esses problemas.
Como medir a pontuação CLS do meu site?
Para medir a pontuação do CLS do seu site, o ideal é utilizar o Google Search Console, ferramenta que permite saber se existem páginas com problemas de CLS e, assim como o PageSpeed Insights, também mostra relatórios do celular e do computador.
A pontuação da métrica pode variar. Caso o seu site apresente um desempenho ruim – entre 0,1, a 0,25 -, significa que sua página precisa de melhorias. Ao se certificar de que a pontuação do site é ruim, é necessário corrigir erros para evitar ser penalizado pelo Google.
Para garantir um site seguro e com melhor desempenho, é necessário contar com uma empresa que trabalhe com manutenção de sites. A B20 atende proprietários de sites e está sempre disposta a auxiliar na melhoria do desempenho e garantir uma melhor experiência aos usuários.
Entender o que é CLS se torna indispensável para proprietários de sites e blogs. No geral, o Cumulative Layout Shift é uma métrica que mede mudanças de layout causadas por elementos visuais e que podem atrapalhar a navegabilidade. Para analisar a métrica, basta utilizar ferramentas como o Google Search Console ou PageSpeed Insights. Escolha a B20 para te auxiliar nessa jornada!
