9 Estratégias fáceis para evitar grandes mudanças de layout [Não é necessário desenvolvimento]

As grandes mudanças de layout no teu sítio Web podem levar a uma má experiência do utilizador, podendo levar os visitantes a abandonar o sítio. Ocorrem quando os elementos se movem inesperadamente enquanto a página carrega, levando os utilizadores a clicar nos botões ou ligações errados.

Isto também pode afetar a tua pontuação Cumulative Layout Shift, uma métrica importante na iniciativa Core Web Vitals da Google.

Felizmente, podes melhorar os tempos de carregamento e garantir um layout estável, implementando as melhores práticas, como a atribuição de dimensões e a utilização de marcadores de posição estruturais.

Neste artigo, vamos explorar as causas, o seu impacto e estratégias simples para evitar grandes mudanças de layout.

O que são mudanças de layout?

Uma grande mudança de layout acontece quando um site não está optimizado corretamente, fazendo com que as coisas na página se movam muito à medida que esta carrega.

Isto faz com que as imagens, os vídeos, os tipos de letra ou os botões se movam inesperadamente, dificultando a utilização do sítio pelos visitantes. Pode até fazer com que saiam antes de poderem ver o conteúdo.

Perder visitantes devido a uma má experiência do utilizador já é difícil. A Mudança cumulativa de layout (CLS) piora a situação, prejudicando a tua pontuação do Google Core Web Vitals. Lembra-te, a estabilidade visual tem um impacto direto na pontuação Core Web Vitals e no SEO de um Web site.

Ferramentas como PageSpeed Insights, Lighthouse ou Chrome DevTools podem identificar grandes mudanças de layout e identificar os elementos problemáticos.

A execução de uma auditoria de desempenho do WordPress pode fornecer informações valiosas sobre quaisquer problemas que estejam a causar grandes mudanças de layout no teu site. Isto permite-te identificar e corrigir elementos problemáticos para melhorar o desempenho do teu site.

Explicação de CLS (Cumulative Layout Shift)

O termo CLS significa Cumulative Layout Shift (Mudança cumulativa de layout), que é uma métrica no Core Web Vitals usada para medir mudanças inesperadas de layout e faz parte da atualização de Experiência de página do Google.

A pontuação CLS de um Web site reflecte a forma como este lida com mudanças de disposição inesperadas, avaliando a estabilidade do conteúdo e medindo a distância a que os elementos afectados se deslocaram na janela de visualização.

Estes dados são utilizados para calcular uma pontuação CLS exacta.

O que é uma pontuação de aprovação no CLS?

Bem, aqui tens as pontuações do Google para o CLS:

• Bom – Inferior ou igual a 0,1 segundos
• Precisa de ser melhorado – Menos de ou igual a 0,25 segundos
• Fraco – Mais de 0,25 segundos.

Uma boa pontuação CLS é crucial para uma boa classificação nos SERPs do Google e para cumprir os critérios Core Web Vitals.

Evita grandes mudanças de layout com o Cloudways WordPress Hosting

Garante um desempenho consistente do site e elimina mudanças de layout com nossa pilha otimizada. Obtém pontuações CLS baixas para velocidades de carregamento rápidas e classificações SERP elevadas.

TESTE AGORA

Como é que as mudanças de layout afectam o desempenho da página?

Quando os utilizadores visitam uma página Web, esperam interagir rapidamente com vários elementos, como botões, formulários de contacto, imagens e vídeos. No entanto, mudanças inesperadas de layout podem fazer com que esses elementos se movam, se ajustem ou sejam realocados à medida que a página é carregada.

Isto pode levar a que os utilizadores cliquem ou toquem acidentalmente em conteúdos não pretendidos, especialmente em dispositivos móveis com espaço de ecrã limitado. Estas mudanças de disposição tornam a página visualmente instável.

Uma vez que o CLS faz parte do Web Vitals, que reflecte a experiência geral da página, reduzir as mudanças de layout e melhorar as pontuações do CLS é essencial para aumentar a satisfação do utilizador e otimizar o desempenho da página.

Como evitar grandes mudanças de layout?

Depois de identificares as mudanças de apresentação que afectam as tuas pontuações CLS, está na altura de as corrigir. Aqui tens alguns métodos para evitar grandes alterações de apresentação.

