Mudança cumulativa de layout (CLS) no WordPress: como eliminá-la

Com este capítulo sobre Mudança cumulativa de layout, estamos chegando ao final de nossa minissérie sobre Core Web Vitals para usuários do WordPress. Nos capítulos anteriores sobre a maior pintura de conteúdo e o primeiro atraso de entrada, já falamos sobre o que exatamente esses termos significam e como otimizar seu site para cada um deles. Agora, queremos fazer o mesmo para o CLS.

A seguir, abordaremos exatamente o que é o Deslocamento cumulativo de layout, como ele é calculado, como testar o desempenho de seu site nessa área e qual é um bom valor a ser almejado. Depois disso, fornecemos instruções passo a passo para resolver quaisquer problemas de CLS que possam existir em seu site WordPress para melhorá-los.

Quando terminar, juntamente com os outros dois posts desta série, esperamos que você se sinta pronto para tornar seu site adequado para o selo de aprovação do Google.

Qual é o significado da mudança cumulativa de layout?

Como de costume, vamos começar com uma definição. Em uma frase, o CLS mede quando algo muda em uma página da Web que faz com que os elementos se movam (ou mudem, se você preferir) sem uma interação do usuário.

Pode ser que um formulário ou um anúncio no artigo que você está lendo carregue tarde e desça o parágrafo que você está lendo, de modo que você precise rolar para encontrar seu lugar novamente. Ou pior, muda a posição de um botão ou link em um momento inoportuno e você acaba clicando em algo que não queria.

Conseqüentemente, pode ser qualquer coisa, desde levemente irritante até totalmente irritante. Deslocamento cumulativo de layout é a métrica que captura esse comportamento para entender o problema para que você possa corrigi-lo.

Por que isso é importante?

Um site nervoso interrompe completamente o que você está fazendo no momento e pode até ter consequências irritantes na vida real. Como você pode imaginar, isso é muito ruim para a experiência do usuário e pode fazer com que os visitantes saiam. Isso é especialmente verdadeiro em smartphones onde, devido ao tamanho da tela, pequenos deslocamentos têm um impacto maior do que em máquinas desktop.

Por ser tão disruptivo, o Google coloca muito foco nessa métrica, tornando-a um dos principais valores pelos quais julga os sites. Então, se você quer agradar tanto seus visitantes quanto as pessoas (quero dizer, robôs) que decidem onde você aparece nos resultados de busca, faça o possível para eliminar o Cumulative Layout Shift do seu site.

O que causa CLS?

A causa da mudança de elementos do site geralmente ocorre porque os arquivos de uma página da web são carregados em velocidades diferentes. Outro fator são os elementos da página que são adicionados dinamicamente durante ou após o carregamento da página. Exemplos típicos incluem:

• Visuais como imagens ou vídeos sem dimensões definidas corretamente
• Conteúdo de terceiros, como anúncios, banners, incorporações ou iframes
• Fontes da Web que são menores ou maiores do que as fontes alternativas mostradas inicialmente

Outra fonte de CLS pode ser a marcação conflitante de CSS e JavaScript. Quando eles bloqueiam um ao outro, o processo de carregamento das páginas da web é interrompido.

Como é calculada a mudança cumulativa de layout?

Em contraste com seus predecessores, o cálculo do Deslocamento Cumulativo de Layout é um pouco mais complicado. Para entendê-lo, precisamos estabelecer alguns termos primeiro:

• Mudança de layout — É quando um elemento já visível na página se move de sua posição inicial depois de já ter sido renderizado. Esses tipos de elementos são chamados de elementos instáveis ​​(criativos, eu sei).
• Mudanças de layout esperadas x inesperadas — Mudanças de layout são negativas apenas se o usuário não as espera. Há também mudanças de layout que são esperadas e bem-vindas, como após uma interação com uma página da Web (por exemplo, envio de um formulário). Animações e transições CSS são outros exemplos de mudanças de layout esperadas. Para contabilizar isso, o CLS considera todas as mudanças de layout que ocorrem dentro de 500 ms de uma interação do usuário como esperadas.
• Fração de impacto — A porcentagem da viewport (a parte visível do site na tela) que um elemento em movimento impacta como número decimal (por exemplo, 0,5 se impactar 50% da tela).
• Fração de distância — Distância como a porcentagem da tela que um elemento instável move durante uma mudança. Também dado como um número decimal.
• Pontuação de mudança de layout — É calculada multiplicando a fração de impacto pela fração de distância (por exemplo, 0,4 x 0,15 = 0,06). Como consequência, elementos grandes que se movem por uma grande distância resultam em uma pontuação mais alta do que elementos pequenos que se movem por uma curta distância.

