O DNS Prefetch é uma técnica de otimização de desempenho usada para reduzir o tempo de carregamento das páginas da web. Ele permite que os navegadores resolvam previamente os endereços IP dos domínios externos que um site pode acessar, evitando atrasos quando esses recursos forem requisitados.
Essa técnica é especialmente útil para sites que utilizam CDNs (Content Delivery Networks), fontes externas, scripts de terceiros e APIs, pois ajuda a minimizar a latência causada pelas consultas DNS.
Neste artigo do Blog Dolutech, vamos explicar o que é DNS Prefetch, como funciona, como implementá-lo e fornecer uma lista completa de domínios recomendados para pré-carregamento, garantindo que seu site tenha um carregamento mais rápido e eficiente.
O Que é DNS Prefetch?
Toda vez que um navegador precisa carregar um recurso de um domínio externo, ele primeiro precisa resolver o endereço IP desse domínio por meio de uma consulta DNS. Esse processo pode demorar entre 20 a 100ms, dependendo da rede do usuário e da proximidade com os servidores DNS.
O DNS Prefetch antecipa essa resolução antes que o usuário realmente precise acessar o recurso, reduzindo atrasos quando a solicitação for feita.
Como Funciona o DNS Prefetch?
O navegador usa o DNS Prefetch para tentar resolver previamente um hostname, buscando seu IP antes que o recurso seja necessário. Isso reduz o tempo de espera quando o usuário interage com elementos da página que exigem domínios externos.
Exemplo sem DNS Prefetch:
- O usuário acessa uma página web.
- O navegador encontra um link para um domínio externo (
//fonts.googleapis.com). - O navegador pausa o carregamento e resolve o endereço IP desse domínio.
- Depois que a resolução é concluída, o navegador busca os recursos.
Exemplo com DNS Prefetch:
- O usuário acessa a página.
- O navegador já resolveu previamente o domínio (
//fonts.googleapis.com). - O recurso é carregado imediatamente, sem atrasos.
Como Implementar o DNS Prefetch?
A implementação do DNS Prefetch é simples e pode ser feita inserindo a seguinte tag <link> dentro do <head> do seu site:
<link rel="dns-prefetch" href="//example.com">Se o seu site usa muitos domínios externos, é possível adicionar várias entradas de DNS Prefetch para antecipar a resolução de todos eles.
Lista de Domínios Recomendados para DNS Prefetch
Aqui está uma lista abrangente de domínios mais utilizados em sites modernos para CDNs, fontes, scripts de rastreamento e APIs, que podem ser pré-carregados para melhorar o desempenho, hospedamos no GitHub para melhor partilha com a comunidade:
dns-prefetch/dns-list.txt at main · dolutech/dns-prefetch
Um exemplo de como deve ficar no seu site:
<!-- Google Fonts -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<!-- Google CDN -->
<link rel="dns-prefetch" href="//ajax.googleapis.com">
<link rel="dns-prefetch" href="//www.gstatic.com">
<link rel="dns-prefetch" href="//maps.googleapis.com">
<link rel="dns-prefetch" href="//maps.gstatic.com">💡 Dica: Para saber quais domínios seu site utiliza e podem ser pré-carregados, use a ferramenta Google Chrome DevTools (F12 → Aba “Network” → “Domains”).
Se você Utiliza WordPress Adicione Plugins como LiteSpeed Cache, que possui a opção nas otimizações e configurações do plugin.
Diferença Entre DNS Prefetch, Preconnect e Preload
Além do DNS Prefetch, existem outras técnicas para melhorar o desempenho do carregamento de recursos externos:
| Técnica | Descrição |
|---|---|
| DNS Prefetch | Resolve o domínio antes da necessidade do recurso. |
| Preconnect | Estabelece uma conexão com o servidor antes do uso. |
| Preload | Indica ao navegador que o recurso deve ser carregado imediatamente. |
Exemplo de Preconnect:
<link rel="preconnect" href="//www.google-analytics.com">Exemplo de Preload:
<link rel="preload" href="//stackpath.bootstrapcdn.com/bootstrap.min.css" as="style">Conclusão
O DNS Prefetch é uma técnica poderosa para reduzir o tempo de carregamento da página, principalmente em sites que fazem uso de recursos externos. Implementando corretamente, ele pode melhorar significativamente a experiência do usuário, reduzindo o tempo de resposta dos servidores e garantindo uma navegação mais fluida.
Se você deseja melhorar o desempenho do seu site, comece adicionando DNS Prefetch para os domínios externos que você utiliza.
🚀 Acelere seu site agora mesmo com DNS Prefetch!
Amante por tecnologia Especialista em Cibersegurança e Big Data, Formado em Administração de Infraestrutura de Redes, Pós-Graduado em Ciências de Dados e Big Data Analytics e Machine Learning, Com MBA em Segurança da Informação, Escritor do livro ” Cibersegurança: Protegendo a sua Reputação Digital”.
