Autor
Já faz um ano que o Google leva em conta a experiência do usuário como fator de posicionamento em seus resultados de pesquisa. Os KPIs de desempenho da Web, que são os Core Web Vitals, são atualmente acompanhados de perto pelos responsáveis por SEO. O senhor deseja saber mais sobre a mudança cumulativa de layout.
Les Principais dados vitais da Web (Signaux Web Essentiels em francês) avaliam o desempenho do carregamento de uma página da Web para um internauta:
O que é a mudança cumulativa de layout?
O CLS (Cumulative Layout Shift) mede, portanto, a estabilidade visual de uma página. O exemplo mais notável é o de um site de mídia, por natureza denso em conteúdo publicitário. Aparecem o título e o início de um artigo, o internauta se apressa em fazer o delineamento, mas no momento em que clica, aparece um banner publicitário. O internauta é, portanto, direcionado a um site que não deseja, e deve se adiantar para voltar ao seu artigo e ficar atento para não clicar novamente na bandeira surpresa.
Otimizar a mudança cumulativa de layout - Google - https://web.dev/optimize-cls/
Como a situação é atual nos sites modernos da Web, é coerente que o Google tenha criado um indicador de medição para incentivar os editores de sites a aprimorá-lo.
Como o senhor pode medir?
Trata-se de uma métrica composta por dois elementos:
Por exemplo: o elemento principal cobre 50% da tela e se desloca de 25%, explorando um total de 75% da tela.
O CLS é, portanto: Superfície x Distância = 0,75 * 0,25 = 0,1875
Estamos, portanto, no seuil d'Amélioration nécessaire pour que la page concernée soit considérée comme dépourvue de CLS
De forma mais simples, os utilitários de desempenho da Web do Google permitem que o CLS de uma página seja divulgado: PageSpeed Insights (camadas do site) e Lighthouse (módulo do navegador Google Chrome). A melhor fonte de dados continua sendo naturalmente aquela que remete aos dados reais dos usuários, ou seja, o Search Console. No relatório dos Signaux Web Essentiels, é relevante o número de páginas consideradas como Lentes ou que precisam de aprimoramento, e cada KPI dispõe de seu relatório.
O senhor pode identificar facilmente as páginas mais afetadas, reagrupadas por páginas semelhantes (gabarito / modelo).
Como melhorar o CLS?
Boa novidade, além de nos dar o máximo de dados de medição, Google nous guide para solucionar eventuais problemas de instabilidade visual.
Vários cenários atuais são abordados:
O caso das imagens que são carregadas após a estrutura da página é comum em qualquer tipo de site, principalmente no comércio eletrônico (fichas ou listas de produtos).
No exemplo a seguir, o nome dos produtos é carregado em primeiro lugar e, em seguida, aparecem as imagens dos produtos. Elas diminuem os nomes que já foram carregados, tornando a página instável durante o carregamento.
É possível evitar esse comportamento definindo as zonas reservadas para essas imagens, antes mesmo de carregá-las.
Um dos métodos possíveis é declarar as dimensões das imagens e, em seguida, os navegadores podem reservar um espaço calculando a proporção entre tamanho e altura (aspect-ratio).
Também é possível declarar diretamente um aspect-ratio no CSS para aplicá-lo a uma categoria de imagens semelhantes.
Observe que essa melhoria melhorou consideravelmente as pontuações do site em questão durante sua entrada em produção: de um CLS de 0,178, passamos para 0,002. E de 26% de visitantes afetados por uma instabilidade visual do site, passamos a 1,27% (dados provenientes do Search Console, referentes aos desempenhos constatados pelos usuários do site).