O CLS captura a maior ocorrência de pontuações inesperadas de mudança de layout durante um intervalo de cinco segundos. Obviamente, menor é melhor.

No final, você realmente não precisa saber os detalhes. Tudo o que você precisa saber é como medir o CLS e qual valor seu site deve buscar.

O que é uma boa pontuação de mudança de layout?

Uma boa pontuação é ter um valor CLS de 0,1 ou menos. Até 0,25 precisa ser melhorado, qualquer coisa acima disso é ruim e provavelmente resultará em desempenho de pesquisa reduzido.

Como testar a mudança cumulativa de layout

Para poder melhorar a pontuação do CLS em seu site, primeiro você precisa saber onde está. É difícil saber se isso acontece, porque as páginas da Web nem sempre se comportam da mesma maneira em diferentes dispositivos. Portanto, você pode não vê-lo em um site de desenvolvimento, mas os visitantes ainda podem encontrá-lo. Por esse motivo, é melhor testá-lo.

Existem várias maneiras de verificar se o Cumulative Layout Shift é um problema no seu site WordPress. Eles são praticamente os mesmos das outras métricas do Core Web Vitals. Seu primeiro porto de escala deve ser sempre o PageSpeed ​​Insights, que mostra a métrica em sua página de resultados.

Observe que ele usa resultados de laboratório e dados reais do relatório de experiência do usuário do Chrome. Ele ainda mostra imagens das mudanças de layout e do elemento de origem. Dessa forma, você tem uma ideia melhor de qual é o problema e onde ele ocorre.

Além disso, o PageSpeed ​​Insights fornece a proporção de quanto cada elemento contribui para a pontuação do CLS. Isso permite que você priorize o que tem o maior impacto negativo.

Além disso, você também pode usar o seguinte:

• O relatório Core Web Vitals dentro do Google Search Console
• Ferramentas de desenvolvedor do navegador Chrome
• Farol
• biblioteca JavaScript web-vitals

Há também uma extensão do Chrome chamada CLS Visualizer. Ele destaca elementos de mudança em suas páginas da web. Para o Firefox, experimente o SpeedVitals.

Como reduzir a mudança cumulativa de layout em seu site WordPress

Se você perceber que o CLS é um problema em seu site WordPress, provavelmente deseja corrigi-lo. É disso que trata o restante deste artigo.

Fornecer dimensões de mídia

Muitas soluções já se tornam claras quando você dá uma olhada nas causas da mudança cumulativa de layout acima. Como mencionado, um culpado comum de CLS são imagens e outras mídias sem valores definidos width e height . Sem dimensões fixas, o navegador não sabe quanto espaço reservar para elas. Isso é especialmente verdadeiro para a mídia que aparece na página posteriormente, como no carregamento lento.

Infelizmente, é prática comum de design responsivo não fornecer dimensões de imagem específicas. Na maioria das vezes, as imagens são definidas para width ou max-width: 100%; e height: auto; . Então cabe ao navegador descobrir quais são as dimensões reais quando ele baixa a imagem.

No passado, isso muitas vezes levava exatamente ao tipo de comportamento que estamos tentando evitar. As imagens de repente surgiram, movendo tudo ao redor. Portanto, você sempre deve fornecer dimensões para seus visuais ou pelo menos uma proporção de CSS.

Felizmente, se você estiver usando o WordPress, seu site definirá automaticamente as dimensões da imagem. Portanto, o problema geralmente não entra em jogo.

Se não for o caso de uma imagem específica, você pode corrigir isso no editor do Gutenberg.

Lidando com anúncios, incorporações e conteúdo semelhante

O conteúdo de terceiros carregado nas páginas costuma ser uma das maiores fontes de CLS. Esses são casos em que você não está necessariamente no controle do tamanho do produto final. Nem seus editores sabem com antecedência quanto espaço está disponível no site em que aparece. Portanto, você precisa declarar seu tamanho da mesma forma que para imagens.

Felizmente novamente para os usuários do WordPress, ao usar o editor Gutenberg para incorporar automaticamente o conteúdo de redes sociais, portais de vídeo ou fornecedores semelhantes em seu conteúdo, o editor adiciona automaticamente as declarações apropriadas de width e height .

