Nesta página: [ocultar]
O que é mudança cumulativa de layout?
Mudança de layout cumulativa ou CLS é um movimento de uma página da web na tela do navegador do usuário. Um bom exemplo para explicar essa métrica de desempenho é se você visita um site e está prestes a clicar em um objeto como um link ou botão e, de repente, sua página sobe ou desce, e um anúncio aparece de repente, fazendo você clicar no anúncio em vez disso. Esse movimento que faz com que o anúncio apareça na janela de visualização do usuário é denominado CLS.
Neste post, pretendemos explicar como você pode trabalhar com essa métrica, também conhecido como CLS, para melhorar o seu site.
Geralmente, O Google visa priorizar sites que são bem otimizados com um bom layout que é fortemente orientado para melhorar a experiência do usuário. O ponto principal disso são as últimas tendências em focar em como o usuário interage com os sites. Essa prioridade de experiência do usuário nos leva à mudança cumulativa de layout, que é uma métrica de desempenho do Google que faz parte das métricas Core Web Vitals. Isso é feito para melhorar a análise de como um usuário interage com um determinado site.
E com muitos sites agora focando em melhorar e estabilizar suas páginas e preencher seu conteúdo com vários tipos diferentes de pop-ups e outros anúncios que às vezes são um pesadelo para a experiência do usuário, O Google colocou o usuário como uma prioridade.
Como funciona a mudança cumulativa de layout?
Por ser uma métrica de desempenho do Google, é responsável por medir o quão estável é o seu conteúdo, visualmente. Uma atividade empolgante pela qual é responsável é monitorar como uma página da web do seu site muda a partir do ponto em que foi criada. Um aspecto crucial de saber como “Boa” seu valor é.
O que é a pontuação CLS e como funciona?
A pontuação CLS faz parte das funções dessa métrica do Google e varia de 0 para um número mais alto à medida que mais elementos móveis de sua página da web são adicionados ao longo do ciclo de vida do seu site. Alguém poderia dizer que quanto menor o valor de suas páginas da web, melhor será a estabilidade do layout de sua página. O Google classifica essas pontuações como Insuficiente, Needing Improvement and Good e eles se parecem com isso:
- Mais baixo que 0.1 – Boa pontuação CLS.
- Entre 0.1 e 0.25 – Você deveria melhorar.
- Tudo acima 0.25 – Pontuação ruim.
Um detalhe que você deve levar em consideração é que ele não é diretamente responsável pela posição de classificação do seu site no Google, mas sua ideia principal é fazer parte do Google Core Web Vitals – um conjunto para medir o desempenho, o que significa que de repente pode se tornar essencial conforme o Google lança novas atualizações no futuro. Portanto, lembre-se de que pode ser importante nos próximos meses.
E como um resultado alto desses valores é basicamente uma experiência ruim para os usuários do seu site, nossas recomendações são para tentar melhorá-lo (abaixe-o).
Como calcular sua pontuação CLS?
Pode haver efeitos negativos em seus sites de pequeno e grande impacto. Um anúncio perdido pode levar seu cliente a comprar o produto errado, o que basicamente significa que você deve ter cuidado com a forma como posiciona suas animações e tentar mantê-las no mínimo. Mas para saber exatamente como melhorar esses objetos, você precisa saber como calcular sua pontuação CLS.
Para medir o seu valor para esta métrica do Google, você precisa levar em consideração os seguintes elementos:
- Distância móvel.
- Região de impacto.
- Altura da janela de visualização.
Existem dois fatores principais para medir essa métrica:
- Fração de impacto.
- Fração de distância.
Para medir o Impacto, você deve calcular sua região de impacto, que é a área que foi afetada por uma certa animação ou objeto. Geralmente são várias formas de moldura familiares, como um quadrado ou um retângulo, mas também pode ser mais complicado, dependendo de como você fez isso.
Para o cálculo do seu impacto, aplique a seguinte fórmula:
área da região de impacto (quadros) / área da janela de visualização = fração de impacto
Para medir o Distância, você precisará saber o que é primeiro. O Google só mais tarde adicionou a distância e isso está relacionado à distância em movimento do seu elemento antes e depois da mudança. Então, para saber o que é, você precisa usar esta fórmula:
distância máxima de movimento / altura da janela de visualização = fração de distância
Então, para calcular o resultado geral para um determinado elemento, você tem que usar Fração de impacto e Fração de distância, e isso lhe dará os valores para uma animação em seu site:
fração de impacto * fração de distância = pontuação CLS para 1 elemento
Os resultados totais podem ser calculados simplesmente somando todas as pontuações dos diferentes elementos.
O que pode aumentar a pontuação de mudança de layout cumulativa?
O Google destacou que as principais razões para altos resultados podem acabar sendo:
- Conteúdo dinâmico.
- Imagens sem quaisquer dimensões especificadas.
- Fontes que estão causando o chamado Flash de Texto Invisível
- Fontes causando Flash of Unstyled Text.t
Atividades definidas para aguardar uma resposta da rede antes de atualizar o DOM (Modo de Objeto de Documento).
Como melhorar a mudança cumulativa de layout?
Você pode realizar as seguintes atividades para melhorá-lo e torná-lo ainda melhor aos olhos do Google:
1 – Fique longe de fontes hospedadas online ou se eles estão hospedados online, você deve usar valores para exibição de fontes como fallback, quadra, troca, opcional ou automático. Você também pode pré-carregar alguns dos arquivos de fonte usando o link rel = preload para as fontes específicas. O último é basicamente o pré-carregamento das fontes como uma prioridade, o que recomendamos altamente.
2 – Use proporção para redimensionar imagens, por exemplo 4:3 ou 16:9 em vez do tamanho da imagem em pizels, como 800×600 e assim por diante. Isso ajudará a minimizar o risco de aumentar seu total, pois dá ao seu navegador a capacidade de calcular o espaço necessário para mostrar uma foto.
3 – Fique longe de implementar conteúdo dinâmico e especialmente sobre outro objeto na sua página que já está ativa.
Se você estiver interessado em aprender mais sobre esta Mudança Cumulativa de Layout e como otimizá-la, sugerimos que você verifique a base de conhecimento estendido do Google sobre Otimizando CLS.
Por enquanto, CLS está diretamente relacionado a como o usuário percebe seu site, o que o torna essencial. Acreditamos que, devido ao foco maior do Google nas informações de interação do usuário e na experiência geral em seu site, isso pode se tornar um fator significativo em um futuro próximo, então se você quer ficar por dentro das coisas, sugerimos que você fique de olho nisso.
Se você tiver mais perguntas sobre CLS e como ele funciona, não hesite em nos deixar um comentário. Nossa equipe Howtohosting.guide visa sempre responder rapidamente e ajudá-lo.