Mudança cumulativa de layout (CLS): o que é e como otimizar seu site para isso

Imagine o seguinte: você está carregando um site e parece pronto para uso. Você clica em uma imagem em destaque de um blog para ler o artigo e, de repente, a página inteira muda porque outra coisa acabou de ser carregada. E você clica em algo totalmente diferente e carrega uma página que você nunca pretendeu. Se você já passou por esse problema, sabe como o deslocamento cumulativo de layout (CLS) pode impactar negativamente a experiência do usuário (UX) de um site.

Mudança cumulativa de layout é o termo que define o quanto o layout de uma página muda enquanto carrega e, neste artigo, veremos um pouco mais sobre o que isso significa. Mostraremos como medir o CLS e explicaremos o que é uma boa pontuação. Em seguida, discutiremos como otimizar a pontuação CLS do seu site. Vamos ao trabalho!

Inscreva-se no nosso canal no Youtube

O que é mudança cumulativa de layout (CLS)?

Não há melhor maneira de ilustrar o que uma pontuação CLS alta (ou seja, qualquer coisa acima de 0,10 do PageSpeed ​​Insights do Google) representa do que com um exemplo visual. Este é um site com um layout que muda continuamente conforme a página carrega. Observe que não estamos rolando nada ao capturar isso. Nossa janela de visualização permanece a mesma, mas a página muda drasticamente por conta própria:

Como um usuário que visita este site, você pode não ter certeza de quando o carregamento está realmente concluído. Você pode tentar clicar em uma notícia, apenas para que o layout mude drasticamente. Como resultado, você acaba na página errada e tem que perder tempo voltando. Dependendo da página, isso pode acontecer várias vezes. Se isso acontecer, há uma boa probabilidade de você simplesmente sair.

E seus usuários também.

Quanto mais complexo for um site, maior será a probabilidade de ele ter uma pontuação CLS alta. Com layouts simples, como a icônica página inicial do Google, não há CLS porque eles incluem poucos elementos:

Isso não quer dizer que todos os sites complexos tenham pontuações CLS altas. Considere a Amazon, por exemplo. Ninguém diria que o gigante do comércio eletrônico usa um design web simples. No entanto, há pouca ou nenhuma mudança de layout para ser vista durante a navegação em seu catálogo.

As mudanças de layout acontecem porque os navegadores tendem a carregar os elementos da página de maneira assíncrona. Mais importante, pode haver elementos de mídia em sua página com dimensões inicialmente desconhecidas. Essa combinação significa que o navegador não sabe quanto espaço os elementos individuais ocuparão até que o carregamento seja concluído. Daí a mudança drástica de layout.

O CLS é interessante porque pode ser medido objetivamente usando várias ferramentas, mas também é centrado no usuário, pois o dispositivo de cada usuário pode afetar como o layout do seu site pode mudar. Embora você não possa controlar esse aspecto, certamente pode tomar precauções para que tenha o menor impacto possível.

CLS é um dos três Core Web Vitals que o Google mede para ajudá-lo a determinar se o seu site oferece uma forte experiência do usuário (UX). Os outros Core Web Vitals são First Input Delay (FID) e Largest Contentful Paint (LCP), que também valem qualquer esforço que você gaste para otimizar.

Como Medir CLS

Descobrir se o seu site mostra mudanças de layout marcadas é relativamente simples. Em primeiro lugar, recomendamos que você tente acessar seu site de uma variedade de dispositivos e peça a outros que façam o mesmo. Ao fazer isso, você pode observar se o layout permanece consistente enquanto as páginas carregam.

O que você provavelmente descobrirá é que a experiência do CLS pode variar muito. Depende não apenas de quão otimizado seu site é, mas também de qual dispositivo você está usando. Com isso em mente, a melhor ferramenta para medir o CLS do seu site é o PageSpeed ​​Insights. Isso se conecta diretamente ao Core Web Vitals do Google para que você possa ver diretamente como sua pontuação CLS afeta a forma como o Google vê seu site.

Este serviço permite que você insira um URL e receba uma pontuação geral de desempenho com base nos dados dos últimos 28 dias que o Google coletou. Essa pontuação leva várias métricas em consideração, incluindo CLS, FCP e LCP.

