Pré-carregamento (preload) de fontes e imagens: dando um empurrãozinho no seu site
Olá! Aqui quem fala é a Sensei da GeHost 🥋 Hoje vamos falar de um truque simples e poderoso pra deixar seu site mais rápido: o preload (pré-carregamento) de fontes e imagens críticas.
Se você já visitou um site e viu o texto "pular" de lugar porque a fonte demorou pra carregar, ou uma imagem grande demorar pra aparecer no topo da página, é exatamente esse tipo de problema que o preload resolve.
O que é o preload, afinal?
Pense no navegador como um garçom que serve os pratos (arquivos) na ordem que descobre que precisa deles. Normalmente, ele só percebe que precisa de uma fonte ou de uma imagem depois de ler boa parte do HTML e do CSS da página — o que causa atraso.
O preload é como avisar o garçom, logo na entrada: "ei, esse prato aqui é prioridade, comece já a preparar!". Com isso, o navegador baixa esse recurso crítico em paralelo, bem mais cedo, e a página fica pronta mais rápido aos olhos de quem visita.
💡 Dica da Sensei: use preload só para os recursos que aparecem logo na primeira tela (o famoso "above the fold") — como a fonte principal do texto ou a imagem de destaque do topo. Recursos que aparecem só depois de rolar a página não precisam de preload.
Passo 1 — Identifique o que é realmente crítico
Antes de sair colocando preload em tudo, respire fundo. Preload em excesso pode até atrapalhar a performance, porque disputa banda com outros recursos importantes. Liste só o essencial:
- A(s) fonte(s) usada(s) no título e no texto principal, visíveis assim que a página abre;
- A imagem principal do topo (banner, foto de capa, logo grande), se ela aparecer sem precisar rolar a página;
- Nada mais, por enquanto! Ícones pequenos, imagens de rodapé ou de seções mais abaixo não entram aqui.
Passo 2 — Monte a tag de preload
O preload é adicionado dentro do <head> do seu HTML, usando a tag <link rel="preload">. A estrutura muda um pouco dependendo se é fonte ou imagem:
Para uma fonte (exemplo com arquivo .woff2):
- Informe o caminho do arquivo da fonte em
href; - Use
as="font"para dizer ao navegador que tipo de recurso é; - Inclua
type="font/woff2"(ou o formato que você estiver usando); - Não esqueça o atributo
crossorigin— fontes sempre precisam dele, mesmo se o arquivo estiver no seu próprio domínio.
Exemplo:
<link rel="preload" href="/fontes/titulo.woff2" as="font" type="font/woff2" crossorigin>
Para uma imagem crítica:
- Informe o caminho da imagem em
href; - Use
as="image"; - Se você usa imagens responsivas (com
srcset), também dá pra indicar isso no preload — mas, se não tiver certeza, comece pelo caminho simples da imagem principal.
Exemplo:
<link rel="preload" href="/imagens/banner-topo.jpg" as="image">
Passo 3 — Edite o arquivo do seu site
Se o seu site é feito em HTML puro (sem sistema de gerenciamento de conteúdo), você pode adicionar essas tags direto no arquivo, usando o Gerenciador de Arquivos do seu painel cPanel:
- Acesse o cPanel do seu plano em painel.gehost.com.br;
- Abra o Gerenciador de Arquivos e navegue até a pasta
public_html; - Localize o arquivo principal do seu site (geralmente
index.html) e clique em Editar; - Cole as tags de preload logo abaixo da abertura do
<head>, antes de outras tags de CSS/fontes; - Salve as alterações.
⚠️ Se o seu site foi feito com WordPress ou outro sistema, o ideal é usar um plugin de performance/cache que ofereça essa opção, em vez de editar arquivos manualmente — assim você evita que uma atualização do sistema apague sua alteração.
Passo 4 — Confira se a fonte também está sendo usada no CSS
Um detalhe importante: o preload só avisa o navegador para baixar o arquivo antes. Ele não substitui a declaração normal da fonte no seu CSS (o @font-face) nem da imagem na tag <img> ou no CSS de fundo. As duas coisas devem apontar para o mesmo caminho de arquivo, senão o navegador acaba baixando o recurso duas vezes — e aí o preload vira desperdício, não ganho.
Passo 5 — Teste o resultado
Depois de publicar a alteração:
- Abra seu site em uma aba anônima do navegador (para não pegar cache antigo);
- Use as Ferramentas do Desenvolvedor (tecla F12), aba Rede/Network, e recarregue a página;
- Procure pela fonte ou imagem que você marcou com preload — ela deve aparecer entre as primeiras requisições, com prioridade alta;
- Se quiser uma nota geral de performance, ferramentas públicas de análise de velocidade (como o PageSpeed Insights do Google) também mostram se o preload foi bem aproveitado.
Erros comuns (e como evitar)
- Preload em tudo: quanto mais recursos você marca como prioritários, menos "prioridade" cada um realmente tem. Foque no que aparece primeiro na tela.
- Esquecer o
crossoriginem fontes: sem ele, o navegador costuma baixar o arquivo de novo, ignorando o preload. - Caminho de arquivo diferente do usado no CSS: revise se a URL do preload é idêntica à usada depois no site.
- Preload de imagens que só aparecem depois de rolar a página: isso rouba prioridade de recursos realmente importantes.
Viu como não precisa de nenhum conhecimento avançado de programação para dar esse ganho de velocidade? Pequenos ajustes assim já fazem diferença na experiência de quem visita seu site. Qualquer dúvida na hora de editar os arquivos, nosso suporte está por perto para te ajudar. 🌱
