A maioria dos sites são criados para serem acessados
No caso do desenvolvimento da Web, os usuários que navegam de página em página em um site às vezes podem experimentar o que é conhecido como Mudança de layout cumulativa (CLS). É quando os elementos visuais de uma página sofrem uma mudança repentina ou carregam incorretamente. De repente, o texto fica maior ou menor, as imagens mudam de posição ou o layout da página inteira muda.
Por que isso ocorre e como podemos corrigi-lo? Neste guia, exploraremos o que é o CLS e como você pode evitá-lo em seu site.
O que é Mudança de Layout Cumulativa?
A forma perceptível mais comum de CLS é o atraso no carregamento de imagens . Em sites complexos que são pesados
Quando uma página da Web tem uma pontuação alta no CLS, é difícil determinar quando ela foi totalmente carregada. Quanto mais complicado e pesado de mídia for o site, maior a probabilidade de mudanças no layout da experiência.
Por exemplo, páginas da web de mecanismos de pesquisa simples com muito poucos elementos visuais têm pouco ou nenhum CLS. No entanto, isso não significa que todos os sites complexos ou com muitos recursos tenham pontuações altas no CLS. Por exemplo, a loja online da Amazon está repleta de widgets, imagens e links, mas carrega rapidamente sem mudanças perceptíveis.
O que causa a mudança cumulativa de layout?
O CLS tende a ocorrer porque os navegadores da Web carregam elementos sequencialmente em momentos diferentes. Além disso, você pode ter elementos de mídia em seu site com propriedades desconhecidas (como dimensões).
Nos casos em que você não especifica a largura ou a altura de um elemento de mídia (como uma imagem), seu navegador da Web não saberá quanto espaço alocar até que a página da Web seja carregada completamente. Por isso, a mudança drástica de layout. Em suma, a principal razão para a maioria dos CLS é o carregamento ineficiente.
É importante observar que, mesmo que você não perceba a mudança de layout em tempo real, isso não significa necessariamente que não haja nenhuma mudança ocorrendo. Os navegadores da Web geralmente armazenam dados de sites em cache, por isso é mais fácil carregar páginas da Web quando você as revisita. Medir a pontuação do CLS é a melhor maneira de determinar se o seu site passa por uma mudança substancial de layout.
Como medir a pontuação CLS do seu site
A pontuação CLS denota o número de mudanças de layout que uma página da Web experimenta ao longo de sua vida útil. Podemos derivar a pontuação CLS do que é conhecido como janela de sessão. Uma janela de sessão descreve o número de mudanças de layout que ocorrem em um intervalo de cinco segundos. Para calcular a pontuação CLS, precisamos multiplicar a fração de distância pela fração de impacto:
Pontuação CLS = Fração de Distância x Fração de Impacto
A fração de impacto descreve o quanto um elemento instável afeta a área perceptível entre dois quadros. A fração de distância descreve a quantidade de deslocamento de um elemento entre os quadros. Uma pontuação CLS de 0,10 e abaixo (0,0 – 0,10) é ótima. Uma pontuação CLS acima de 0,10, mas abaixo de 0,25 (0,10 -0,25) é moderada e requer melhora, enquanto uma pontuação CLS acima de 0,25 (0,25 <) é ruim.
Esses conceitos podem ser um pouco difíceis de entender. Felizmente, você não precisa calcular o CLS do seu site manualmente. Há uma série de ferramentas online (e offline) que podem calcular a pontuação CLS para você.
Atualmente, a maneira mais popular de medir o CLS da sua página da web é por meio do PageSpeed
Outras ferramentas CLS incluem:
- GT Metrix
- Depurador CLS do Google Web Vitals
- Extensão Google Chrome Web Vitals
- Farol do Google
- Teste de página da Web
Como o PageSpeed
Para medir sua pontuação CLS, navegue até a página inicial do PageSpeed
Para encontrar sua pontuação no CLS, role para baixo até a seção Avaliação de Principais Vitais da Web.
Se usarmos a página inicial da Amazon como exemplo, provavelmente encontraremos uma pontuação CLS inferior a 0,10. Durante nossos testes, descobrimos que o site para celular teve uma pontuação CLS de 0,01, enquanto a versão para computador teve uma pontuação de 0,05.
Mas como eles fazem isso quando seu site é tão cheio de recursos? Vejamos como você também pode ter uma pontuação CLS semelhante à da Amazon.
Como otimizar o CLS
A melhor maneira de ver quais elementos estão causando sua alta pontuação de CLS é usar o depurador de CLS do Google Web Vitals. Ele mostra um GIF de todos os recursos de mudança em seu site. Anúncios e arquivos de mídia são os culpados mais comuns por altas pontuações no CLS. Outras causas podem incluir fontes, CSS assíncrono, animações e iframes. Para melhorar sua pontuação no CLS, você terá que otimizar esses elementos.
Garantir que seu site tenha um CLS respeitável é tão importante quanto garantir que ele tenha um SEO local forte e conteúdo relevante. O mecanismo de busca do Google tende a dar preferência a sites que proporcionam uma ótima experiência ao usuário e são bem otimizados.
Para isso, veja algumas etapas para melhorar a pontuação CLS do seu site:
Adicione propriedades de dimensão a todos os arquivos de mídia
Se você fizer upload de arquivos de mídia com propriedades desconhecidas, aumentará o risco de mudança de layout porque seu navegador da Web precisará descobrir o tamanho de sua imagem e determinar a orientação do layout após o carregamento. Essas situações têm maior chance de ocorrer para imagens e arquivos grandes de alta resolução.
Ao carregar arquivos de mídia com propriedades de tamanho ausentes, você colocou muito trabalho nas mãos do navegador da web. Você deve adicionar as propriedades de altura e largura para cada arquivo de mídia visual carregado. Você pode fazer isso visualizando seu código-fonte e adicionando manualmente as propriedades de largura e altura.
Certifique-se de que as fontes sejam carregadas localmente
O texto deve permanecer visível durante o carregamento da fonte. O primeiro passo para conseguir isso é garantir que as fontes sejam carregadas localmente, em vez de serem extraídas de sites de fontes de terceiros.
Se você achar que suas fontes estão sendo extraídas de um site de terceiros, você pode usar um plug-in como o OMGF para hospedá-las localmente e carregá-las mais rapidamente. Isso não apenas melhorará sua pontuação no CLS, mas também é um passo em direção ao design ecológico .
Evite FOIT e FOUT
Flash de texto invisível (FOIT) ocorre quando você não especifica uma fonte de fallback. Enquanto seu navegador tenta carregar sua fonte ou encontrar uma alternativa, os usuários serão apresentados a um espaço vazio onde o texto deveria estar.
Durante o flash de texto sem estilo (FOUT), você verá a fonte de fallback padrão do navegador da Web até que ele possa carregar a fonte especificada. Para corrigir isso, você pode adicionar a propriedade font-display: swap .
Se você já baixou fontes do Google, notará que ele adiciona essa tag ao final de cada URL. A maneira mais fácil de adicionar essa propriedade é usando o plug-in Swap Google Fonts Display no WP.
No entanto, lembre-se de que esse plug-in funciona apenas para fontes do Google e anexa automaticamente a propriedade de troca de exibição a esses URLs. Se você estiver hospedando fontes localmente, poderá usar o plug-in String Locator para encontrar todos os seus arquivos de fonte e alterá-los. Você precisará abrir a folha de estilo da fonte no WP e modificá-la.
Alternativamente, você pode usar plugins de cache , como um que otimizará automaticamente as fontes para você adicionando a propriedade de troca de fontes.
Pré-carregar fontes
Para garantir que você está hospedando fontes localmente, você pode pré-carregar suas fontes com plugins como:
Se você não puder usar esses plugins, você pode pré-carregar suas fontes editando seu arquivo header.php. Apenas certifique-se de testar seu site completamente depois de pré-carregar as fontes. Pré-carregar muitas fontes pode prejudicar seu site. Assim como em qualquer grande chance de back-end, sugerimos que você faça backup do seu site WordPress com antecedência.
Desabilitar a otimização de entrega de CSS
Se você estiver usando o WP Rocket para otimizar a entrega de CSS ou carregar CSS de forma assíncrona com o LiteSpeed
Como alternativa, você pode definir o que é conhecido como CSS crítico de fallback. Isso envolve a geração de um script de fallback crítico usando uma ferramenta como Critical Path CSS Generator .
A remoção de scripts de bloqueio de renderização também pode diminuir sua pontuação CLS. Recomendamos que você teste seu CLS com a otimização de entrega de CSS habilitada primeiro e, em seguida, teste-a quando estiver desabilitada para comparação.
Desativar animações
Se você estiver usando animações, recomendamos desativá-las para a versão móvel do seu site, pois as animações podem atrapalhar o tempo de carregamento do seu site. Se você insiste em ter animações para seu site, sugerimos usar as opções de transformação e tradução de CSS .
Alternativamente, você pode usar o plugin Happy Addons Elementor. Isso permite animar elementos sem causar mudanças de layout.
A melhor maneira de eliminar a maioria das mudanças de layout é modificando como sua página da web é carregada. Por sua vez, você pode aumentar a velocidade e a eficiência do seu site WordPress . Como sempre, trata-se de melhorar a experiência do usuário. Quanto mais responsivo for o seu site, maior a probabilidade de os usuários o adicionarem aos favoritos e o revisitarem.