Para este teste, escolhemos um site sem CLS discernível. O PageSpeed ​​Insights confirmou nossas suspeitas, pois apresentou resultados extremamente positivos com uma pontuação CLS forte.

Observe que o PageSpeed ​​Insights oferece um detalhamento de porcentagem para cada pontuação. Nesse caso, 91% dos usuários experimentaram nenhuma mudança de layout ao carregar o site de teste. No entanto, os visitantes restantes experimentaram algum nível de mudança de layout.

Isso é de se esperar quando se trata de CLS e do restante do Core Web Vitals. A experiência do usuário varia drasticamente, dependendo do dispositivo de onde ele está visitando, da conexão com a Internet e de muitos outros fatores. Praticamente não há como contabilizar o fato de nenhum usuário jamais experimentar o CLS, mas você pode definitivamente tomar precauções para otimizá-lo de forma que a porcentagem seja a mais baixa possível.

Além dos dados de campo, o PageSpeed ​​Insights também oferece o que chama de dados de laboratório . Essas são pontuações de desempenho baseadas em um único teste, em vez de dados coletados durante um longo período de tempo (que são considerados dados de campo ).

Em nosso teste, recebemos uma pontuação CLS de zero, o que significa que não houve mudança de layout. Para este teste específico. Agora vamos comparar isso com outro site que não obteve uma pontuação CLS tão forte.

Para atender aos padrões do Google, sua pontuação CLS deve ser inferior a 0,10. Qualquer coisa acima significa que há mudanças significativas e perceptíveis no layout, o que leva a uma experiência do usuário ruim.

Como identificar o que causa mudanças de layout

Se quiser identificar quais elementos estão causando mudanças de layout em seu site, você pode fazer isso usando as ferramentas de desenvolvimento do Chrome. Se você abrir as ferramentas (CTRL-SHIFT-I) e pular para a guia Desempenho , poderá gravar testes de desempenho enquanto navega na web.

Depois que você interromper a gravação, o Chrome Dev Tools retornará uma linha do tempo que mostra os tempos de carregamento, solicitações individuais e Core Web Vitals. Nessa linha do tempo, você pode selecionar eventos de Mudança de Layout individuais listados em Experiência . Dessa forma, você pode ver a quais elementos eles correspondem.

Depois de saber quais elementos estão causando mudanças de layout, você pode tomar medidas para corrigir o problema. Falaremos sobre isso na próxima seção.

Se você deseja monitorar o Core Web Vitals do seu site, recomendamos que você configure uma conta do Google Search Console. Você será capaz de monitorar as métricas de desempenho e os pontos essenciais da Web no Search Console, o que é uma vantagem quando se trata de Search Engine Optimization (SEO). Achamos que é do seu interesse monitorar regularmente o Search Console, independentemente, mas nunca é demais ter uma métrica específica que você está rastreando.

Como otimizar sua pontuação CLS

De modo geral, existem dois grandes culpados quando se trata de altas pontuações no CLS: arquivos de mídia e anúncios. Por exemplo, se você carregar um arquivo de imagem com uma resolução massiva, mas não especificar sua altura e largura, pode quebrar o layout da sua página.

Em termos de desempenho do site, é melhor usar imagens que já tenham as dimensões precisas que você exibirá. Dessa forma, o navegador não precisa gastar poder de processamento (e tempo) para redimensioná-los de forma adequada. No entanto, nem sempre isso é possível. Quando não estiver, você deve definir atributos de largura e altura para cada imagem exibida. Dessa forma, o navegador do usuário saberá precisamente onde a imagem se encaixa e não precisará mudar o layout no último segundo possível.

Veja como esses atributos aparecem em HTML:

<img src="http://imageurl.com" width="120" height="90" alt="Image Alt Text">

Se você estiver usando o WordPress, alguns plug-ins de otimização de imagem podem redimensionar arquivos automaticamente conforme você os carrega, o que se encarrega de definir os atributos de largura e altura necessários.

Quando se trata de imagens responsivas, você pode confiar no CSS em vez de declarar manualmente a largura e a altura. CSS permite que você use o atributo max-width para informar aos navegadores qual porcentagem da janela de visualização a imagem deve ocupar:

img {
max-width: 90vw;
height: auto;
}

