Como Pré-Carregar (Preload) Fontes e Recursos Críticos para Acelerar o Primeiro Carregamento
Olá, querido(a) cliente da GeHost! 🌟 Seja bem-vindo(a) ao nosso Sensei do Desempenho — aquele que te ajuda a deixar seu site mais rápido, mais leve e mais amado pelos visitantes. Hoje, vamos aprender um truque poderoso: pré-carregar fontes e recursos críticos para que seu site carregue mais rápido do que um sorriso no primeiro dia de aula.
Imagine isso: o visitante entra no seu site e... “nada acontece”. Depois de alguns segundos, o conteúdo aparece. Isso é frustrante — para ele e para você. Mas com o pré-carregamento, você pode “avisar” o navegador: “Ei, já estou preparando isso aqui — não espere!”.
Dica do Sensei: O primeiro carregamento é o momento mais importante. Se o site não abre rápido, o visitante vai embora. Pronto? Vamos acelerar!
O que são fontes e recursos críticos?
Esses são os arquivos que o seu site precisa para aparecer corretamente desde o início:
- Fontes personalizadas (como a que você escolheu para o título do seu site).
- Imagens principais (logo, banner).
- Arquivos CSS e JS essenciais (os que definem o layout e o comportamento inicial).
Se o navegador só descobrir esses arquivos quando for preciso, ele vai esperar — e isso atrasa tudo.
Passo a passo: Como pré-carregar no seu site (via código)
Para fazer isso, vamos usar um pequeno truque no código HTML do seu site. Não precisa de instalação complexa — só um toque de atenção.
- Abra o arquivo
index.htmlou o arquivo principal da sua página (geralmente dentro da pastapublic_html). - Localize a tag
<head>— ela vem logo após o início do documento. - Adicione os códigos de pré-carregamento dentro da tag
<head>, logo após a tag<meta charset="UTF-8">ou o título.
Aqui está um exemplo prático:
<head>
<meta charset="UTF-8">
<title>Meu Site Rápido</title>
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/minha-fonte.woff2">
<link rel="preload" as="image" href="/imagens/logo-principal.png">
<link rel="preload" as="style" href="/css/estilo-principal.css">
<link rel="preload" as="script" href="/js/interacao-inicial.js">
</head>Esses códigos dizem ao navegador: “Estou te avisando que esses arquivos estão vindo — já comece a baixar antes de precisar!”
Dica do Sensei: Use sempre o caminho completo a partir da raiz do site (ex: /fonts/minha-fonte.woff2). Se o arquivo estiver em uma subpasta, ajuste o caminho corretamente.
Como encontrar os arquivos no cPanel?
Se você não sabe onde estão os arquivos, o cPanel é seu amigo. Vamos lá:
- Entre no seu painel do cliente.
- Na seção de hospedagem, clique em cPanel.
- Na tela do cPanel, clique em Gerenciador de Arquivos (File Manager).
- Selecione a pasta
public_html(é onde seu site vive). - Procure pelas pastas
fonts,imagens,cssoujs. Lá estarão os arquivos que você quer pré-carregar.
Como testar se está funcionando?
Depois de salvar as alterações no código, visite seu site em um navegador moderno (Chrome, Firefox, Edge) e abra as Ferramentas de Desenvolvedor (F12 ou Ctrl+Shift+I).
Vá até a aba Network e recarregue a página. Você verá os arquivos marcados com “Preload” ou “Resource Prioritization” — isso quer dizer que o navegador já começou a baixar antes de precisar!
Dica do Sensei: Se não vir o “preload”, verifique se o caminho do arquivo está correto e se o arquivo realmente existe no servidor.
Pré-carregamento é só o começo!
Essa é uma das muitas formas de deixar seu site mais rápido. Quer mais? Vamos juntos explorar:
- Como otimizar imagens (sem perder qualidade).
- Como usar o CDN da GeHost para espalhar seu site pelo mundo.
- Como reduzir o tempo de resposta com cache inteligente.
Se precisar de ajuda com qualquer um desses passos, é só entrar em contato com nosso suporte — e lembre-se: você tem 30 dias grátis após a entrega para tirar dúvidas e ajustar tudo com calma.
Seu site merece ser rápido, bonito e cheio de energia. Com o pré-carregamento, você já está no caminho certo. 🚀
Com carinho, Sensei da GeHost *Grupo G e Soluções e Eventos LTDA – CNPJ: 46.647.904/0001-04*