Como usar prefetch de DNS e preload de recursos para acelerar o carregamento inicial do site

Prefetch de DNS e Preload de Recursos: acelere a largada do seu site

Oi, eu sou a Sensei da GeHost! 🌱 Hoje vou te ensinar duas técnicas simples, mas poderosas, que ajudam o navegador do seu visitante a "se preparar com antecedência" para carregar o seu site. O resultado? Uma sensação de carregamento mais rápido, especialmente naqueles primeiros segundos que decidem se a pessoa fica ou desiste da página.

Calma que não tem mistério nenhum aqui. Vamos passo a passo, com carinho, do jeitinho que você merece.

O que é DNS Prefetch?

Sempre que o navegador precisa carregar algo de outro domínio (por exemplo, uma fonte do Google Fonts, um script de terceiros, ou imagens de um CDN externo), ele primeiro precisa "traduzir" aquele nome de domínio em um endereço de servidor — isso se chama resolução de DNS. Esse processo, mesmo sendo rápido, ainda consome um tempinho precioso.

O DNS Prefetch é como avisar ao navegador: "Ei, daqui a pouco eu vou precisar de recursos deste outro domínio, pode ir adiantando essa consulta de DNS agora mesmo, enquanto o resto da página carrega!"

💡 Dica da Sensei: DNS Prefetch é ótimo para domínios externos (fontes, CDNs, scripts de terceiros) — não faz sentido usá-lo para o seu próprio domínio, porque o navegador já está conversando com ele mesmo.

Como aplicar o DNS Prefetch

Você adiciona uma linha simples dentro da tag <head> do seu HTML, para cada domínio externo que seu site utiliza. Exemplo:

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//cdn.exemplo.com">

Repare que não precisa colocar "https:" antes, só as duas barras — isso permite que o navegador use o mesmo protocolo da página atual.

O que é Preload de Recursos?

Enquanto o DNS Prefetch cuida da "localização" do recurso, o Preload vai um passo além: ele diz ao navegador "baixe este arquivo específico AGORA, com prioridade alta, porque eu sei que vou precisar dele em breve — não espere descobrir isso lendo o HTML de cima a baixo."

É perfeito para recursos que são essenciais para a primeira exibição da página (o famoso "acima da dobra"), como:

• A fonte principal do seu site
• A imagem de destaque (banner/hero) do topo da página
• Um arquivo CSS crítico

Como aplicar o Preload

Também é feito dentro do <head>, indicando o tipo do recurso com o atributo as:

<link rel="preload" href="/fontes/principal.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/imagens/banner-topo.webp" as="image">

💡 Dica da Sensei: use o preload com moderação! Se você marcar recursos demais como "prioridade alta", o navegador acaba disputando banda entre eles e a técnica perde o efeito. Escolha só o que realmente aparece na primeira tela.

Passo a passo para colocar em prática

1. Liste os domínios externos que o seu site carrega (fontes, CDNs, scripts de analytics, chats, etc.).
2. Adicione uma tag dns-prefetch para cada um desses domínios, logo no início do <head>.
3. Identifique os 2 ou 3 recursos mais críticos para a primeira exibição visual da página (a fonte principal e a imagem de destaque costumam ser os campeões).
4. Adicione uma tag preload para cada um desses recursos críticos.
5. Teste o resultado nas ferramentas de desenvolvedor do navegador (aba "Network"), verificando se os recursos aparecem carregando mais cedo do que antes.
6. Acompanhe a experiência real usando ferramentas de medição de performance (como o PageSpeed Insights) para confirmar a melhora.

Onde editar esses arquivos

Se o seu site usa um construtor de páginas ou CMS (como WordPress), normalmente existe uma opção no tema ou em um plugin de performance para inserir esses códigos sem mexer diretamente no HTML. Caso seu site seja em HTML puro, você pode editar o arquivo diretamente pelo Gerenciador de Arquivos do cPanel, dentro da pasta public_html.

Cuidados importantes

• Não exagere na quantidade. Prefetch e preload em excesso competem entre si e podem até atrasar o carregamento em vez de ajudar.
• Preload é para o que é usado imediatamente. Se o navegador baixar um recurso via preload e ele não for utilizado logo em seguida, alguns navegadores mostram um aviso no console e você perde o benefício.
• Sempre teste depois de aplicar. Cada site tem recursos diferentes, então o ideal é validar o ganho real na prática.

💡 Dica da Sensei: essas duas técnicas trabalham muito bem em conjunto com outras boas práticas de performance, como otimização de imagens e uso de cache. Pense nelas como parte de um "combo" de velocidade, não como a solução única.

Precisa de ajuda?

Se você tiver dúvidas na hora de editar os arquivos do seu site ou quiser uma orientação mais próxima, é só acessar o painel.gehost.com.br e abrir um chamado com o nosso suporte. Estamos aqui para te ajudar a deixar seu site cada vez mais rápido! 🚀