Embora o objetivo de todos seja reduzir o orçamento de desempenho web, ainda é necessário utilizar serviços de terceiros. Ao usar esses serviços, o "Pesquisa de DNS"Os tempos podem consumir uma parcela significativa do orçamento, dependendo do número de serviços. Essas cargas afetam vários aspectos da velocidade da página, incluindo o First Contentful Paint (FCP).
O objetivo desses dois conceitos é otimizar os tempos de conexão de terceiros. Antes de entender as diferenças entre esses dois conceitos, é necessário entender o que exatamente acontece quando uma solicitação de terceiro é feita:
- O domínio é resolvido para obter um endereço IP.
- Uma conexão é estabelecida com o servidor.
- A conexão é criptografada para garantir a segurança.
Esta hierarquia é repetida para cada conexão de terceiros. É aqui que entra em jogo a diferença entre pré-conexão e pré-busca de DNS.
- Pré-conectar: Garante que todas as três etapas mencionadas acima estejam pré-configuradas.
- Pré-busca de DNS: Serve apenas para converter o nome de domínio em um endereço IP na primeira etapa.
Como você pode ver, a pré-conexão é mais abrangente e benéfica. No entanto, tudo tem um custo. Usar a pré-conexão para todas as suas conexões pode impactar negativamente a otimização da sua página. Portanto, vocêVocê deve usar a pré-conexão apenas para conexões críticas e usar a pré-busca de DNS para todas as outras conexões de terceiros.

Resumo de uso
Dadas as informações acima, aqui está um rápido resumo de seu uso:
<link rel="preconnect" href="https://third-party-example.com">
<link rel="dns-prefetch" href="https://third-party-example.com">
Compatibilidade do navegador
Ao discutir seu uso, também é importante mencionar a compatibilidade do navegador. Esses dois conceitos intimamente relacionados são amplamente suportados pelos navegadores modernos, mas seu uso não se sobrepõe completamente. O Preconnect é compatível com aproximadamente 97% dos navegadores, enquanto DNS-prefetch é compatível com 83% dos navegadores (em junho de 2024).
Contribuição para o orçamento de desempenho da Web
- O Preconnect pode fornecer uma melhoria total na velocidade de 100-500ms.
- DNS-Prefetch pode acelerar cada conexão 20-120ms.
Planejamos realizar nossos próprios testes para fornecer exemplos locais mais satisfatórios.
Por fim, gostaria de recomendar e dar crédito ao blog de Ceyhun Enki Aksan, que muito contribuiu para minha compreensão durante a preparação deste artigo: Blog de Ceyhun Enki Aksan.