Como configurar preload de fontes e recursos críticos para acelerar o primeiro carregamento
Olá, amigo(a) desenvolvedor(a) ou dono de site! Seja bem-vindo(a) ao seu guia de desempenho e CDN com a GeHost — onde o seu site carrega mais rápido, e o seu visitante sente isso desde o primeiro clique. 🌟
Imagine: alguém entra no seu site e… bing! — ele já está pronto. Sem esperar. Sem travar. Isso acontece quando você prepara os recursos mais importantes antes que o usuário pedir. Esse é o poder do preload.
Neste guia, vou te ensinar, passo a passo, como configurar o preload de fontes e recursos críticos — algo simples, mas que faz uma diferença enorme no tempo de carregamento inicial. Vamos lá?
💡 O que é preload e por que ele importa?
Preload é uma técnica que diz ao navegador: “Esse arquivo é essencial. Vou carregá-lo logo, antes de precisar.”
Exemplos de recursos críticos:
- Fontes personalizadas (como a sua marca)
- Imagens principais do topo da página
- Arquivos CSS e JS que definem o layout inicial
Quando você pré-carrega esses itens, o site parece mais rápido, mesmo que o servidor esteja no mesmo lugar. É como preparar o café antes de acordar — você já está pronto quando o dia começa.
✨ Dica do Sensei: O primeiro segundo é o mais importante. Se o site não carregar em 2 segundos, 53% dos visitantes saem. Preload é seu aliado nessa batalha.
🛠️ Passo a passo: Como configurar preload no seu site (com GeHost)
Na GeHost, você tem controle total sobre seus arquivos no cPanel. Vamos usar o Gerenciador de Arquivos para adicionar o preload diretamente no código da sua página.
- Entre no painel do cliente: Acesse painel.gehost.com.br com suas credenciais.
- Abra o cPanel: No painel, clique em cPanel para entrar na interface de gerenciamento do seu site.
- Abra o Gerenciador de Arquivos: No cPanel, localize e clique em Gerenciador de Arquivos.
- Selecione a pasta pública: No Gerenciador de Arquivos, clique em public_html (essa é a pasta raiz do seu site).
- Localize seu arquivo HTML principal: Procure pelo arquivo principal da sua página, geralmente index.html ou index.php. Clique duas vezes para abri-lo.
- Adicione o preload no código: No topo do arquivo, logo após a tag
<head>, insira os comandos de preload. Exemplo:<head> <link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/minha-fonte.woff2"> <link rel="preload" as="image" href="/imagens/hero.jpg"> <link rel="preload" as="style" href="/css/estilo-principal.css"> <link rel="preload" as="script" href="/js/interacao.js"> <!-- Seu resto do head aqui --> </head>Explicando:
as="font"→ diz que o arquivo é uma fonte.type="font/woff2"→ formato da fonte (melhor para desempenho).crossorigin→ necessário para fontes externas ou em domínios diferentes.href="/fonts/minha-fonte.woff2"→ caminho do arquivo no seu site (ajuste conforme sua estrutura).
- Salve as alterações: Após adicionar o código, clique em Salvar no Gerenciador de Arquivos.
🔍 Como testar se está funcionando?
Depois de salvar, abra seu site em um navegador e abra as Ferramentas de Desenvolvedor (F12). Vá até a aba Network e recarregue a página.
Procure por arquivos com a coluna Initiator mostrando preload. Se aparecer, parabéns! Seu site já está preparado para carregar mais rápido.
✨ Dica do Sensei: Use ferramentas como Web.dev ou PageSpeed Insights para ver o impacto do preload no seu desempenho.
✅ Dicas finais para acelerar ainda mais
- Use apenas recursos críticos no preload. Não carregue tudo — isso pode sobrecarregar o navegador.
- Compacte e otimize suas fontes e imagens antes de usar (use ferramentas como Font Squirrel ou TinyPNG).
- Evite repetir o mesmo preload em múltiplos arquivos — mantenha o código limpo e centralizado.
📬 Precisa de ajuda?
Se ficar com dúvidas, não se preocupe. A GeHost está aqui para te ajudar. Entre em contato com nosso suporte — e lembre-se: você tem 30 dias grátis após a entrega para tirar todas as suas perguntas.
Seu site está pronto para brilhar. Agora, ele vai carregar mais rápido do que nunca. 🚀
Com carinho,
O Sensei da GeHost
*Paz, velocidade e qualidade no seu site.*