Há algum tempo o Google lançou uma iniciativa chamada Web Vitals que tem como objetivo principal fornecer métricas para que possamos melhorar a optimizar a qualidade das nossas aplicações web. Até aí, tudo certo né? Nada muito diferente do velho e famoso Lighthouse. Pois é, o pulo do gato aqui é que eles começaram a levar a experiência do usuário em conta.
Senão me engano, recentemente o Google ainda anunciou que vai considerar essas métricas como um dos fatores que podem influenciar no rankeamento das páginas a partir de maio de 2021. Para um contexto maior, o web.dev define Web Vitals da seguinte maneira:
Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.
Uma dessas métricas é chamada CLS (cumulative layout shift) e vamos falar um pouco sobre ela por aqui.
Entendendo o CLS
De uma forma bem clara, a métrica CLS é totalmente relacionada à estabilidade visual. Um exemplo clássico que você provavelmente já presenciou e quis jogar o celular no chão ou dar um soco na tela (ok, exagerei!): você está lendo um artigoo e do nada a tela dá aquela sambada, e você precisa achar onde estava. Isso acontece, geralmente porque algum conteúdo, localizado entre partes do texto que você estava lendo, terminou de ser carregado e por não ter um tamanho prévio definido, empurrou parte do conteúdo para baixo.
Evitando e corrigindo o CLS
Na verdade não existe fórmula mágica para corrigir e evitar problemas com CLS. Indo direto ao ponto: certifique-se de que qualquer conteúdo que é carregado na sua página tenha espaço suficiente para ser exibido, evitando assim que caso quando ele carregue, e seja maior do que o espaço disponível, empurre a página para baixo. Algumas dicas:
- volte duas casas e adicione os atributos de tamanho (largura e altura em vídeos e imagens). Ou uma outra dica legal que o pessoal do web.dev cita ainda é uma técnica antiga mas que funciona muito bem que é o aspect ratio boxes.
- quando for usar
transitionouanimation, use em conjunto comtransform. - tome cuidado com testes A/B. Passei por uma situação há alguns meses atrás onde estava adicionando um banner no topo de uma página, sem deixar o espaço necessário e estava empurrando a página inteira para baixo, afetando drasticamente o CLS.
Se você quiser saber mais, a página sobre CLS no web.dev é bem legal (mas é em Inglês).