Même si l’objectif de chacun est de réduire le budget performance web, il reste néanmoins nécessaire de recourir à des services tiers. Lors de l'utilisation de ces services, le "Recherche DNS" Les temps peuvent consommer une partie importante du budget, en fonction du nombre de services. Ces charges affectent divers aspects de la vitesse des pages, y compris First Contentful Paint (FCP).
L’objectif de ces deux concepts est d’optimiser les temps de connexion des tiers. Avant de comprendre les différences entre ces deux concepts, il est nécessaire de comprendre ce qui se passe exactement lorsqu’une demande d’un tiers est formulée :
- Le domaine est résolu pour obtenir une adresse IP.
- Une connexion est établie avec le serveur.
- La connexion est cryptée pour garantir la sécurité.
Cette hiérarchie est répétée pour chaque connexion tierce. C'est là que la différence entre préconnexion et dns-prefetch entre en jeu.
- Préconnexion : Garantit que les trois étapes mentionnées ci-dessus sont préconfigurées.
- Prélecture DNS : Ne sert qu'à convertir le nom de domaine en adresse IP dans un premier temps.
Comme vous pouvez le constater, la préconnexion est plus complète et plus avantageuse. Cependant, tout a un prix. L'utilisation de preconnect pour toutes vos connexions pourrait avoir un impact négatif sur l'optimisation de votre page. Par conséquent, ouivous devez utiliser preconnect uniquement pour les connexions critiques et utiliser dns-prefetch pour toutes les autres connexions tierces.
Résumé de l'utilisation
Compte tenu des informations ci-dessus, voici un bref résumé de leur utilisation :
<link rel="preconnect" href="https://third-party-example.com">
<link rel="dns-prefetch" href="https://third-party-example.com">Compatibilité du navigateur
En discutant de leur utilisation, il est également important de mentionner la compatibilité des navigateurs. Ces deux concepts étroitement liés sont largement pris en charge par les navigateurs modernes, mais leur utilisation ne se chevauche pas complètement. Preconnect est pris en charge par environ 97 % des navigateurs, tandis que dns-prefetch est pris en charge par 83 % des navigateurs (en juin 2024).
Contribution au budget de performance Web
- La préconnexion peut fournir une amélioration totale de la vitesse de 100-500ms.
- DNS-Prefetch peut accélérer chaque connexion en 20-120ms.
Nous prévoyons de mener nos propres tests pour fournir des exemples locaux plus satisfaisants.
Enfin, je voudrais recommander et créditer le blog de Ceyhun Enki Aksan, qui a grandement contribué à ma compréhension lors de la préparation de cet article : Blog de Ceyhun Enki Aksan.
