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:

  1. O domínio é resolvido para obter um endereço IP.
  2. Uma conexão é estabelecida com o servidor.
  3. 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.

image-14.png
Fonte: https://web.dev/preconnect-and-dns-prefetch/

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.