1. Evita inserir novos conteúdos por cima de conteúdos existentes

Para evitar mudanças inesperadas de layout, evita inserir conteúdos dinâmicos, como banners ou formulários, por cima de conteúdos existentes, a não ser que seja solicitado pela interação do utilizador.

Por exemplo, um banner que carrega mais lentamente do que a página pode causar uma mudança significativa no layout, levando a uma má experiência do utilizador e a pontuações CLS mais elevadas.

Uma solução possível: Inicia o carregamento de novos conteúdos com a interação do utilizador:

• Utiliza botões como“Carregar mais” ou“Atualizar” para ativar o carregamento de conteúdos.
• Pré-busca conteúdo antes da interação do utilizador para garantir a apresentação imediata.

Exemplifica: A funcionalidade “Load More” do sítio Web da Chloé carrega dinamicamente conteúdo adicional sem causar alterações inesperadas na apresentação.

2. Gerir a forma como as fontes são carregadas no teu site

A otimização do carregamento de tipos de letra no teu site é crucial para evitar problemas como o Flash de Texto Invisível (FOIT) e o Flash de Texto Sem Estilo (FOUT), que podem levar a grandes mudanças de layout (CLS).

Para resolver este problema, podes utilizar duas estratégias como:

1. Pré-carregamento de fontes da Web:

• O pré-carregamento de fontes da Web garante que elas estejam prontamente disponíveis durante o carregamento da página. Podes conseguir isto adicionando uma etiqueta de ligação ao cabeçalho HTML e especificando o nome do tipo de letra, o formato e o atributo de origem cruzada.

Por exemplo, vê o código abaixo:

<link rel="preload" href="/yourwebfont" as="font" type="font/format" crossorigin>

Toma:

• “/yourwebfont” especifica o nome do tipo de letra da Web que estás a carregar.
• “format” especifica o formato específico do tipo de letra da Web (por exemplo, ttf, woff, woff2, etc.).

Podes utilizar plug-ins de otimização, como o plug-in de cache Cloudways Breeze, para pré-carregar fontes e links da Web.

Com o Breeze, podes melhorar a velocidade do teu site WordPress através das suas caraterísticas notáveis. Utiliza a cache interna para acelerar a velocidade de carregamento das páginas, garantindo que os visitantes não têm de esperar muito tempo para aceder ao seu conteúdo.

2. Utiliza o atributo font-display:

• O atributo font-display controla a forma como os tipos de letra são apresentados durante o carregamento. Opções como auto, block, swap, fallback e optional permitem-te gerir a visibilidade do texto com base no estado de carregamento do tipo de letra.

Por exemplo, se fores um utilizador do WordPress, eis como podes utilizar a propriedade font-display: swap no teu CSS:

Se estiveres a utilizar o tema Astra como eu, segue estes passos para adicionar o atributo font-display: swap ao teu ficheiro de tema:

• Acede ao teu painel de controlo do WordPress.
• Vai a Aparência → Editor de ficheiros de temas.
• Aqui, localiza a folha de estilos onde podes fazer as alterações necessárias. Para o tema Astra, os ficheiros CSS estão normalmente localizados no diretório assets/css/.

• Acede a estes ficheiros utilizando um cliente FTP com as tuas credenciais de início de sessão FTP obtidas junto do teu fornecedor de alojamento.
• Navega até ao diretório wp-content/themes/astra/assets/css/ .

• Procura um ficheiro que contenha a declaração @font-face.

• Transfere o ficheiro e abre-o num editor de texto.

• Adiciona font-display: swap à declaração @font-face para o tipo de letra.

• Guarda as tuas alterações e carrega o ficheiro atualizado para o servidor, substituindo o existente.
• Uma vez concluído, o aviso“Assegurar que o texto permanece visível durante o carregamento de fontes Web” já não deve aparecer no teu relatório Google PageSpeed Insights, indicando uma otimização bem sucedida do carregamento de fontes do teu Web site.

Estratégias adicionais de gestão de fontes:

1. Otimizar ficheiros de fontes:

Personaliza ficheiros de tipos de letra especificando quais os caracteres que serão aplicados. Isto é particularmente útil para elementos como logótipos ou cabeçalhos, onde os caracteres específicos são conhecidos antecipadamente.

