Como configurar pré-carregamento (preload) de fontes e recursos críticos do site

Como Configurar Pré-Carregamento (Preload) de Fontes e Recursos Críticos do Site

Olá, amigo(a) desenvolvedor(a) ou dono(a) de site! Seja bem-vindo(a) ao seu Sensei da GeHost — aqui, vamos te ajudar a deixar seu site mais rápido, mais fluido e mais agradável para quem visita. Hoje vamos falar de um recurso poderoso, mas às vezes pouco conhecido: o pré-carregamento (preload) de fontes e recursos críticos.

Imagine isso: seu site carrega, mas as letras aparecem depois, ou os botões demoram a aparecer. Isso é frustrante para o visitante. Com o pré-carregamento, você diz ao navegador: “Olha, esses arquivos são essenciais — carregue-os logo no início!”

Dica do Sensei: O pré-carregamento não é mágica, mas é um pequeno truque de otimização que faz toda a diferença em sites com design sofisticado ou muitos recursos visuais.

O que é Pré-Carregamento (Preload)?

É uma instrução que você coloca no código do seu site para avisar o navegador: “Esse arquivo é importante — comece a carregá-lo agora, mesmo antes de ver onde ele será usado”. Isso inclui:

• Fontes personalizadas (como Google Fonts ou fontes próprias)
• Imagens críticas (como o logo principal ou botão de CTA)
• Arquivos JavaScript ou CSS essenciais

Por que isso é importante?

Quando o navegador lê o código HTML, ele vai buscando recursos conforme encontra. Se um arquivo importante está no final do código, ele pode demorar para carregar — e o site parece lento. Com o preload, você evita esse atraso.

Passo a passo: Como configurar no seu site (com GeHost)

1. Entre no painel do cliente em painel.gehost.com.br. Use seu login e senha.
2. Na tela principal, localize o grupo Arquivos e clique em Gerenciador de Arquivos.

3. Na árvore de pastas, clique em public_html (essa é a pasta raiz do seu site).
4. Abra o arquivo index.html (ou o arquivo principal da sua página inicial) para edição. Clique em Editar (ícone de lápis).
5. Procure pela seção <head> do seu código. É nesse local que devemos adicionar as instruções de pré-carregamento.
6. Adicione as linhas abaixo dentro da tag <head>, antes de qualquer outro código. Substitua os caminhos pelos reais do seu site:

<link rel="preload" as="font" type="font/woff2" crossorigin href="/fontes/inter.woff2">
<link rel="preload" as="image" href="/imagens/logo-destaque.png" type="image/png">
<link rel="preload" as="script" href="/js/animacao-principal.js">
  

7. Salve as alterações com o botão Salvar no final da página.
8. Teste seu site em um navegador novo (ou em modo anônimo) para ver se os recursos carregam mais rápido.

Dica do Sensei: Use apenas o caminho real do arquivo. Se você não tem certeza, verifique no Gerenciador de Arquivos se o arquivo está no local certo.

Exemplo prático: Fonte personalizada

Se você está usando uma fonte chamada Inter, e ela está no diretório /fontes/inter.woff2, o código deve ser:

<link rel="preload" as="font" type="font/woff2" crossorigin href="/fontes/inter.woff2">

Isso diz ao navegador: “Essa fonte é crítica — carregue-a agora, mesmo antes de ver onde será usada”.

Importante: O que NÃO fazer

• Não coloque muitos preload — isso pode sobrecarregar o navegador.
• Não use caminhos errados (ex: /fontes/inter.ttf se o arquivo é .woff2).
• Não esqueça o crossorigin para fontes — isso evita erros de segurança.

Quer ir além?

Se seu site tem muitos recursos críticos, considere usar o preconnect para ligar antes com servidores externos (como o Google Fonts), ou o prefetch para carregar páginas futuras. Mas comece com o básico: preload de fontes e imagens principais.

Se tiver dúvidas, entre em contato com nosso suporte — estamos aqui para te ajudar. E lembre-se: cada segundo de velocidade é um visitante feliz. 🌟

Com carinho, seu Sensei da GeHost.