Mudança de layout cumulativa: melhore a pontuação do Google CLS
Publicados: 2022-05-09Você já esteve em uma situação em que o botão de checkout desaparece quando você tenta fazer um pedido?
Sim! É frustrante.
A verdade é que isso acontece com muita frequência e com muitos de nós.
Felizmente, como sempre, o Google prioriza a experiência do usuário acima de tudo.
É por isso que lançará três novas métricas de desempenho como parte de seus principais elementos vitais da Web, a partir de 2021.
O Core Web Vitals foi projetado para medir a velocidade de carregamento, interatividade e estabilidade visual de uma página.
Três métricas representam isso:
1. Maior Pintura de Conteúdo (LCP)
2. Atraso da Primeira Entrada (FIP)
3. Mudança de layout cumulativo (CLS)
Vamos entender o CLS do ponto de vista do usuário e webmasters (SEO).
O que é Mudança de Layout Cumulativa?
O deslocamento de layout cumulativo (CLS) representa a estabilidade visual de um site.
Ele mede a quantidade de mudanças de layout insignificantes em uma página.
Mudanças de layout inesperadas são o resultado de uma página da Web se movendo em torno de si mesma sem a entrada do usuário.
O Google CLS é uma espécie de indicador (Sinal) para você corrigir o problema medindo a frequência com que um movimento inesperado dos elementos da página afeta a experiência do usuário.
Uma mudança em um layout pode ocorrer a qualquer momento quando um elemento visível muda sua posição de um quadro renderizado para o próximo.
Vamos tentar entender o significado comum e definir em palavras simples “Mudança de layout cumulativa”:
Cumulativo é um aumento na quantidade.
O layout é o quadro
Uma mudança é uma mudança de posição
Simplificando, a mudança de layout cumulativa é uma soma total de todas as alterações de quadros individuais nas posições de design do site.
Imagem proveniente de web.dev
A pontuação CLS padrão deve estar abaixo de 0,1.
Um bom limite para medir o mesmo é o 75º percentil de carregamentos de página em dispositivos móveis e desktops.
Na imagem acima, fica claro que De acordo com o Google:
1. Se a pontuação CLS for inferior a 0,1, é um bom sinal. Isso significa que seu site não tem problemas com nenhuma mudança de layout.
2. Se a pontuação do CLS estiver entre 0,1 e 0,25, significa que seu site precisa de algumas melhorias nos layouts visuais.
3. Se a pontuação CLS for superior a 0,25, é um sinal ruim, o que também significa que o movimento do elemento visual está ocorrendo com muita frequência.
Como o deslocamento de layout cumulativo é calculado?
O Google calcula o CLS de uma página calculando a fração de impacto e a fração de distância para cada mudança inesperada de layout.
Fração de Impacto do CLS
Ele mede a quantidade de espaço que um elemento instável ocupa em uma área de viewport entre dois quadros.
Fórmula para calcular a Fração de Impacto para CLS
Para calcular a pontuação de mudança de layout, precisamos da fração de impacto.
Como calcular a Fração de Impacto para CLS?
A representação gráfica ajudará você a entender melhor as frações de impacto.
Fração de Impacto = [Área de Região de Impacto] / [Área de Visualização] Fração de Impacto = [330 x 490] / [375 x 667] Fração de Impacto = [161700] / [250125] Fração de Impacto = 0,645Fração de distância do CLS
É a medida da quantidade de espaço que o elemento da página moveu da posição original para a posição final que basicamente muda no layout.
Para evitar casos de penalização excessiva, desloque em elementos grandes por uma pequena quantidade, levando em consideração a introdução da Fração de Distância.
Fórmula para calcular a fração de distância para CLS
Como calcular a fração de distância para CLS?
A representação gráfica ajudará você a entender melhor a fração de distância.
Fração de distância = [Máx. Move Distance] / [Height of ViewPort] Distance Fraction = [120] / [667] Distance Fraction = 0,179
Fórmula para calcular a pontuação do Google CLS
A pontuação cumulativa do layout é calculada multiplicando a fração de impacto pela fração de distância:
Deslocamento de Layout Acumulado (CLS) = Fração de Impacto x Fração de Distância CLS = 0,645 x 0,179 CLS = 0,1154 .
A pontuação CLS continua aumentando à medida que o impacto e a fração de distância aumentam.
Mudança de layout cumulativa com um exemplo simples.
Você visitou um site e viu algo interessante para ler.
Você vai em frente para clicar no link.
Mas assim que você estava prestes a clicar no link, ele se move para baixo na página da web em meia polegada, e você acaba clicando em um anúncio que foi colocado logo acima dele.
Fonte: nitropack.io
Parece injusto, certo?
É uma mudança inesperada de layout.
Significa apenas que você será redirecionado para alguma página de destino indesejada de onde você deve voltar para a página original da web.
Também temos algo conhecido como mudança de layout esperada.
Isso acontece quando você clica em algo em uma página da Web e altera o layout atual da página.
Por exemplo, você acessa um blog procurando uma informação específica.
Assim que você inserir o nome do tópico na barra de pesquisa, ele recuperará uma postagem de blog específica onde você encontrará as informações necessárias ou apresentará algumas postagens de blog relacionadas ao tópico.
Fonte: nitropack.io
Este é um resultado esperado da página da Web e pode ser considerado uma mudança de layout esperada.
O que causa problemas de CLS?
De acordo com o Google, o gigante dos mecanismos de busca, existem 5 razões possíveis para a mudança de layout cumulativa :
Imagens e vídeos sem dimensões
É aconselhável sempre especificar a largura e a altura de suas imagens e vídeos.
Você também pode utilizar caixas de proporção de aspecto CSS para permitir que o navegador aloque a quantidade certa de espaço na página da Web enquanto a imagem está sendo carregada.
Anúncios, incorporações e iframes sem dimensões
Os tamanhos de anúncio podem aumentar a receita por meio de uma CTR alta.
No entanto, isso pode comprometer a qualidade da experiência do usuário ao empurrar o conteúdo para baixo na página.
Essa mudança de layout pode ser atenuada reservando espaço para espaços de anúncio, eliminando mudanças reservando o maior tamanho possível para o espaço de anúncio ou escolhendo o melhor tamanho possível do espaço de anúncio com base em dados históricos.
Conteúdo injetado dinamicamente
Evite inserir qualquer conteúdo novo acima do conteúdo existente, a menos que seja em resposta à interação do usuário.
Isso garantirá que todas as mudanças de layout que ocorrerem sejam sempre esperadas, em vez de acionar a imagem ou o texto para se mover inesperadamente.
Fontes da Web causando FOIT/FOUT
Tente usar os valores font:display com suas fontes personalizadas, como auto, swap, block, fallback e opcional, para evitar mudanças de layout desnecessárias.
Para ter certeza de que não há mudança de layout, use font:display junto com o link rel=preload.
Qualquer elemento que use essa fonte ficará oculto até que o recurso de fonte seja totalmente baixado, é conhecido como FOIT (Flash de texto invisível).
Uma fonte de animação: malthemilthers.com
A exibição de uma fonte de fallback na pilha de fontes até que a personalizada seja carregada é conhecida como FOUT(Flash de texto sem estilo).
Ações aguardando uma resposta da rede antes de atualizar o DOM
Sempre opte por animações de “transformação” para animações de propriedades que acionam alterações de layout.
Como a pontuação do Google CLS é influenciada por meio de anúncios?
Para lidar com anúncios que causam CLS, você precisa estilizar o elemento onde o anúncio será exibido.
Portanto, se você estilizar div, a divisão de imagem ou vídeo em um WordPress ou qualquer elemento do site com uma medida específica de altura e largura, seu anúncio será restrito apenas às dimensões mencionadas.
Se um elemento que contém um anúncio não exibir o anúncio, você poderá defini-lo de forma que um banner alternativo ou uma imagem de espaço reservado possam preencher o espaço vago.
Como alternativa, um anúncio pode preencher a linha inteira na parte superior de uma coluna na medianiz direita ou esquerda da página para determinados layouts.
Se a página não aparecer, não haverá mudança e não fará diferença no celular ou no desktop.
No entanto, você deve observar que isso depende do layout do tema e você terá que testá-lo se houver um problema com o inventário de anúncios.
Como o CLS pode deslizar durante o desenvolvimento da Web?
O Google CLS pode passar pela fase de desenvolvimento.
Aqui está o que pode acontecer.
Muitos dos ativos necessários para renderizar uma página da Web são carregados no cache de um navegador.
Na próxima vez que um desenvolvedor visitar a página em desenvolvimento, ele não notará uma mudança de layout, pois os elementos da página já foram baixados.
Portanto, é recomendável fazer uma medição no campo ou no laboratório.
Teste de mudança de layout cumulativo
As métricas cumulativas de desempenho de mudança de layout do site podem ser medidas de qualquer uma das seguintes maneiras:
Ferramentas de campo
No campo: em usuários reais realmente interagindo com a página. Ele pode ser medido usando as seguintes ferramentas de campo:
Relatório de experiência do usuário do Chrome
Ele fornece métricas de experiência do usuário sobre como os usuários reais do Chrome experimentam destinos populares na web.
Informações do PageSpeed
Esta ferramenta analisa o conteúdo de uma página web e gera sugestões para tornar essa página mais rápida do que antes.
Search Console (relatório de Vitais principais da Web)
O Search Console mostra o desempenho de suas páginas com base em dados de uso do mundo real (às vezes chamados de dados de campo).
Ferramentas de laboratório
No laboratório: o uso de ferramentas para simular um carregamento de página em um ambiente controlado pode ser medido usando as seguintes ferramentas de laboratório:
Chrome DevTools
O Chrome DevTools pode ajudá-lo a editar páginas dinamicamente e diagnosticar problemas rapidamente, o que permite que você crie sites melhores com mais rapidez.
Farol
LightHouse é uma ferramenta automatizada de código aberto para melhorar a qualidade das páginas da web.
Você pode executá-lo em qualquer página da Web, pública ou que exija autenticação.
Possui auditorias de desempenho, acessibilidade, aplicativos da web progressivos, SEO e muito mais.
Teste de página da Web
Execute um teste de velocidade de site gratuito de todo o mundo usando navegadores reais em velocidades de conexão do consumidor com recomendações detalhadas de otimização.
De acordo com o web.dev ; Cuidado: as ferramentas de laboratório normalmente carregam as páginas em um ambiente sintético e apenas medem as mudanças de layout durante o carregamento da página.
Como resultado, os valores de CLS relatados por ferramentas de laboratório para uma determinada página podem ser menores do que os usuários reais experimentam em campo.
Ferramentas rápidas para verificar a mudança de layout cumulativa
1. CLS em formato GIF de Defaced Tool por Chris Johnson para Identifies the problemático LS.
2. Calculadora de mudança de layout cumulativa
Falha nos cálculos do CLS
O Google recebeu feedback sobre a métrica CLS ser inadequada para medir páginas da web que estão abertas por muito tempo, penalizando-as com pontuações mais baixas.
O Google analisou três soluções para atualizar a pontuação do CLS, portanto, não há nada para se preocupar com a piora das pontuações do CLS devido a essa alteração.
Janelas de sessão para medir o CLS
O Google optou por uma abordagem de janela de sessão para medir o CLS.
A medição dos elementos da página é medida em janelas de sessão, que correspondem a diferentes partes de uma página da Web que um usuário acessa à medida que rola a página da Web.
A pontuação total para cada janela de sessão é a mudança de layout cumulativa, a mudança total de toda a página.
Muitas pontuações do CLS serão alteradas
De acordo com o Google, cerca de 55% das páginas da web não verão uma mudança em suas pontuações cumulativas de mudança de layout. Apenas cerca de 42% dos sites verão uma pequena melhoria nas pontuações.
3% das páginas da web com rolagem infinita ou com gerenciadores de interface de usuário lentos para reagir à interação do usuário verão suas pontuações subirem para uma boa classificação.
Atualização torna as pontuações do CLS mais precisas
É um benefício para os editores com o novo sistema de pontuação se tornando mais justo, principalmente para páginas da web que estão abertas há muito tempo ou usam rolagem infinita e estavam sendo pontuadas injustamente por causa disso.
Com as métricas do Core Web Vitals prestes a se tornar um fator de classificação em maio de 2021, é uma mudança importante para fazer no último minuto.
Conclusão
Compreender a mudança de layout cumulativa (CLS) ajudará você a oferecer uma melhor experiência ao usuário nos próximos dias.
Como a métrica faz parte do Core Web Vitals para melhorar o UX e está programada para se tornar um sinal de classificação em 2021, é importante entender sua importância e impacto em seu site.