Por exemplo, num logótipo da“ABC Corporation“, incluir apenas “A”, “B”, “C”, “&” e “-“ no ficheiro da fonte reduz o seu tamanho, optimizando a velocidade de carregamento. Temos um guia sobre como usar fontes personalizadas do Google Fonts no WordPress que pode ser útil para ti.

2. Define as propriedades de altura mínima:

Além disso, considera a possibilidade de definir propriedades de altura mínima adequadas para as secções do Web site para atenuar as alterações de layout induzidas pelo tipo de letra. Por exemplo, aplicar uma altura a elementos como <h1> pode estabilizar os layouts, evitando que o conteúdo abaixo se desloque quando diferentes fontes são carregadas.

cabeçalho {
  altura mínima: 60px;
}
@media (min-width: 700px) {
  cabeçalho {
  altura mínima: 220px;
  }
}

Embora esta abordagem possa não ser universalmente aplicável, a sua combinação com outras técnicas de otimização, como o pré-carregamento de tipos de letra e a utilização de atributos de visualização de tipos de letra, pode melhorar a experiência do utilizador, minimizando as interrupções causadas pelo carregamento de tipos de letra.

3. Liga-te às fontes de alimentação:

Se as suas fontes estiverem alojadas noutro local na Internet (por exemplo, numa rede de distribuição de conteúdos ou num serviço de fontes), pode configurar uma ligação rápida a essas fontes. Isto ajuda o teu site a encontrar as fontes mais rapidamente, ficando tudo pronto mais cedo.

3. Evita animações não compostas

Utiliza animações compostas sempre que puderes. Isto ajuda a diminuir o trabalho do main-thread, evita repintar pixéis à medida que a página carrega e reduz as mudanças de layout.

Podes resolver o problema “Evitar animações não compostas” implementando alterações simples como a adição da “Propriedade Will-Change”.

Deixa-me partilhar um exemplo rápido para te facilitar a compreensão de como posso implementar a propriedade Will-Change. Se aceder ao meu Painel de Controlo do WordPress e navegar para Aparência > Personalizar, na secção“CSS adicional“, posso ver algum código CSS que pode não estar optimizado para animações.

Devido ao CSS não otimizado, estou encontrando o erro“Evitar animações não compostas” no Page Speed Insights, conforme mostrado na captura de tela abaixo.

Agora, vamos tentar otimizar o ficheiro CSS implementando a “Propriedade Will-Change”.

Adiciona a propriedade Will-Change

Isto permite que o browser saiba das próximas alterações de animação, o que ajuda a melhorar o desempenho da apresentação.

.minha-animação {
  largura: 100px;
  altura: 100px;
  Cor de fundo: vermelho;
  posição: absoluta;
  will-change: transform, opacity; /* Nova linha */
  animação: complexMove 5s linear infinito;
}

Após a otimização, substitui o código antigo pelo novo CSS optimizado na tua secção CSS adicional.

Este ajuste não altera a animação, mas deve resolver o erro. Verifica para confirmar que o erro foi resolvido. A otimização do código também pode melhorar a pontuação de desempenho do teu Web site.

4. Certifica-te de que as acções do utilizador são concluídas em 500 ms

Ao trabalhar no teu sítio Web, é importante garantir que, quando os utilizadores interagem com o teu conteúdo, as coisas não saltam subitamente no ecrã. Isto pode ser muito frustrante para eles.

Para evitar isto, tens de garantir que quaisquer alterações ao layout ocorrem num período de tempo rápido – especificamente, num período de 500 milissegundos após a ação do utilizador. Se demorar mais do que isso, a tua pontuação Cumulative Layout Shift (CLS) pode ser afetada.

Podes verificar isto utilizando o Chrome DevTools. Regista o desempenho da tua página e procura mudanças súbitas após as interações do utilizador. Se a mudança ocorrer mais de 500 milissegundos após a interação, poderá ter um impacto negativo na tua pontuação CLS.

Na captura de ecrã acima de Apple.com, podes ver que obtivemos uma pontuação de 0,0004175 – que está abaixo do limite de 0,1.

