Como configurar preload de fontes e recursos críticos para acelerar o carregamento
Olá, querido(a) cliente da GeHost! Seja bem-vindo(a) ao seu guia de desempenho e otimização com carinho e clareza. Aqui, você vai aprender como acelerar o carregamento do seu site com um recurso poderoso chamado preload — sem precisar de mágica, só de um passo a passo simples.
Imagine seu site como uma casa. Quando alguém chega, ele não quer esperar para abrir a porta. O preload é como entregar a chave antes mesmo de bater na porta: os recursos essenciais (como fontes, imagens, scripts) já estão disponíveis no momento certo. Isso melhora muito a experiência do usuário — e isso é ótimo para SEO e retenção.
Dica do Sensei: Fontes e recursos críticos são aqueles que o navegador precisa imediatamente para exibir a página corretamente. Sem eles, o site parece "travado" ou "lento".
O que é preload?
O preload é uma técnica de otimização que pede ao navegador para carregar certos arquivos antes de serem necessários. Ele é usado principalmente para:
- Fontes (como Google Fonts ou fontes customizadas)
- Imagens principais
- Scripts críticos (como o JavaScript que controla o menu ou o carrossel)
Essa técnica é especialmente útil para sites com design moderno, com fontes personalizadas ou layouts complexos. Com o preload, o usuário vê o conteúdo mais rápido — e fica mais feliz!
Como configurar preload no seu site (passo a passo)
Para usar o preload, você precisa adicionar algumas linhas no arquivo head do seu site (geralmente no header.php ou index.html). Vamos lá:
- Entre no painel da GeHost: Acesse painel.gehost.com.br com suas credenciais.
- Abra o Gerenciador de Arquivos: No painel, clique em Arquivos e depois em Gerenciador de Arquivos.
- Navegue até a pasta principal: Localize a pasta
public_html— é onde seu site está hospedado. - Encontre o arquivo de cabeçalho: Procure por arquivos como
header.php,header.htmlouindex.html. Ele geralmente está na raiz da pastapublic_html. - Edite o arquivo: Clique com o botão direito no arquivo e escolha Editar (ou "Code Editor").
- Insira o código de preload: No topo do arquivo, logo após a tag
<head>, adicione as linhas abaixo. Substitua os caminhos pelos arquivos reais do seu site:<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/minha-fonte.woff2"> <link rel="preload" as="script" href="/js/critical.js"> <link rel="preload" as="image" href="/images/capa-principal.jpg">
Explicando:
as="font"→ diz que o arquivo é uma fonte.type="font/woff2"→ formato da fonte (usewoffse for esse).crossorigin→ necessário para fontes externas.as="script"→ para scripts críticos.as="image"→ para imagens principais.
- Salve as alterações: Clique em Salvar ou Salvar Arquivo.
Atenção do Sensei: Se você não tem certeza sobre o caminho dos arquivos, verifique no Gerenciador de Arquivos do cPanel. Arquivos de fontes geralmente ficam em pastas como/fonts/ou/assets/fonts/.
Como saber se está funcionando?
Use a ferramenta Chrome DevTools (F12 no navegador) para verificar se os recursos estão sendo carregados corretamente:
- Abra o menu Network.
- Recarregue a página.
- Procure por arquivos com status 200 e preload na coluna "Initiator".
Se aparecerem, parabéns! Seu site já está mais rápido.
Dica extra: use apenas o necessário
Não abuse do preload. Ele acelera o carregamento, mas se você carregar muitos arquivos de uma vez, pode sobrecarregar o navegador. Use apenas os recursos críticos — aqueles que são essenciais para a primeira visualização da página.
Do Sensei: Um site com 3 fontes e 2 scripts principais pode usar 5 linhas de preload. Mais do que isso? Melhor rever a estrutura do site.
Pronto! Você está no caminho da velocidade.
Com esse pequeno ajuste, seu site vai carregar mais rápido, agradar mais visitantes e melhorar seu posicionamento no Google. Lembre-se: pequenas ações, grandes resultados.
Se precisar de ajuda, entre em contato com nosso suporte — estamos aqui para você. E lembre-se: todo grande site começa com um pequeno passo.
Com carinho,
Sensei da GeHost