web-dev-qa-db-fra.com

préconnexion vs conseils de ressources dns-prefetch

https://www.w3.org/TR/resource-hints/

Si je comprends bien, les deux sont utilisés pour établir une connexion précoce pour charger les ressources plus rapidement à une date ultérieure.

preconnect fait juste "plus".

Outre une meilleure prise en charge du navigateur, y a-t-il une raison d'utiliser dns-prefetch sur preconnect? J'ai également vu des sites Web utilisant les deux rel à la même balise de lien afin d'utiliser la préconnexion si possible et revenir à dns-prefetch sinon.

<head>
  <link
    rel="dns-prefetch preconnect"
    href="https://fonts.gstatic.com"
    crossorigin
  >
</head>
google-chromenetworkingwebdnslatency
25
Robin Drexler

J'ai fait des recherches sur le sujet un peu récemment et jusqu'à présent, mes conclusions (théoriques) sont les suivantes:

La différence de prise en charge des navigateurs est négligeable à partir de la mi-2018, lors du comptage de l'utilisation globale réelle des navigateurs ( ~ 73% vs ~ 74% )

dns-prefetch = DNS et preconnect = DNS + TCP + TLS. Notez que la recherche DNS est assez bon marché à effectuer (une simple requête-réponse au serveur DNS, qui est mise en cache dans le navigateur pendant un court laps de temps), tandis que TCP et TLS implique certaines ressources du serveur.

La différence pratique est donc, si vous savez qu'un serveur va chercher va arriver à coup sûr, preconnect est bon . Si cela ne se produit que parfois et que vous vous attendez à un trafic énorme, preconnect peut déclencher beaucoup de choses inutiles TCP et TLS fonctionnent, et dns-prefetch pourrait être mieux adapté.

Par exemple:

  • si la page demande https://backend.example.com/giveMeFreshData à chaque chargement, et la réponse ne peut pas être mise en cache, preconnect est un bon ajustement
  • si la page ne demande qu'une ressource statique comme https://statics-server.example.com/some-image.jpg ou https://statics-server.example.com/some-css.css, et la ressource est très susceptible de provenir du cache du navigateur de l'utilisateur (les mêmes ressources sont utilisées sur de nombreuses pages, et votre utilisateur déclenchera de nombreux chargements de page comme celui-ci avec le cache chaud - et non d'autres ressources sont extraites de cette origine), puis preconnect peut créer beaucoup de connexions TCP TCP $ inutiles sur votre serveur (qui seront abandonnées après quelques secondes, mais quand même, elles n'étaient pas nécessaires en premier lieu) et les poignées de main TLS (cependant dans ce cas, preload pourrait être une option si vous connaissez l'URL exacte et la ressource est très importante).
  • Si le trafic sur votre site Web est faible, il ne devrait pas être trop affecté par cette différence, donc preconnect est probablement un bon choix pour les sites Web à faible trafic, quelles que soient les choses mentionnées précédemment.

Comme toujours, il vaut mieux penser aux cas d'utilisation, déployer, mesurer et affiner.

22
jakub.g

1 Préconnexion

Le dernier indice de ressource dont nous voulons parler est la préconnexion. Preconnect permet au navigateur de configurer des connexions précoces avant qu'une requête HTTP ne soit réellement envoyée au serveur. Cela inclut les recherches DNS, les négociations TLS, TCP poignées de main. Cela élimine à son tour la latence aller-retour et fait gagner du temps aux utilisateurs.

2 Prélecture

La prélecture est une indication de ressource de faible priorité qui permet au navigateur d'extraire des ressources en arrière-plan (temps d'inactivité) qui pourraient être nécessaires ultérieurement et de les stocker dans le cache du navigateur. Une fois qu'une page a fini de se charger, elle commence à télécharger des ressources supplémentaires et si un utilisateur clique ensuite sur un lien prérécupéré, il chargera le contenu instantanément.

2.1 Prélecture des liens

La prélecture des liens permet au navigateur de récupérer des ressources, de les stocker dans le cache, en supposant que l'utilisateur les demandera. Le navigateur recherche la prélecture dans le HTML ou le lien d'en-tête HTTP.

2.2 Prérécupération DNS

La prélecture DNS permet au navigateur d'effectuer des recherches DNS sur une page en arrière-plan pendant que l'utilisateur navigue. Cela minimise la latence car la recherche DNS a déjà eu lieu une fois que l'utilisateur a cliqué sur un lien. La prélecture DNS peut être ajoutée à une URL spécifique en ajoutant la balise rel = "dns-prefetch" à l'attribut link. Nous vous suggérons de l'utiliser sur des éléments tels que les polices Google, Google Analytics et votre CDN.

2.3 Pré-rendu

La pré-rendu est très similaire à la prélecture en ce sens qu'elle rassemble les ressources que l'utilisateur peut parcourir ensuite. La différence est que le pré-rendu rend la page entière en arrière-plan, tous les actifs d'un document.

Plus de détails: https://www.keycdn.com/blog/resource-hints/

Conclusion

Différence principale entre dns-prefetch et preconnect

La différence entre dns-prefetch et preconnect est que dns-prefetch ne fera que la recherche DNS, tandis que preconnect fera la recherche DNS, la négociation TLS et la prise de contact TCP. Cela signifie qu'il évite une 2 RTT supplémentaires une fois que la ressource est prête à être téléchargée.

Un aspect important est que la prise en charge de dns-prefetch est beaucoup plus importante que la prise en charge de la préconnexion.

Vous pouvez trouver des exemples concrets ici: https://responsivedesign.is/articles/prefetch-preconnect-dns-priority/

8
Pascut