Se a tua pontuação ultrapassar o limite, como 0,4004175, certifica-te de que aceleras o processamento ou o carregamento de conteúdos para minimizar os atrasos.

Por exemplo, se estiveres a obter conteúdo da rede, tenta atribuir-lhe espaço antecipadamente. Desta forma, não serás penalizado por isso, mesmo que demore mais de 500 milissegundos a carregar.

Outro aspeto a ter em conta são as animações. Certifica-te de que são breves – não mais de 500 milissegundos – para evitar afetar a tua pontuação CLS. Já falámos sobre como evitar animações não compostas anteriormente neste blogue. Podes voltar a essa secção para uma rápida revisão.

Ao otimizar para CLS, não só melhora o desempenho do seu sítio Web, como também proporciona uma melhor experiência de utilizador em geral.

5. Usa JavaScript de forma síncrona

O JavaScript síncrono executa o código sequencialmente, bloqueando outras execuções até que a tarefa atual seja concluída.

Vê como é aplicado: Inicialmente, oculta o conteúdo problemático utilizando CSS. Depois, utilizas JavaScript de bloqueio de processamento para preencher e revelar o conteúdo, impedindo mudanças de layout até que esteja totalmente resolvido.

No entanto, essa abordagem pode afetar métricas como LCP e First Contentful Paint, pois atrasa a renderização. No entanto, vale a pena considerá-la quando não existe outra solução para evitar mudanças de layout.

Para a implementação, certifica-te de que as CSS são incorporadas no HTML para manter a ordem correta. Em alternativa, o JavaScript pode ser utilizado para revelar o conteúdo, mas as CSS em linha garantem a visibilidade mesmo que o JavaScript falhe ou esteja desativado.

<style>
.cls-inducing-div {
  mostra: nenhum;
}
</style>

<div class="cls-inducing-div"></div>

<script>
// O teu JavaScript de bloqueio de renderização vai aqui para preencher a div
...
</script>

<style>
.cls-inducing-div {
  apresenta: bloco;
}
</style>

Essa técnica também pode ser estendida para JavaScript externo, mas pode introduzir um atraso adicional à medida que os scripts são solicitados e baixados. Para atenuar isso, pré-carrega o recurso JavaScript na seção <head> do seu HTML.

Embora vá contra o conselho comum que ouves dos programadores, o JavaScript síncrono pode ser útil em situações em que as mudanças de conteúdo são inevitáveis, embora possa atrasar a renderização.

O WordPress Gerido Mais Rápido para Evitar Grandes Mudanças de Layout

Experimenta velocidades de servidor incrivelmente rápidas com a pilha híbrida Cloudways LAMP + NGINX. Melhora seus Core Web Vitals para evitar mudanças incômodas no layout do WordPress.

TESTE AGORA

6. Especifica as dimensões da imagem e do vídeo

Para navegadores modernos como o Firefox e o Chrome, definir dimensões precisas para imagens e vídeos é crucial para evitar que se desloquem durante o carregamento do site. Um movimento inesperado pode frustrar os utilizadores, prejudicando o aspeto do teu sítio Web e a velocidade percebida.

Nas lojas de comércio eletrónico, onde os produtos apresentam várias imagens de tamanhos diferentes, é comum encontrar este problema.

No entanto, ao especificares a largura e a altura de cada elemento, informas o browser sobre o espaço de que necessitam, garantindo um carregamento suave sem mudanças de layout perturbadoras.

Para remediar esta situação:

• Seleciona a tua imagem a partir da biblioteca multimédia ou carrega-a e adiciona-a a qualquer página ou publicação.

• Seleciona a imagem com o cursor para revelar o painel de definições.

• Quando a tua imagem for carregada, clica em Editar imagem.

Nota: Podes ver o tamanho da imagem e as dimensões predefinidas no painel de definições.

• Localiza a opção Escala de imagem no painel Definições.
• Actualiza as dimensões de imagem pretendidas.
• Clica em Escala para guardar as alterações.

Para qualquer pessoa que utilize temas como o WoodMart ou qualquer outro tema para WordPress, basta adicionar as informações de tamanho correto para as tuas imagens e vídeos e isso pode fazer uma grande diferença na redução para 0 do CLS nas páginas do teu sítio Web do WoodMart.

