Por que a página fica em branco por um segundo

O navegador está segurando a página

O navegador não desenha uma página enquanto não tiver todas as folhas de estilo listadas no cabeçalho dela. Se desenhasse primeiro e estilizasse depois, o seu visitante veria texto simples, sem estilo, pular para o lugar, o que fica pior. Então ele espera, e cada uma dessas folhas de estilo é um arquivo que o celular do visitante precisa baixar antes que qualquer coisa apareça.

Os scripts no cabeçalho causam o mesmo atraso, a menos que estejam marcados para adiamento. Quando o navegador chega a um deles, para de ler a página, baixa o script, executa e só então continua. Um gerenciador de tags, um widget de chat ou um trecho de análise de dados no cabeçalho acrescenta uma pausa antes que a primeira palavra apareça.

As fontes são a terceira causa, e a mais fácil de passar despercebida. A página pode estar desenhada e ainda não mostrar texto, porque o texto usa uma fonte web que ainda não chegou. A maioria dos navegadores esconde esse texto por até três segundos em vez de mostrá-lo numa fonte alternativa.

O que a auditoria gratuita mostra

A auditoria gratuita faz a mesma medição de navegador que o Google usa. Dois números importam aqui. O First Contentful Paint é quando aparece o primeiro texto ou a primeira imagem. O Largest Contentful Paint é quando aparece o conteúdo principal da página. Se o primeiro número passa de cerca de 1,8 segundo, o seu visitante estava olhando para uma página branca.

Abaixo dos números há uma lista dos arquivos que o navegador esperou, com o tempo que cada um custou. Na maioria dos sites de organizações, a lista é curta: a folha de estilo do tema, duas ou três folhas de estilo de plugins, uma fonte de um serviço de fontes e um script que deveria estar no fim da página.

Correção um: mostre o texto numa fonte alternativa

Uma fonte web pode dizer ao navegador o que fazer enquanto carrega. A configuração se chama font-display. O valor swap significa: mostre o texto na hora numa fonte alternativa e troque quando a fonte de verdade chegar. Os visitantes veem palavras na primeira exibição, em vez de uma coluna vazia.

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4.woff2") format("woff2");
  font-display: swap;
}

Se a sua fonte vem de um serviço de fontes, a mesma configuração costuma ser um parâmetro no link que o serviço forneceu. Se vem do seu tema, é uma linha na declaração de fonte do tema. Hospedar o arquivo da fonte no seu próprio site também poupa o celular de uma conexão separada com outro servidor, que muitas vezes é a parte mais lenta.

Correção dois: scripts no fim, ou adiados

Um script que não muda a aparência da página deve ficar no fim dela, ou no cabeçalho com o atributo defer. O defer diz ao navegador para baixar o script em segundo plano e executá-lo depois que a página for desenhada. Análise de dados, chat, gerenciadores de tags, incorporações de redes sociais e players de vídeo se encaixam aqui. Quase nada no site de uma organização precisa rodar antes da primeira exibição.

No WordPress, a maioria desses scripts vem de plugins, e a maioria dos plugins não oferece nenhuma configuração para onde o script vai. Um plugin de cache ou de desempenho pode adiar todos de uma vez. Teste o site depois de ativar isso, porque um script do qual outro script depende pode gerar erros se rodar fora de ordem.

Correção três: menos folhas de estilo nas páginas que não as usam

Um plugin de formulário de contato carrega a sua folha de estilo em todas as páginas, não só na página de contato. Plugins de carrossel, de calendário de eventos e de galeria fazem o mesmo. Um site com doze plugins pode pedir doze folhas de estilo antes de desenhar uma página que não usa nenhuma delas. Cada arquivo é pequeno, mas juntos eles somam a espera.

A correção limpa é carregar os arquivos de cada plugin só nas páginas que os usam. Alguns plugins têm essa configuração. Para os outros, um plugin de desempenho pode fazer isso página por página, ou o tema pode carregá-los só onde for preciso, o que são algumas linhas de código para quem mantém o site. Antes de tudo isso, muitas vezes vale a pena remover os plugins que ninguém lembra de ter instalado.

O que não fazer

Não corra atrás da pontuação. Uma página que aparece em menos de um segundo no celular está pronta, mesmo que a ferramenta de medição ainda liste sugestões.

E não cole todos os seus estilos dentro da própria página para economizar requisições. Uma folha de estilo embutida em cada página pode chegar a dezenas de kilobytes e é enviada de novo a cada visita, enquanto um arquivo com link fica em cache depois da primeira. Cometemos exatamente esse erro no LFW.com e o corrigimos nesta semana.