A Mudança Cumulativa de Layout (CLM) é um do Core Web Vitals que avalia o grau em que uma página mantém sua consistência visual. O número de alterações inesperadas no layout, sem que o usuário interaja com o site, determina o nível de estabilidade visual. Sempre que o conteúdo da página muda, considera-se que o layout mudou, mesmo que não seja porque o usuário clicou em um link ou algo semelhante.
A pontuação geral para a Mudança Cumulativa de Layout é determinada pela soma de todas essas mudanças.
O que é a Mudança Cumulativa de Layout?
A lentidão no carregamento de fotos é o problema mais comum do CLS . É frequente o texto carregar antes dos elementos de mídia. Além disso, a estrutura da página web se altera após todos os componentes gráficos terem sido completamente carregados. Esses problemas ocorrem independentemente de o usuário estar rolando a página ou não.
Mesmo que uma página da web tenha uma pontuação CLS alta, pode ser difícil determinar quando ela terminou de carregar. A complexidade do site e a quantidade de conteúdo multimídia aumentam a probabilidade de os usuários encontrarem mudanças de layout.
Como reduzir a mudança cumulativa de layout no WordPress?
Utilizar o depurador CLS do Google Web Vitals é o método mais eficaz para determinar quais componentes são responsáveis pela alta pontuação CLS do seu site. Ele apresenta um GIF que ilustra todos os elementos rotativos do seu site. A maioria das altas pontuações CLS pode ser atribuída a anúncios e recursos de mídia. Você precisará otimizar cada componente para aumentar sua pontuação CLS.
Para isso, seguem alguns métodos que podem ser usados para melhorar a pontuação CLS do seu site:
1. Adicione atributos de dimensão a todos os arquivos de mídia
Como o seu navegador precisa avaliar o tamanho da imagem e a orientação do layout após o carregamento, a possibilidade de distorção do layout aumenta se você enviar arquivos de mídia com atributos desconhecidos. Fotos grandes e arquivos de alta qualidade têm uma probabilidade maior de apresentar esse tipo de problema do que arquivos menores. Redimensione imagens no editor de mídia do WordPress.
2. Certifique-se de que as fontes estejam carregadas localmente
Durante o carregamento da fonte, o texto deve permanecer visível. Portanto, garantir que as fontes sejam carregadas localmente, em vez de serem obtidas de sites que hospedam fontes de terceiros, é o primeiro passo para atingir esse objetivo.
3. Evite FOIT e FOUT
O do texto invisível instantâneo (FOIT, na sigla em inglês) ocorre quando uma fonte alternativa não é especificada. Como resultado, os usuários veem uma área em branco onde o texto normalmente estaria, enquanto o navegador tenta carregar a fonte ou encontra uma alternativa.
Durante um período conhecido como exibição intermitente de texto sem formatação (FOUT, na sigla em inglês), seu navegador usará a fonte padrão até que consiga carregar a fonte selecionada. Para corrigir isso, você pode adicionar o atributo `font-display: switch`.
Você pode ler mais artigos como este no Seahawk Media Blog.