Dessa forma, mesmo que o conteúdo demore mais para carregar do que o restante da página, ele já tem seu tamanho correto reservado. Como consequência, o layout não muda quando aparece.

Para outros tipos de conteúdo adicionados manualmente, certifique-se de adicionar width e height manualmente. Se você não souber a altura exata que um anúncio ou outro elemento terá, pelo menos adicione uma propriedade min-height a ele. Isso ainda permite elementos maiores, mas reserva algum espaço e pode eliminar ou pelo menos reduzir o CLS na página.

Outra técnica para minimizar o Cumulative Layout Shift no WordPress para conteúdo de terceiros é evitar colocá-lo no alto da página. Quanto mais alto ele estiver, mais conteúdo abaixo dele pode ser empurrado para baixo e maior será sua pontuação no CLS. Portanto, se puder, coloque-o no meio ou na parte inferior.

Otimize o conteúdo dinâmico

Conteúdo dinâmico são elementos de página que são adicionados a uma página depois que ela já foi carregada. O exemplo anterior eram imagens carregadas lentamente, mas normalmente também inclui coisas como banners, formulários ou até mesmo produtos relacionados que aparecem na rolagem.

Naturalmente, se você não planejar adequadamente, isso também pode levar a mudanças de layout. Aqui estão algumas maneiras de evitar isso:

• Reserve espaço antecipadamente — Semelhante ao anterior, se você tiver um contêiner com um tamanho fixo no qual possa carregar o conteúdo, ele manterá o layout estável, mesmo que chegue mais tarde. Um contêiner fixo também pode ser um carrossel ou algo semelhante.
• Conecte-o com uma interação do usuário — Se o conteúdo for carregado dinamicamente após uma ação do usuário, ele não acarretará nenhuma penalidade para o CLS, mesmo que o layout mude. Tenha em mente o corte de 500ms.
• Carregar conteúdo fora da tela — Se você carregar conteúdo fora da viewport e fornecer ao usuário um aviso de que está disponível e uma opção para rolar até ele, também não haverá CLS. As plataformas de mídia social gostam de fazer isso para novas atualizações.

Melhore o Manuseio de Fontes da Web

Fontes da Web também podem causar mudança de layout. As duas formas comuns são que você vê o texto não estilizado primeiro antes que a fonte da web entre (Flash of Unstyled Text ou FOUT) ou não vê nenhum texto a princípio e depois vem junto com a fonte da web (Flash of Invisible Text ou FOI).

Ambos podem levar a mudanças de layout e aqui está o que você pode fazer sobre isso:

• Use o formato de fonte correto — Se você carregar fontes personalizadas em seu site WordPress, certifique-se de usar o formato WOFF2 ou WOFF. Esses ocupam menos espaço, carregam mais rápido e ajudam a evitar os problemas acima.
• Use a fonte alternativa correta — Se você estiver usando uma fonte alternativa muito diferente da sua fonte real, o momento em que a troca ocorrer provavelmente levará a um movimento de layout. Você pode evitar isso usando uma fonte de fallout próxima ao produto final. O Font Style Matcher pode ajudá-lo a encontrar um.
• Fontes pré-carregadas — Coloque os recursos de fonte da Web no início do documento e adicione rel=preload a eles. Dessa forma, os navegadores os priorizarão.

Também ajuda a hospedar fontes localmente ou, pelo menos, usar um CDN para disponibilizá-las aos usuários o mais rápido possível. Dessa forma, você reduz a probabilidade de trocar de fonte durante o carregamento e causar alterações no layout.

Não deixe que a mudança cumulativa de layout destrua seu site WordPress

A mudança cumulativa de layout é uma das três métricas que o Google considera vitais e a última desta série detalhada. É um indicador importante para a experiência do usuário, pois mede a estabilidade do layout da página durante e mesmo após o carregamento.

Como as outras métricas do Core Web Vitals, isso não importa apenas para os usuários, mas também conta para a classificação de pesquisa e, portanto, é importante para o sucesso do seu site.

Até agora, você sabe o que é, como é calculado, o que está causando isso e como testar e lidar com isso. Que seu layout seja sólido para sempre, meu amigo.

Você tem dicas adicionais sobre como evitar a mudança cumulativa de layout no WordPress? Deixe-nos saber nos comentários abaixo!