Como Implementar Pré-Carregamento de Recursos (Prefetch) para Melhorar o Desempenho do Seu Site
Olá, amigo(a) desenvolvedor(a) ou dono(a) de site! Seja muito bem-vindo(a) ao nosso guia de Desempenho & CDN, onde vamos aprender juntos uma técnica poderosa para deixar seu site mais rápido e responsivo: o pré-carregamento de recursos (também conhecido como prefetch).
Imagine que seu visitante está navegando pelo seu site e, ao clicar em um link, o conteúdo demora a carregar. Isso pode fazer com que ele saia antes mesmo de ver o que queria. Com o prefetch, você antecipa esse momento — avisando ao navegador: "Ei, esse link vai ser usado logo, então já comece a carregar agora, em segundo plano!"
Dica do Sensei: O prefetch não é mágica, mas é como preparar o caminho antes de o visitante chegar. Quanto mais inteligente, melhor a experiência!
Passo a Passo: Como Ativar o Pré-Carregamento no Seu Site
Para implementar o prefetch, você vai precisar editar um arquivo de configuração do seu site. Vamos fazer isso com calma, passo a passo.
-
Acesse o Gerenciador de Arquivos do cPanel
Entre no seu painel de controle (cPanel) usando suas credenciais. Após o login, localize e clique em Gerenciador de Arquivos.
-
Abra a pasta do seu site
No Gerenciador de Arquivos, navegue até a pasta public_html (ou o nome da sua pasta raiz, se for outro domínio ou subdomínio).
-
Localize o arquivo
index.htmlouindex.phpEsse é o arquivo principal do seu site. Ele geralmente está no diretório raiz (
public_html). Clique duas vezes nele para abri-lo no editor de texto integrado. -
Insira o código de prefetch
Abra o arquivo e procure pela tag
<head>. Dentro dela, adicione uma ou mais linhas como esta:<link rel="prefetch" href="https://seusite.com.br/outra-pagina.html" >Substitua
https://seusite.com.br/outra-pagina.htmlpelo link da página que você espera que o visitante visite em seguida.Por exemplo, se seu site tem um menu com links para "Sobre", "Serviços" e "Contato", você pode pré-carregar essas páginas:
<link rel="prefetch" href="https://seusite.com.br/sobre" > <link rel="prefetch" href="https://seusite.com.br/servicos" > <link rel="prefetch" href="https://seusite.com.br/contato" > -
Salve as alterações
Após adicionar os links, clique em Salvar no editor. Pronto! O seu site agora está preparado para carregar páginas antes mesmo de o usuário clicar.
Quando Usar o Prefetch (e Quando Não)
É importante usar o prefetch com sabedoria. Ele é ideal para:
- Páginas que são frequentemente acessadas após a página inicial (ex: "Contato", "Sobre", "Minha Conta").
- Links que estão visíveis na tela principal, como botões de navegação.
- Recursos estáticos como imagens, arquivos CSS ou JS que serão usados logo em seguida.
Não use para:
- Links muito distantes ou pouco prováveis de serem clicados.
- Recursos grandes (como vídeos ou arquivos de 100MB+), pois isso pode sobrecarregar o cliente.
- Muitos links simultâneos — o navegador tem limites de conexões em paralelo.
Dica do Sensei: Comece com 2 ou 3 links principais. Depois, analise os dados de tráfego (usando Métricas do cPanel) para ver quais páginas são mais acessadas. Assim, você ajusta o prefetch com precisão!
Como Verificar se Está Funcionando
Depois de implementar, abra seu site no navegador e abra as Ferramentas de Desenvolvedor (F12). Vá até a aba Rede (Network) e recarregue a página. Procure por requisições com o tipo prefetch. Se aparecerem, o sistema está funcionando!
Se não aparecer nada, verifique se o código foi inserido corretamente dentro da tag <head> e se o link está correto.
Conclusão: O Futuro da Navegação Começa com Antecipação
Com o prefetch, você está dando um passo gigante em direção a um site mais rápido, mais fluido e mais agradável para o usuário. Não é só sobre performance — é sobre experiência humana.
Seu site agora não só responde rápido, como antecipa o que o visitante quer. Isso é o que chamamos de hospedagem inteligente — e é exatamente o que a GeHost acredita.
Se tiver dúvidas, não hesite em nos procurar. Estamos aqui para ajudar, sempre. 🌟
