Teste de Mudança cumulativa de layout (CLS)
O teste de Mudança cumulativa de layout da SEOptimer apresenta o CLS da sua página em comparação com os limites da Google, utilizando os próprios dados de campo da Google provenientes de visitantes reais.
Audite qualquer site em segundos
+ Ferramentas abrangentes de SEO / GEO para todas as funções
Execute mais de 100 verificações no seu site em SEO On-Page, Usabilidade, Desempenho, Redes sociais e Ligações. Agora com GEO em todos os relatórios. O SEOptimer também oferece pesquisa de palavras-chave, monitorização de posições, backlinks e um crawler completo do site.
Sobre a mudança cumulativa de layout
O que é a mudança cumulativa de layout?
A mudança cumulativa de layout mede quanto a página se desloca durante o carregamento. Sempre que um elemento visível salta para uma nova posição sem que o visitante o provoque, essa mudança é contabilizada e as pontuações acumulam-se.
É a métrica com o sintoma mais familiar: tentar clicar num link e premir outra coisa porque um anúncio ou uma imagem carregou acima dele e empurrou a página para baixo.
Ao contrário das outras duas, não é medida em tempo. É uma proporção que descreve quanto do ecrã se moveu e até que ponto, razão pela qual os valores são pequenos e uma pontuação de 0,1 já representa um movimento visível.
O que é considerado um bom CLS?
O Google considera 0,1 ou menos como bom, de 0,1 a 0,25 como a necessitar de melhoria e qualquer valor acima de 0,25 como fraco, no percentil 75 dos carregamentos reais de páginas.
As mudanças que um visitante provoca não são contabilizadas. Abrir um acordeão ou dispensar um banner desloca legitimamente a página, e apenas os movimentos ocorridos no espaço de meio segundo após uma interação são desconsiderados, o que corresponde aproximadamente ao período durante o qual uma pessoa atribui o movimento à sua própria ação.
Este é normalmente o mais fácil de alcançar dos três. Enquanto o LCP e o INP exigem melhorias de desempenho, a maioria das mudanças de layout é corrigida reservando espaço, o que implica alterar a marcação em vez da arquitetura.
O que costuma causar mudanças de layout
- Imagens e vídeos sem atributos de largura e altura, fazendo com que nenhum espaço seja reservado até serem carregados.
- Anúncios e conteúdos incorporados inseridos num contentor sem dimensões definidas.
- Web fonts que são trocadas a um tamanho diferente do da fonte de recurso e fazem o texto fluir novamente.
- Banners, avisos e barras de cookies inseridos acima do conteúdo existente.
- Conteúdo inserido por um script depois de a página já ter sido renderizada.
O padrão subjacente a todos eles é o mesmo: algo chega tarde e ocupa espaço que não tinha sido reservado. Tudo o que está abaixo é empurrado para baixo e aquilo em que o visitante estava prestes a tocar muda de posição.
Como melhorar
- Defina a largura e a altura de todas as imagens e vídeos para que o navegador reserve o espaço.
- Dê aos espaços de anúncios e aos conteúdos incorporados um tamanho mínimo fixo, mesmo quando estão vazios.
- Pré-carregue os tipos de letra essenciais e faça corresponder as métricas da fonte alternativa, para que a substituição não provoque uma reformulação do layout.
- Insira banners e avisos abaixo do conteúdo existente ou sobreponha-os, em vez de empurrar o conteúdo.
- Reserve espaço para tudo o que um script irá adicionar mais tarde.
- Tenha atenção à visualização em dispositivos móveis, onde uma coluna estreita transforma uma pequena deslocação numa deslocação significativa.
O que esta ferramenta verifica
O teste de CLS lê os dados de campo da Google relativos à página — medições recolhidas junto de visitantes reais no Chrome — e mostra em que posição se encontra face aos limiares acima.
Se não for apresentado nenhum resultado, não existe tráfego suficiente para a página para que o Google possa fornecer dados. Entretanto, a mudança de layout é a única métrica que pode encontrar de forma fiável manualmente: carregue a página num telemóvel, com uma ligação lenta, e observe o que se move.
Para as outras duas métricas, ou para as três em conjunto, utilize os Teste dos Core Web Vitals.
Próximos passos
A maioria das mudanças de layout deve-se a imagens e recursos carregados tardiamente. Verifique as otimização de imagens na página, o tamanho que ocupa através da verificação tamanho do ficheiro da página Web e o seu comportamento num telemóvel com o teste responsivo para dispositivos móveis.
Caixa de ferramentas abrangente de SEO com mais de 55 ferramentas
Verifique Títulos, Meta descrições, Cabeçalhos, Schema, Core Web Vitals, SSL e Robots.txt. Gere Meta tags, Sitemaps e regras .htaccess, minimize CSS, JS e HTML e crie textos com as nossas ferramentas de escrita com IA — instantaneamente e de forma gratuita.
Leituras adicionais
Ver Mais
Core Web Vitals: What are They? How are They Crucial to SEO?
You should optimize your web pages for a seamless user experience. But how can you measure the quality of user experience on a site? That’...
SEOptimer's Core Web Vitals Checks
What are Core Web Vitals?
Google launched the Core Web Vitals (CWV) initiative in 2020 - "essential metrics for a healthy site". T...
Page Speed: What It Is, and How It Impacts SEO
What is Page Speed?
The term page speed refers to the amount of time your media content or web page will take to download from the...
Webpage Size - Why is it important? And how do you optimize it?
What is Webpage Size?
The term webpage size in the SEO world refers to the downloaded file size of a given web page.
The...