Pré-conexão ou pré-busca de DNS?

Pré-conexão ou pré-busca de DNS?

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.


Artigos Relacionados

Magnify: Escalonando o marketing de influência com Engin Yurtdakul

Confira nosso estudo de caso do Microsoft Clarity

Destacamos o Microsoft Clarity como um produto desenvolvido com casos de uso práticos e reais em mente, por profissionais de produto experientes que entendem os desafios que empresas como a Switas enfrentam. Recursos como cliques de raiva e rastreamento de erros de JavaScript se mostraram inestimáveis ​​na identificação de frustrações e problemas técnicos dos usuários, permitindo melhorias direcionadas que impactaram diretamente a experiência do usuário e as taxas de conversão.