Em maio de 2020, o Google introduziu um conjunto de três métricas importantes conhecidas como Principais Vitais da WebEssas métricas são uma forma de mensurar a experiência geral do usuário em um site. O objetivo é simples: tornar a web um lugar melhor para todos. Os três Core Web Vitals são:
- Pintura com maior conteúdo (LCP): Isso mede quanto tempo leva para o conteúdo principal da página aparecer na tela.
- Atraso da primeira entrada (FID): Isso mede quanto tempo leva até que um visitante possa começar a interagir com a página.
- Mudança de layout cumulativa (CLS): Isso mede se a página é visualmente estável ou se seus elementos mudam muito durante o carregamento.
Essas métricas são mais do que apenas números para ranqueamento de busca. Elas têm um impacto direto na experiência dos seus visitantes. Melhorar essas métricas não só ajuda no seu ranqueamento, como também torna seu site um lugar mais agradável de se estar.
O que é mudança cumulativa de layout?
Mudança de layout cumulativa (CLS) é o foco principal deste artigo. Embora o nome possa parecer técnico, o conceito é simples. Você já esteve prestes a clicar em um botão ou ler uma linha de texto, apenas para que uma imagem ou um anúncio aparecesse de repente e empurrasse tudo para baixo? Essa experiência desagradável é uma mudança de layout. O CLS mede o quanto os elementos em uma página se movem conforme ela carrega. Uma boa pontuação CLS é de 0.1 ou menos. Qualquer valor acima de 0.25 é considerado ruim. Uma pontuação mais baixa significa uma página mais estável, o que proporciona uma experiência melhor para seus usuários.
Como o CLS é calculado?
A pontuação CLS é um número que varia de 0 a 1. Uma pontuação de 0 é perfeita, sem mudanças de layout, enquanto uma pontuação próxima de 1 indica muita movimentação. A matemática por trás desse número não é muito complexa: pontuação de mudança de layout = fração de impacto * fração de distância. O fração de impacto mede o quanto da página é afetada pela mudança e o fração de distância mede a distância que os elementos percorrem. Por exemplo, se um elemento grande se deslocar por uma distância significativa, isso resultará em uma pontuação CLS baixa. Quaisquer mudanças de layout que ocorram dentro de meio segundo após a interação do usuário com a página (como clicar ou digitar) não são contabilizadas para a pontuação.
Como encontro meu CLS?
Antes de corrigir seu CLS, você precisa saber o que ele é. Existem algumas maneiras diferentes de descobrir sua pontuação CLS.
Google Pagespeed Insights
Você pode executar uma verificação de velocidade da página em Google Pagespeed Insights, e você verá a pontuação CLS listada no Dados de laboratório seção. O relatório também destacará as principais causas do CLS na Diagnóstico seção. Dependendo de quanto tráfego seu site recebe, o relatório também pode incluir Dados de campo, que se baseia nas experiências de usuários reais.
Google Search Console
Seu console de pesquisa tem um Principais Vitais da Web Relatório que mostra quais páginas têm um desempenho bom ou ruim. Este relatório inclui sua pontuação CLS, juntamente com sua maior pontuação de conteúdo e o atraso na primeira entrada.
Farol do Google
Você também pode usar o Lighthouse aba nas ferramentas de desenvolvedor do seu navegador. Você pode gerar um relatório de desempenho completo, incluindo o Cumulative Layout Shift. Ele é muito semelhante ao relatório do Pagespeed Insights, mas tem um benefício extra: você pode executá-lo em páginas que ainda não são públicas, o que o torna uma ótima ferramenta para desenvolvedores.
O que causa a mudança cumulativa de layout?
As causas mais comuns de mudanças de layout podem ser corrigidas com algumas mudanças simples. Veja aqui os culpados mais comuns e como corrigi-los.
Imagens e vídeos sem dimensões
Esta é uma das causas mais comuns de CLS. Quando um navegador carrega uma página, o código HTML é carregado primeiro, seguido pelo CSS e, em seguida, pelas imagens e vídeos. Se você não especificar a largura e a altura de uma imagem ou vídeo, o navegador não saberá quanto espaço reservar para ele. Como resultado, o layout mudará assim que a imagem for carregada. Isso é especialmente perceptível em conexões mais lentas.
Como consertar isto?
A solução é simples: sempre especifique a altura e a largura das suas imagens em HTML. Isso informa ao navegador exatamente quanto espaço reservar, para que o restante da página carregue no local correto. Você também deve garantir que suas imagens tenham um bom texto alternativo, pois este é um componente essencial. SEO on-page. Nosso grátis Gerador de texto alternativo de imagem de IA pode ajudar você a escrever uma boa descrição para suas imagens, o que também é uma ótima maneira de melhorar seu SEO.
Anúncios
Anúncios são uma das principais causas de CLS. Eles costumam ser carregados e direcionados a um visitante específico e podem demorar para carregar. Isso pode causar uma mudança repentina de layout, especialmente se o anúncio estiver no topo da página.
Como consertar isto?
Assim como nas imagens, você pode especificar as dimensões que deseja reservar para um anúncio. Isso garantirá que o layout não mude após o carregamento do anúncio. É uma prática recomendada reservar o maior espaço possível para o anúncio, mesmo que um anúncio menor seja veiculado.
Incorporações e i-frames
Se você estiver incorporando elementos como vídeos do YouTube, Google Maps ou feeds do Twitter na sua página, precisa ter cuidado com o CLS. Nem sempre se sabe o tamanho exato do elemento, então há o risco de alterações no layout.
Como consertar isto?
Você deve tentar fazer uma boa estimativa do tamanho do elemento e reservar esse espaço no layout. Se não tiver certeza, considere definir uma altura ou largura máxima para esse elemento.
Webfons
Se você estiver carregando fontes de serviços como o Google Fonts, isso também pode causar uma mudança no layout. Enquanto uma fonte está sendo carregada, a página pode já estar exibindo uma fonte reserva. Assim que a fonte chegar, ela será substituída, causando uma pequena mudança no layout.
Como consertar isto?
Existem duas maneiras de reduzir o efeito negativo das fontes da web no CLS: definindo o atributo CSS exibição de fonte para trocar e fazer com que as fontes carreguem mais rápido por meio da pré-busca e pré-carregamento de fontes da web. trocar O atributo informa ao navegador para usar a fonte reserva até que a nova fonte esteja pronta.
Conteúdo injetado dinamicamente
Com a crescente popularidade do desenvolvimento web moderno, cada vez mais páginas têm conteúdo carregado dinamicamente. As páginas contêm espaços reservados que são preenchidos somente após uma chamada ao servidor JavaScript retornar o conteúdo correto. Isso pode demorar um pouco e causar alterações no layout.
Como consertar isto?
Você deve sempre reservar espaço para o conteúdo que vem depois. Você também deve garantir que o conteúdo seja carregado o mais rápido possível. Esta é uma tarefa técnica com a qual um desenvolvedor pode ajudar.
Conclusão
Mudanças de layout são irritantes para os visitantes e resultam em uma experiência ruim para o usuário. Desde 2021, mudanças de layout também podem afetar negativamente sua classificação no Google. A boa notícia é que o CLS tem algumas causas diferentes e, para cada uma delas, há uma solução relativamente fácil. Uma plataforma de SEO automatizada Classificação de cliques pode ajudar você com seu SEO na página, seus problemas técnicos e seu conteúdo, para que você possa construir um site forte e bem classificado.