Neste exemplo, estamos dizendo ao navegador para dimensionar a imagem para que ocupe 90% da janela de visualização do usuário. Ao mesmo tempo, definimos o atributo height como auto , para que o navegador calcule a altura ideal com base na nova largura da imagem e sua proporção.

Os mesmos princípios se aplicam aos anúncios e às imagens. Normalmente, você trabalhará com iframes e, às vezes, as redes de anúncios usarão elementos de tamanho dinâmico. Isso pode causar estragos no layout de suas páginas.

Em vez de permitir que as redes de anúncios decidam o tamanho dos anúncios em seu site, você pode reservar áreas para eles. Isso significa declarar os atributos de largura e altura para áreas de anúncio e definir substitutos caso eles não carreguem, para que o espaço vazio não cause uma mudança de layout.

Você pode usar o mesmo tipo de CSS e estilo in-line para qualquer contêiner de anúncio que desejar, mantendo-o travado na posição, independentemente de quais anúncios são veiculados.

Perguntas mais frequentes sobre o deslocamento cumulativo de layout (CLS)

O CLS pode ser um pouco mais complicado de entender do que as métricas LCP e FCP. Com isso em mente, vamos rever algumas perguntas comuns que os usuários têm sobre o CLS, para ter certeza de que você não está perdendo nenhuma informação importante.

Como o CLS afeta o desempenho do meu site?

Em teoria, você pode ter um site muito rápido que ainda obtenha uma pontuação CLS relativamente baixa. Tal como acontece com outros Core Web Vitals, as pontuações CLS podem não se correlacionar diretamente com o desempenho geral do site. Seu site pode estar bombando rápido, mas conforme carrega, ele se desdobra como um acordeão. Mesmo assim, grandes mudanças de layout definitivamente têm um impacto negativo na UX do site. O Google considera isso extremamente importante. É por isso que o Google pondera este ponto de dados tão fortemente.

O CLS é menos importante do que as pontuações do FCP ou LCP?

Muitos usuários prestam mais atenção às pontuações FCP e LCP do que CLS. Isso porque essas duas métricas são mais fáceis de correlacionar ao desempenho do site. Embora o FCP também seja especificamente uma métrica centrada no usuário, o CLS é mais difícil de medir de forma consistente em um grande número de usuários.

Todas as três métricas constituem o Google Core Web Vitals. Isso significa que, se você ignorar um deles, corre o risco de ser posicionado em uma posição inferior nos resultados de pesquisa relevantes. Certificar-se de que seu site está otimizado para um baixo CLS geralmente tem apenas um impacto positivo no desempenho do site, como LCP e FCP. Se a tinta com maior conteúdo for empurrada para baixo na tela assim que o usuário a vê, quão útil é esse tempo de carregamento rápido?

O que é uma boa pontuação CLS?

Pelos números, o Google considera qualquer coisa abaixo de 0,10 uma boa pontuação CLS. No entanto, se você seguir as etapas adequadas, obter uma pontuação CLS de 0 não está fora de questão e é relativamente comum entre sites bem otimizados. No entanto, lembre-se de que mesmo sites com pontuação normal em 0 podem ter uma pequena porcentagem de usuários que experimentam mudanças. Isso está fora de seu controle e tudo que você pode fazer é contabilizar a maioria dos seus usuários com 0 CLS.

Conclusão

Existem muitos fatores que influenciam na oferta de uma UX forte em seu site. O ideal é que ele carregue rápido. Deve ser fácil de interagir. Não deve mudar a posição do layout conforme os elementos aparecem. Mudanças drásticas no layout levam à frustração e cliques errados. Isso leva a uma taxa de rejeição mais alta. O que não é bom para nenhum site.

CLS é um dos principais Web Vitals que o Google usa para medir a UX geral do seu site. E os usuários são a única razão pela qual você tem um site em primeiro lugar. A experiência deles é a prioridade 1. Uma pontuação CLS baixa (abaixo de 0,10) significa que seu site deve carregar com fluidez e todos os aspectos de seu layout aparecerão no lugar certo desde o início.

Você tem alguma dúvida sobre o CLS ou como reduzir o seu? Vamos falar sobre eles na seção de comentários abaixo!

Imagem em destaque via irmão mais antigo / shutterstock.com