Por que a página pula enquanto carrega

O que é o deslocamento de layout

Deslocamento de layout é o conteúdo se mexendo depois de já ter sido desenhado. O navegador desenha a página com as informações que tem, depois chega uma imagem num tamanho que ele não conhecia, e tudo o que está abaixo dela desce para abrir espaço. Ou uma fonte carrega e todas as linhas se reorganizam. Ou uma barra de aviso se insere no topo e empurra a página cinco centímetros.

Ele é medido como Cumulative Layout Shift, a soma de todos os movimentos inesperados durante o carregamento, e uma pontuação abaixo de 0,1 é considerada boa. Os visitantes não conhecem o número. Eles sabem que tocaram num link e acertaram o de baixo.

Causa um: imagens sem dimensões

É de longe a causa mais comum. Uma tag img com um src e mais nada não diz ao navegador nada sobre o formato da imagem, então ele reserva altura zero até o arquivo ser baixado. A correção são dois atributos: width e height.

Eles não forçam a imagem a ter esse tamanho na tela. Com o CSS habitual de max-width 100% e height auto, eles só informam a proporção ao navegador, que reserva a caixa certa antes de chegar o primeiro byte.

O WordPress já conhece esses números para cada arquivo da biblioteca de mídia. Abra qualquer imagem em Mídia e o painel de detalhes mostra as dimensões, por exemplo 1920 por 1080 pixels. As imagens colocadas pelo editor recebem width e height na tag automaticamente.

O problema está no tema: imagens principais definidas por um construtor de páginas, por um campo do personalizador ou por um template escrito à mão muitas vezes saem só com a URL. Num template, peça a imagem ao WordPress em vez de montar a tag à mão, e os atributos vêm junto:

<?php
// Right: WordPress writes src, srcset, sizes, width, height, and alt for you.
echo wp_get_attachment_image( $hero_id, 'full', false, array(
  'class'         => 'hero-img',
  'fetchpriority' => 'high',
  'loading'       => 'eager',
) );

// If you must build the tag yourself, take the real dimensions from the library:
$img = wp_get_attachment_image_src( $hero_id, 'full' ); // [ url, width, height ]
printf(
  '<img src="%s" width="%d" height="%d" alt="%s" />',
  esc_url( $img[0] ), $img[1], $img[2], esc_attr( get_post_meta( $hero_id, '_wp_attachment_image_alt', true ) )
);

Depois, a única linha de CSS que faz os atributos funcionarem em qualquer tamanho de tela:

O CSS que acompanha

Com width e height presentes, esta regra deixa a imagem se ajustar ao contêiner enquanto o navegador mantém a caixa reservada no formato certo. A maioria dos temas já a tem; verifique se nada sobrescreve a altura com um valor fixo.

img {
  max-width: 100%;
  height: auto;
}

/* A hero set as a CSS background can't carry dimensions. Give its box a shape instead: */
.hero {
  aspect-ratio: 16 / 9;
  background-size: cover;
}

Causa dois: incorporações sem espaço reservado

Um iframe do YouTube ou da C-SPAN chega com a altura que o código de incorporação especificou, muitas vezes 315 pixels para uma largura de 560, e então um tema responsivo estica a largura sem ajustar a altura, ou o script do player o redimensiona depois de carregar. De um jeito ou de outro, a página se mexe.

Envolva cada vídeo incorporado numa caixa com o formato declarado e deixe o iframe preenchê-la. O espaço fica reservado antes de o player carregar, e acompanha a largura da coluna.

.embed {
  aspect-ratio: 16 / 9;   /* 4 / 3 for older video, or match the embed's own ratio */
  width: 100%;
}
.embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

Causa três: fontes que trocam

Uma fonte web que chega depois de a página ser exibida reorganiza todas as linhas escritas com ela, e se a fonte alternativa tem outra largura, parágrafos inteiros mudam de altura. Pré-carregar o arquivo da fonte faz com que ele chegue antes da primeira exibição na maioria das conexões. O descritor size-adjust permite ajustar a fonte alternativa para que a troca, quando acontecer, quase não mude nada.

<!-- in the head: fetch the font before the page needs it -->
<link rel="preload" href="/fonts/body.woff2" as="font" type="font/woff2" crossorigin />

/* in the CSS: a fallback shaped to match, so the swap barely moves anything */
@font-face {
  font-family: "Body Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 92%;
}
body { font-family: "Body", "Body Fallback", sans-serif; }

Causa quatro: coisas inseridas no topo depois que a página aparece

Avisos de cookies, barras de anúncio e faixas de alerta inseridas por JavaScript são a última causa comum, e a mais fácil de ver: a página inteira desce no momento em que a barra aparece. Qualquer uma de duas correções funciona. Coloque a barra no HTML da página, para que o espaço dela exista desde a primeira exibição, ou faça dela uma sobreposição que fica por cima do conteúdo em vez de empurrá-lo. Inserir um bloco acima do conteúdo depois que ele foi desenhado sempre vai mexer a página.

Veja você mesmo

No Chrome, abra o painel Performance e grave o carregamento de uma página; cada deslocamento fica marcado, e o elemento que se mexeu é nomeado. O Lighthouse informa o total como Cumulative Layout Shift. A auditoria gratuita deste site faz a mesma medição na sua página inicial e diz em linguagem simples se a página se mexe.

Se você é cliente, corrigir a imagem principal ou a caixa de incorporação de um template é uma pequena tarefa dentro da gestão mensal. Um tema que monta todas as tags de imagem à mão é um projeto, com orçamento a preço fixo. Abra um pedido e começaremos encontrando o elemento que se mexe.