Pré-carregamento de fontes e imagens: dando um empurrãozinho no que o visitante vê primeiro
Olá! Aqui é a Sensei da GeHost. Hoje vamos falar de uma técnica simples, mas poderosa, para deixar seu site com aquela sensação de "abriu na hora": o pré-carregamento (preload) de fontes e imagens críticas.
Pense assim: o navegador do seu visitante lê o código da sua página de cima para baixo e só descobre que precisa de uma fonte ou de uma imagem quando chega perto dela no código. O preload é como avisar o navegador, logo no início, "ei, você vai precisar disso aqui, pode ir baixando enquanto eu termino de ler o resto". O resultado é um site que parece carregar mais rápido, principalmente a parte que o usuário vê primeiro (o famoso "acima da dobra").
Quando vale a pena usar
Preload não é para tudo — é para o que é realmente crítico logo na primeira tela. Bons exemplos:
- A fonte principal usada no título e no texto do seu site (se você usa uma fonte customizada em vez das fontes do sistema).
- A imagem de destaque/banner que aparece assim que a página abre (o famoso "hero image").
- O logotipo, se ele for grande e aparecer no topo da página.
Dica da Sensei: menos é mais aqui. Se você marcar imagem, fonte, ícone e mais um monte de coisa como "prioridade máxima", o navegador fica confuso sobre o que baixar primeiro — e o efeito pode ser o contrário do desejado. Escolha só os 2 ou 3 itens mais importantes da primeira tela.
Passo a passo
1. Descubra o caminho exato do arquivo
Você vai precisar do endereço (URL ou caminho) da fonte e da imagem que quer pré-carregar. Se o arquivo já está no seu site, normalmente ele fica em uma pasta como /wp-content/themes/seu-tema/ (WordPress) ou dentro de public_html, na estrutura de pastas do seu projeto.
Você pode conferir e navegar pelos arquivos do seu site pelo Gerenciador de Arquivos do cPanel, disponível no painel da sua hospedagem:
2. Adicione a tag de preload no <head> da página
A mágica acontece com uma tag <link> colocada dentro do <head> do HTML, de preferência bem no topo, antes das folhas de estilo (CSS) e scripts. Alguns exemplos:
Para uma fonte:
<link rel="preload" href="/fontes/minha-fonte.woff2" as="font" type="font/woff2" crossorigin>
Para uma imagem:
<link rel="preload" href="/imagens/banner-topo.jpg" as="image">
- as="font" ou as="image" diz ao navegador que tipo de arquivo é — isso é obrigatório, sem isso o preload simplesmente não funciona direito.
- O atributo crossorigin é obrigatório em fontes, mesmo que o arquivo esteja no seu próprio domínio — é uma particularidade técnica de como fontes são carregadas pelos navegadores.
3. Se o seu site usa WordPress ou outro construtor
Se você edita o código diretamente (arquivo header.php do tema, por exemplo), pode inserir a tag manualmente como no exemplo acima. Se prefere não mexer em código, procure por um plugin de performance no seu construtor de site que ofereça a opção "preload de recursos" ou "preload fonts/images" — a maioria dos plugins populares de cache e otimização tem essa função pronta, sem precisar editar arquivos.
4. Teste o resultado
Depois de aplicar, abra seu site em uma aba anônima do navegador, aperte F12 para abrir as Ferramentas do Desenvolvedor e veja a aba "Network" (Rede). Os recursos marcados como preload aparecem carregando logo no início da lista, com prioridade alta. A maioria dos navegadores modernos também te avisa no console se algum preload foi feito "à toa" (ou seja, o recurso foi baixado mas não usado a tempo) — vale a pena revisar esse aviso.
Dica da Sensei: se aparecer um aviso de "recurso pré-carregado mas não utilizado", normalmente é porque o arquivo demorou demais para ser usado depois de baixado, ou o as está errado. Revise o passo 2 com calma — é o erro mais comum.
Boas práticas para não errar a mão
- Prefira formatos modernos e leves: WOFF2 para fontes e WebP/AVIF para imagens, quando possível — arquivos menores chegam mais rápido, com ou sem preload.
- Nunca pré-carregue imagens que só aparecem depois de rolar a página (isso rouba prioridade do que realmente importa na primeira tela).
- Revise periodicamente: conforme seu site muda de layout ou de imagem de destaque, os preloads antigos podem ficar desatualizados e virar peso morto.
Se tiver qualquer dúvida na hora de editar os arquivos do seu site, nossa equipe de suporte está por perto para te ajudar — é só abrir um chamado pelo painel.gehost.com.br.
Um passo de cada vez, e seu site vai ficando cada vez mais ágil. 🌱
