Como Usar DNS Prefetching para Acelerar o Carregamento do Seu Site
Oi! Aqui é a Sensei da GeHost 😊 Vou te ensinar um truquinho de ouro para deixar seu site mais rápido: o DNS prefetching. É simples, poderoso e funciona de verdade. Bora lá!
O Que É DNS Prefetching (Explicado de Forma Simples)?
Quando você acessa um site, seu navegador precisa "traduzir" o nome do domínio (tipo exemplo.com.br) em um endereço numérico (um IP). Esse processo é chamado resolução de DNS e leva alguns milissegundos.
O DNS prefetching é uma técnica que avisa o navegador com antecedência: "Ei, você vai precisar conectar neste domínio em breve, então resolve o DNS agora mesmo, sem pressa". Assim, quando o navegador realmente precisar carregar o conteúdo, a "tradução" já está pronta — economizando tempo valioso.
Resultado prático: sua página carrega mais rápido, especialmente se você usa serviços externos (fontes do Google, APIs, CDNs, etc.).
Por Que Usar DNS Prefetching?
- Carregamento mais rápido: reduz a latência de conexão com domínios externos.
- Melhor experiência do visitante: menos tempo esperando = visitante feliz.
- Simples de implementar: basta adicionar uma linha de código.
- Compatibilidade: funciona em navegadores modernos (Chrome, Firefox, Edge, Safari).
- Sem custos: é uma técnica 100% gratuita.
Como Implementar DNS Prefetching (Passo a Passo)
Resumo: você adiciona tags especiais no <head> do seu site HTML, avisando quais domínios pré-carregar. Veja como:
Passo 1: Identifique os Domínios Externos que Você Usa
Abra seu site no navegador, clique com o botão direito → Inspecionar (ou pressione F12). Vá até a aba Network (Rede) e recarregue a página. Procure por requisições para domínios externos, como:
- Fontes do Google:
fonts.googleapis.com,fonts.gstatic.com - Scripts:
cdn.example.com,analytics.google.com - APIs: qualquer domínio de terceiros que seu site use
Anote os domínios mais "pesados" (os que demoram mais a carregar).
Passo 2: Acesse o Código HTML do Seu Site
Use um editor de texto ou o editor de código da sua hospedagem (se usar WordPress, geralmente você não precisa fazer isso — o tema já trata). Se estiver editando o HTML manualmente:
- Acesse o gerenciador de arquivos do seu painel de hospedagem ou via SFTP.
- Abra o arquivo
index.html(ou o arquivo principal do seu site). - Procure pela seção
<head>...</head>.
Passo 3: Adicione as Tags de DNS Prefetching
Dentro do <head>, adicione linhas assim (uma por domínio externo):
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//cdn.example.com">
<link rel="dns-prefetch" href="//analytics.google.com">
Dica importante: use // (duas barras) em vez de https:// ou http://. Assim, o navegador usa o mesmo protocolo que seu site.
Passo 4: Salve e Teste
Salve o arquivo, limpe o cache do navegador (Ctrl+Shift+Del) e recarregue seu site. Abra o Inspector novamente → aba Network → veja se o tempo de resolução de DNS diminuiu para aqueles domínios.
Exemplos Práticos
Exemplo 1: Site com Fontes do Google
<head>
<meta charset="UTF-8">
<title>Meu Site</title>
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
Exemplo 2: Site com Google Analytics e CDN
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//cdn.mysite.com">
<link rel="dns-prefetch" href="//apis.google.com">
Dicas e Boas Práticas
- Use com moderação: adicione DNS prefetching apenas para os 3 a 5 domínios mais importantes. Excesso pode prejudicar a performance.
- Priorize serviços críticos: fontes, imagens CDN, e scripts essenciais merecem prefetching.
- Combine com outras técnicas: DNS prefetching funciona melhor junto com cache, compressão e CDN global.
- Monitore o impacto: use ferramentas como Google PageSpeed Insights ou GTmetrix para medir a melhoria real no seu site.
Quando Usar (e Quando Não Usar)
| ✅ Use DNS Prefetching Para… | ❌ Evite Para… |
|---|---|
| Serviços externo que carregam na página | Todos os domínios que seu site usa (cause overload) |
| Fontes (Google Fonts, etc.) | Links internos (já estão no seu servidor) |
| CDNs e imagens remotas | Serviços que você nem tem certeza se vai usar |
| Analytics e rastreamento | Domínios lentos ou instáveis |
Como Medir o Resultado
Quer saber se está funcionando? Use estas ferramentas gratuitas:
- Google PageSpeed Insights (pagespeed.web.dev) — mostra a velocidade do site antes e depois.
- GTmetrix (gtmetrix.com) — análise detalhada com waterfall chart (vê cada requisição).
- WebPageTest (webpagetest.org) — teste profundo com relatório visual.
Carregue o site antes de adicionar o prefetching, anote o score. Depois, adicione e recarregue em alguns dias — deve melhorar! 📈
Troubleshooting: Por Que Não Está Funcionando?
A página ainda carrega lenta
Causa possível: DNS prefetching resolve o domínio, mas não carrega o conteúdo. Se a fonte/imagem demora mesmo assim, o problema é a velocidade da internet ou a latência de rede, não o DNS.
Solução: combine prefetching com preconnect (conecta mais cedo) ou com um CDN global.
A tag não está sendo lida
Verifique: a tag está dentro de <head>? Está a sintaxe correta? Abra o Inspector (F12), aba Elements, procure por dns-prefetch — se não estiver lá, o arquivo não foi salvo direito.
Usando WordPress?
Se seu site roda WordPress, você não precisa editar HTML manualmente. Use um plugin como Perfmatrix, Asset CleanUp ou WP Rocket — eles adicionam prefetching com alguns cliques. Ou peça ao seu designer/desenvolvedor.
Próximos Passos
Agora que você já sabe usar DNS prefetching, explore também:
- Preconnect: conecta antecipadamente (mais agressivo que prefetch, use para 1-2 domínios críticos).
- Prefetch de recursos: carrega arquivos que o visitante provavelmente vai precisar.
- CDN global: combina com prefetching para máxima velocidade.
- Cache HTTP: evita rebaixar recursos — peça ao seu host (GeHost! 😊) para ativar.
Dúvidas? Estou Aqui!
Se tiver dúvida em algum passo ou quiser otimizar mais o seu site, abra um ticket com a gente ou responda este guia. A equipe de suporte da GeHost está sempre pronta pra ajudar — somos da comunidade! 🙌
Abraços,
Sensei da GeHost
