Como configurar o pré-carregamento (preload) de fontes e recursos críticos do site
Olá, amigo(a) desenvolvedor(a) ou gestor(a) de site! 👋 Seja bem-vindo(a) ao guia da GeHost, onde cuidamos do seu site com carinho e tecnologia de ponta. Hoje vamos aprender juntos como pré-carregar fontes e recursos críticos — uma prática simples, poderosa e essencial para deixar seu site mais rápido, responsivo e agradável para quem visita.
Dica Sensei: Um site que carrega rápido é como um atendimento atencioso: deixa a pessoa feliz antes mesmo de pedir ajuda. Preload é seu primeiro passo para isso!
O que é pré-carregamento (preload)?
Imagine que você está prestes a ler um livro, mas cada página precisa ser impressa enquanto você lê. Isso seria lento, certo?
Da mesma forma, quando um site é aberto, ele precisa carregar vários recursos: imagens, fontes, arquivos CSS e JavaScript. O pré-carregamento é como pedir à sua conexão que já comece a baixar esses arquivos antes de eles serem realmente necessários — assim, quando o usuário clicar ou rolar, tudo já está pronto!
Por que usar preload no seu site?
- Reduz o tempo de carregamento da página.
- Evita atrasos visuais (como fontes aparecendo depois).
- Melhora a experiência do usuário — especialmente em celulares.
- É um dos fatores que os motores de busca (como Google) consideram para ranqueamento.
Passo a passo: como configurar preload no seu site (via cPanel)
Para fazer isso, vamos usar o Gerenciador de Arquivos do cPanel — uma ferramenta simples e poderosa que já vem com sua hospedagem GeHost.
- Acesse o cPanel do seu site pelo painel da GeHost: painel.gehost.com.br.
- Na tela inicial do cPanel, localize e clique em Gerenciador de Arquivos (dentro da seção "Arquivos").
- Selecione a pasta principal do seu site: public_html (ou o nome da subpasta, se seu site estiver em uma pasta específica).
- Procure o arquivo principal do seu site: geralmente é index.html ou index.php. Clique nele para editá-lo.
- Abra o arquivo no editor de texto do cPanel. Você verá o código HTML da sua página.
- Localize a tag <head> — ela está no início do código, logo após a abertura do documento HTML.
- Antes de fechar a tag <head>, adicione os comandos de pré-carregamento. Aqui está um exemplo prático:
- Explicando o código:
rel="preload"— diz ao navegador para começar a baixar o recurso.as="font"— indica que o recurso é uma fonte.type="font/woff2"— define o formato da fonte (ótimo para desempenho).crossover— necessário para fontes que precisam de acesso cruzado.href="/caminho/do/arquivo"— caminho do arquivo no seu site (relativo à raiz).
- Salve as alterações com o botão Salvar no editor.
- Teste seu site em um navegador novo (ou em modo anônimo) para ver se os recursos estão carregando mais rápido.
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/roboto-bold.woff2"> <link rel="preload" as="style" href="/css/estilo-principal.css"> <link rel="preload" as="script" href="/js/main.js">
Dica Sensei: Comece com os recursos mais importantes: fontes do título, CSS principal e JavaScript essencial. Não abuse do preload — ele é poderoso, mas não deve ser usado para tudo!
Recomendações práticas
- Use preload apenas para recursos críticos que aparecem logo no início da página.
- Evite pré-carregar imagens grandes ou vídeos — isso pode sobrecarregar a conexão.
- Use formatos modernos como WOFF2 para fontes — eles são leves e rápidos.
- Verifique o resultado com ferramentas como Google PageSpeed Insights ou Lighthouse.
Quer ir além? Dica avançada
Se seu site usa um framework como React, Vue ou WordPress, existem plugins ou configurações automáticas que gerenciam o preload por você. Mas mesmo assim, entender o básico — como fizemos aqui — é o que te deixa no comando, não o sistema.
Se precisar de ajuda com o código ou tiver dúvidas sobre caminhos de arquivos, seu suporte da GeHost está sempre pronto para te ajudar. Basta acessar o painel e abrir um chamado — e lembre-se: você não está sozinho nessa jornada.
Com carinho, Sensei da GeHost 🌟