Corrigir os saltos de layout: as causas mais frequentes
Um layout que salta é o erro que os visitantes mais sentem e que os programadores menos veem – porque num computador rápido, com a cache cheia, nada salta. Seis causas cobrem quase todos os casos.
O essencial
- Seis causas cobrem quase todos os casos – imagens sem medidas, fontes carregadas depois, conteúdos incorporados de terceiros, avisos exibidos a posteriori, CSS carregado tarde e conteúdos inseridos dinamicamente.
- O valor é medido com regularidade como melhor do que é no próprio computador: ligação rápida, cache cheia, outro tamanho de ecrã.
- A medida isolada mais eficaz é dar a cada imagem e a cada elemento incorporado medidas fixas ou uma proporção.
- Uma barra de aviso que aparece depois do carregamento e empurra o conteúdo para baixo é a segunda causa mais frequente – e a mais fácil de corrigir.
As seis causas
1. Imagens sem indicação de medidas
Sem width e height, o navegador não sabe quanto espaço reservar – o texto desliza assim que a imagem chega.
Correção: definir ambos os atributos e acrescentar height: auto no CSS, para manter o redimensionamento.
2. Fontes carregadas depois
O texto aparece primeiro na fonte de substituição e salta na troca, porque ambas ocupam larguras diferentes.
Correção: pré-carregar a fonte, font-display: swap, e aproximar as métricas da fonte de substituição às da fonte final.
3. Conteúdos incorporados de terceiros
Os vídeos, os mapas e os widgets de avaliações chegam sem altura conhecida e empurram tudo para baixo ao aparecer.
Correção: definir um marcador de posição com proporção fixa, dentro do qual o conteúdo é carregado.
4. Avisos exibidos a posteriori
Um banner de consentimento ou uma barra de campanha que aparece em cima depois do carregamento e empurra toda a página para baixo.
Correção: reservar o espaço desde o início, ou exibir por sobreposição em vez de por deslocamento.
5. CSS carregado tarde
Se a folha de estilos só produz efeito depois da primeira renderização, a página é apresentada primeiro sem estilo e depois com ele.
Correção: entregar cedo as regras necessárias à área visível – por completo, não em partes.
6. Conteúdos inseridos dinamicamente
Um aviso, uma lista ou uma área que o JavaScript insere depois do carregamento por cima do conteúdo existente.
Correção: inserir abaixo da área visível ou reservar espaço.
Sabia que…?
A causa cinco é a mais traiçoeira, porque localmente quase nunca ocorre: numa ligação rápida, a folha de estilos chega antes da primeira renderização e nada salta. Numa ligação lenta chega depois – e a página inteira é construída duas vezes.
Entregar cedo uma parte do CSS não chega: se ali faltar uma regra que afete a área visível, salta precisamente esse elemento. Ou por completo para a área visível ou de todo – as meias soluções são aqui piores do que nenhuma.
Medir bem
| Forma de medir | O que mostra | Armadilha |
|---|---|---|
| Computador próprio, ferramentas de programador | indícios grosseiros | rápido de mais, cache cheia |
| Teste de laboratório numa ferramenta | valor reproduzível | uma condição, não a realidade |
| Dados de campo de visitantes reais | o que acontece de facto | precisa de tráfego suficiente |
| Móvel com ligação travada | o teste isolado mais honesto | tem de ser configurado de propósito |
Um caso que fica na memória: uma página tinha localmente um valor impecável e na ferramenta de análise um valor muito mau. A causa era uma folha de estilos entregue em parte antecipadamente – faltavam-lhe três regras para áreas da zona visível.
Localmente isso nunca se notava, porque o ficheiro completo chegava mais depressa do que a primeira renderização. Com travagem chegava depois, e três áreas saltavam. A lição: nos saltos de layout, a impressão local não é uma contraprova, é apenas outro cenário – e normalmente o menos realista.
A ordem da correção
- Verificar todas as imagens.
widtheheightdefinidos,height: autono CSS. Normalmente metade do problema. - Enquadrar os conteúdos de terceiros. Marcador de posição com proporção fixa.
- Verificar os avisos exibidos. Por sobreposição em vez de por deslocamento.
- Verificar o carregamento das fontes. Pré-carregar, aproximar a fonte de substituição.
- Verificar a entrega do CSS. Completa para a área visível.
- Voltar a medir – com travagem. E depois de cada passo isolado, senão não se sabe o que fez efeito.
Ajuda-me a encontrar e corrigir os saltos de layout no nosso site. Dados: - Valor medido de deslocamento de layout: [valor, ferramenta, móvel ou computador] - Elementos que, segundo a medição, se deslocam: [lista, se conhecida] - As imagens têm atributos width/height? [sim / não / em parte] - Como é entregue o CSS? [ficheiro externo / em linha / parcialmente em linha] - Conteúdos incorporados de terceiros: [vídeos, mapas, avaliações, chat] - Aparece algo depois do carregamento? [banner, aviso, barra de campanha] - Como são carregadas as fontes? [dado] Tarefas: 1. Atribui cada elemento que se desloca a uma das seis causas: imagens sem medidas, fontes carregadas depois, conteúdos incorporados de terceiros, avisos exibidos a posteriori, CSS carregado tarde, conteúdos inseridos dinamicamente. 2. Indica, por causa, a correção concreta com exemplo de código. 3. Se o CSS for entregue apenas parcialmente em linha: explica porque isso pode ser pior do que não o fazer de todo, e o que há a verificar. 4. Dá-me uma ordem por efeito face ao esforço. 5. Diz-me como devo medir depois de cada passo, para saber o que fez efeito. Não inventes medições.
Conclusão
Seis causas, e a primeira – imagens sem indicação de medidas – representa normalmente metade. Corrige-se em meia hora e atua de imediato.
A parte mais difícil é a medição: quem verifica localmente mede um cenário que quase nenhum visitante vive. Medir com travagem, a seguir a cada passo isoladamente – senão corrigem-se três coisas e não se sabe qual delas fez efeito.
Perguntas frequentes
Porque é que o conteúdo salta ao carregar uma página?
Normalmente por uma de seis causas: imagens sem indicação de medidas, fontes carregadas depois com larguras diferentes, conteúdos incorporados de terceiros sem altura conhecida, barras de aviso exibidas a posteriori, CSS que só produz efeito tarde, e conteúdos inseridos por JavaScript acima da área visível.
Qual é a medida isolada mais eficaz?
Dar a cada imagem width e height e acrescentar height: auto no CSS. O navegador reserva então desde o início o espaço certo, mantendo o redimensionamento. Na prática, esta medida representa muitas vezes metade do problema.
Porque é o valor local melhor do que na ferramenta de análise?
Porque no próprio computador a ligação é rápida e a cache está cheia: as folhas de estilos, as fontes e as imagens chegam antes da primeira renderização e nada salta. Em condições realistas chegam depois – por isso é preciso medir com travagem.
O CSS entregue parcialmente em linha pode prejudicar?
Sim. Se na parte entregue antecipadamente faltar uma regra que afete uma área da zona visível, salta precisamente esse elemento assim que a folha de estilos completa chega. Ou por completo para a área visível ou de todo – as meias soluções são aqui piores do que nenhuma.
Como se corrigem os banners de consentimento que saltam?
Fazendo com que sejam exibidos por sobreposição em vez de por deslocamento – ou seja, ficando por cima do conteúdo sem o empurrar para baixo. Em alternativa, pode reservar-se o espaço desde o início. Esta causa é uma das mais frequentes e ao mesmo tempo a mais fácil de corrigir.
Marketing que se configura sozinho
A beta do Studio Engine está aberta. Reserve o seu lugar e participe desde o início.
Participar na beta →