Como usar preload e prefetch para acelerar a navegação entre páginas do seu site
Oi! Aqui é a Sensei da GeHost 🥋 Hoje vou te ensinar um truque simples (e gratuito!) que faz o visitante do seu site sentir que as páginas "voam" ao clicar de um link pro outro. O segredo tem nome bonito — preload, prefetch e preconnect — mas é bem mais simples do que parece. Vamos com calma, passo a passo.
Por que isso importa?
Todo navegador (Chrome, Firefox, Safari...) segue uma ordem natural pra carregar uma página: primeiro lê o HTML, depois descobre que precisa de uma imagem, de uma fonte, de um CSS, de um script — e só aí pede cada um desses arquivos. Isso gera uma filinha de espera. As dicas de preload/prefetch são como um bilhetinho que você deixa pro navegador avisando: "ei, você vai precisar disso aqui daqui a pouco, já pode ir buscando adiantado". Resultado: a página (ou a próxima página) aparece mais rápido pro visitante.
Dica da Sensei: pense nisso como preparar os ingredientes antes de começar a cozinhar — em vez de correr atrás de cada coisa na hora, você já deixa tudo separado na bancada.
As 3 ferramentas do dia
- preconnect — avisa antecipadamente que o navegador vai se conectar com outro domínio (ex.: um serviço de fontes, um CDN de imagens). Ele já resolve o "aperto de mão" da conexão antes de precisar do arquivo em si.
- preload — diz "esse recurso AQUI (uma fonte, uma imagem principal, um CSS) é importante pra ESTA página, carregue com prioridade alta, agora."
- prefetch — diz "esse recurso provavelmente vai ser usado na PRÓXIMA página que o visitante vai abrir, então baixa ele com calma, em segundo plano, sem pressa."
Passo a passo: como aplicar no seu site
Passo 1 — Identifique o que realmente pesa
Antes de sair colando código, pense no que faz sua página demorar: geralmente é uma fonte customizada, uma imagem grande do topo (banner/hero) ou um CSS/JS essencial. Esses são os melhores candidatos pra preload. Já links pra páginas que o visitante costuma clicar em seguida (ex.: "Produtos" a partir da Home) são bons candidatos pra prefetch.
Passo 2 — Adicione as tags no <head> do HTML
Essas dicas são simples tags <link> que ficam dentro do <head> da sua página. Exemplos práticos:
Preconectar com um serviço externo de fontes:
<link rel="preconnect" href="https://fonts.exemplo.com">Carregar a fonte principal com prioridade:
<link rel="preload" href="/fontes/titulo.woff2" as="font" type="font/woff2" crossorigin>Carregar a imagem de destaque do topo com prioridade:
<link rel="preload" href="/imagens/banner-principal.jpg" as="image">Preparar a próxima página que o visitante costuma acessar:
<link rel="prefetch" href="/pagina-de-produtos.html">
Passo 3 — Onde editar isso no seu site
Se o seu site é feito em WordPress (ou outro CMS), normalmente dá pra inserir esse código no cabeçalho através de um plugin de otimização/performance ou no arquivo de tema, na área de <head>. Se você usa o Gerenciador de Arquivos do cPanel pra editar os arquivos do seu site diretamente, é lá que você vai colar essas linhas dentro do arquivo HTML (ou template do cabeçalho).
Se você não se sente confortável mexendo direto no código, sem problema nenhum — é exatamente esse tipo de ajuste fino que a nossa equipe de desenvolvimento web pode aplicar pra você. Chama o suporte pelo painel.gehost.com.br e explica o que você quer melhorar.
Passo 4 — Teste e confira o resultado
- Abra o site em uma aba anônima do navegador (pra não pegar cache antigo).
- Clique nos links que você "preparou" com prefetch e sinta se a transição ficou mais rápida.
- Use as ferramentas de desenvolvedor do navegador (aba "Network"/"Rede", tecla F12) pra ver os recursos sendo carregados com prioridade.
Dica da Sensei: use com moderação! Preload e prefetch são como tempero — na dose certa, realçam o prato; usados em excesso (marcando TUDO como prioridade), acabam competindo entre si e podem até deixar o carregamento inicial mais lento. Escolha só o que é realmente crítico.
Como isso se conecta com a sua hospedagem
Essas dicas de preload/prefetch trabalham em conjunto com uma boa hospedagem: de nada adianta "avisar" o navegador se o servidor demora pra responder. Por isso, garantir um plano GeHost adequado ao tamanho do seu site (Econômico, Básico, Médio ou Plus) e manter imagens otimizadas faz toda a diferença nesse combo de performance. Se você não tem certeza de qual plano combina com o seu projeto, é só falar com a gente pelo painel — a Sensei e o time te ajudam a escolher certinho.
Resumo rapidinho
- preconnect → adianta a conexão com domínios externos.
- preload → prioriza recursos importantes DESTA página (fonte, imagem, CSS).
- prefetch → prepara recursos da PRÓXIMA página, com calma.
- Use com moderação, teste sempre, e conte com o suporte GeHost se precisar de uma mãozinha na implementação.
Prontinho! Com esses três amiguinhos (preconnect, preload e prefetch) bem aplicados, seu site vai parecer bem mais ágil pra quem navega nele. Qualquer dúvida, é só chamar a gente. 🥋