7. Dispõe de um espaço dedicado à publicidade

É fundamental definir tamanhos específicos para os anúncios no teu sítio Web. Ao decidires antecipadamente as dimensões de cada anúncio, evitas inadvertidamente que outros elementos da tua página se desloquem.

Isto é particularmente útil porque os anúncios podem não aparecer imediatamente, podendo perturbar o esquema do teu Web site e causar frustração aos utilizadores.

Nos casos em que um anúncio pode não ser carregado imediatamente devido a um inventário de anúncios limitado, a utilização de marcadores de posição ou banners alternativos que se ajustem a estas dimensões reservadas pode manter a estabilidade do esquema da tua página.

Este método garante que a experiência do utilizador se mantém consistente, mesmo quando os anúncios reais demoram mais tempo a carregar ou não são apresentados.

Para reduzir ainda mais o impacto dos anúncios, incorporações e iframes no layout do teu site:

Utiliza marcadores de posição: Implementa marcadores de posição para espaços de anúncios quando estes não estão disponíveis, mantendo a consistência do esquema e evitando alterações.

Carrega previamente os tamanhos: Antes de adicionares anúncios ao teu Web site, decide qual o tamanho máximo de um anúncio e cria espaço para ele. Desta forma, garantes que já há espaço para o anúncio e o teu Web site não tem de mudar de lugar inesperadamente quando o anúncio aparece.

Posicionamento: Pensa em colocar anúncios que não incomodem muito as pessoas, como na parte inferior da página ou de lado. Isto ajuda a manter o bom aspeto e o bom funcionamento do teu Web site, uma vez que os anúncios não atrapalham nem alteram a configuração da tua página.

Ao integrar estas estratégias, podes melhorar significativamente a estabilidade do layout do teu sítio Web, melhorando a experiência geral do utilizador.

8. Optimiza o conteúdo dinâmico

Garantir uma experiência de utilizador perfeita no teu sítio Web implica uma gestão cuidadosa do conteúdo dinâmico, como anúncios, pop-ups e notificações.

Reservar espaço para estes elementos é fundamental para manter a estabilidade visual e evitar mudanças de disposição incómodas. Esta abordagem permite que o teu site acomode conteúdo dinâmico sem perturbar a disposição. Para pop-ins automáticos, como avisos de cookies, desliza-os a partir da extremidade inferior. É menos visível para ti e mantém o conteúdo por cima sem ser baralhado.

9. Reduzir as dependências de terceiros

Para melhorar o desempenho e a segurança do teu site, é essencial minimizar a dependência de dependências de terceiros.

• Começa por auditar todos os scripts externos, iframes e outros serviços para compreender o seu impacto no teu site.
• Dá-lhes prioridade com base na necessidade e considera a possibilidade de remover os que não são cruciais.
• Muda para alternativas auto-hospedadas para reduzir os pedidos externos, melhorar os tempos de carregamento e controlar os teus dados.

Para os restantes serviços de terceiros:

• Implementa o carregamento lento para que não prejudiquem o tempo de carregamento inicial do teu site.
• Simplifica as integrações de terceiros para garantir uma experiência mais rápida, segura e fácil de utilizar no sítio Web.

Resultados antes da implementação das estratégias acima:

Resultados após a implementação das estratégias acima referidas:

Podes ver que, ao depender menos de ferramentas de terceiros, melhorámos a pontuação de desempenho do nosso site de 59 para 93 e reduzimos o CLS de 0,024 para 0.

Conclusão

As grandes mudanças de layout podem ser irritantes, levando a erros do utilizador ou fazendo com que as pessoas percam o seu lugar numa página. Evitá-las é essencial para melhorar a experiência do utilizador no teu Web site e pode também ajudar-te a obter uma classificação mais elevada nas SERPs do Google.

A implementação das dicas práticas que partilhámos neste artigo pode colocar-te numa posição melhor para evitar grandes mudanças de layout e melhorar a experiência do utilizador do teu site. Para mais optimizações, consulta o nosso guia sobre caching do WordPress.

Por último, lembra-te de que o alojamento web pode afetar as classificações SEO. Por isso, escolhe uma solução de alojamento WordPress fiável como a Cloudways.