Découvrez les indications de ressources rel=preconnect et rel=dns-prefetch, et comment les utiliser.
Avant de pouvoir demander une ressource à un serveur, le navigateur doit établir une connexion. L'établissement d'une connexion sécurisée comporte trois étapes :
Recherchez le nom de domaine et résolvez-le en adresse IP.
Configurez une connexion au serveur.
Chiffrez la connexion pour plus de sécurité.
À chacune de ces étapes, le navigateur envoie un élément de données à un serveur, et le serveur renvoie une réponse. Ce parcours, de l'origine à la destination et inversement, est appelé "aller-retour".
En fonction des conditions du réseau, un seul aller-retour peut prendre un temps considérable. Le processus de configuration de la connexion peut impliquer jusqu'à trois allers-retours, voire plus dans les cas non optimisés.
Le fait de s'en occuper à l'avance rend les applications beaucoup plus rapides. Cet article explique comment y parvenir avec deux indications de ressources : <link rel=preconnect> et <link rel=dns-prefetch>.
Établir des connexions anticipées avec rel=preconnect
Les navigateurs modernes font de leur mieux pour anticiper les connexions dont une page aura besoin, mais ils ne peuvent pas toutes les prédire de manière fiable. La bonne nouvelle, c'est que vous pouvez leur donner une indication (de ressource 😉).
L'ajout de rel=preconnect à un <link> informe le navigateur que votre page a l'intention d'établir une connexion à un autre domaine et que vous souhaitez que le processus démarre dès que possible. Les ressources se chargeront plus rapidement, car le processus de configuration aura déjà été effectué au moment où le navigateur les demandera.
Les indications de ressources portent ce nom, car elles ne sont pas des instructions obligatoires. Elles fournissent des informations sur ce que vous souhaitez qu'il se passe, mais c'est en fin de compte au navigateur de décider s'il doit les exécuter. La configuration et le maintien d'une connexion ouverte demandent beaucoup de travail. Le navigateur peut donc choisir d'ignorer les indications de ressources ou de les exécuter partiellement en fonction de la situation.
Pour informer le navigateur de votre intention, il vous suffit d'ajouter une balise <link> à votre page :
<link rel="preconnect" href="https://example.com">
Vous pouvez accélérer le temps de chargement de 100 à 500 ms en établissant des connexions anticipées avec des origines tierces importantes. Ces chiffres peuvent sembler faibles, mais ils font la différence dans la façon dont les utilisateurs perçoivent les performances des pages Web.
Cas d'utilisation de rel=preconnect
Connaître la provenance, mais pas ce que vous récupérez
En raison des dépendances versionnées, vous vous retrouvez parfois dans une situation où vous savez que vous allez demander une ressource à un CDN particulier, mais pas le chemin exact.
L'autre cas courant consiste à charger des images à partir d'un CDN d'images, où le chemin exact d'une image dépend des requêtes média ou des vérifications des fonctionnalités d'exécution sur le navigateur de l'utilisateur.
Dans ces situations, si la ressource que vous allez récupérer est importante, vous devez gagner le plus de temps possible en vous connectant à l'avance au serveur. Le navigateur ne téléchargera pas le fichier tant que votre page ne l'aura pas demandé, mais au moins il pourra gérer les aspects de la connexion à l'avance, ce qui évitera à l'utilisateur d'attendre plusieurs allers-retours.
Streaming multimédia
Un autre exemple où vous pouvez gagner du temps lors de la phase de connexion, mais pas nécessairement commencer à récupérer du contenu immédiatement, est le streaming multimédia à partir d'une autre origine.
Selon la façon dont votre page gère le contenu en streaming, vous pouvez attendre que vos scripts soient chargés et prêts à traiter le flux. La préconnexion vous permet de réduire le temps d'attente à un seul aller-retour lorsque vous êtes prêt à commencer la récupération.
Implémenter rel=preconnect
Pour lancer une preconnect, vous pouvez ajouter une balise <link> à l'élément <head> du document.
<head>
<link rel="preconnect" href="https://example.com">
</head>
La préconnexion n'est efficace que pour les domaines autres que le domaine d'origine. Vous ne devez donc pas l'utiliser pour votre site.
Vous pouvez également lancer une préconnexion via l'en-tête HTTP Link:
Link: <https://example.com/>; rel=preconnect
Certains types de ressources, comme les polices, sont chargés en mode anonyme. Pour ceux-ci, vous devez définir l'attribut crossorigin avec l'indication preconnect :
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
Si vous omettez l'attribut crossorigin, le navigateur n'effectue que la résolution DNS.
Résoudre le nom de domaine à l'avance avec rel=dns-prefetch
Vous vous souvenez des sites par leur nom, mais les serveurs s'en souviennent par leur adresse IP. C'est pourquoi le système de noms de domaine (DNS) existe. Le navigateur utilise le DNS pour convertir le nom du site en adresse IP. Ce processus, appelé "résolution de nom de domaine", est la première étape de l'établissement d'une connexion.
Si une page doit se connecter à de nombreux domaines tiers, il est contre-productif de tous les préconnecter. L'indication preconnect est préférable pour les connexions les plus critiques uniquement. Pour toutes les autres, utilisez <link rel=dns-prefetch> pour gagner du temps lors de la première étape, la résolution DNS, qui prend généralement entre 20 et 120 ms.
La résolution DNS est lancée de la même manière que preconnect : en ajoutant une balise <link> à l'élément <head> du document.
<link rel="dns-prefetch" href="http://example.com">
La prise en charge de dns-prefetch par le navigateur est légèrement différente de celle de preconnect support. dns-prefetch peut donc servir de solution de secours pour les navigateurs qui ne prennent pas en charge preconnect.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">
<link rel="preconnect dns-prefetch" href="http://example.com">
dns-prefetch dans la même balise <link> provoque un bug dans Safari où preconnect est annulé.
Effet sur le Largest Contentful Paint (LCP)
L'utilisation de dns-prefetch et preconnect permet aux sites de réduire le temps nécessaire pour se connecter à une autre origine. L'objectif ultime est de réduire au maximum le temps nécessaire pour charger une ressource à partir d'une autre origine.
En ce qui concerne le Largest Contentful Paint (LCP), il est préférable que les ressources soient immédiatement détectables, car les candidats LCP sont des éléments essentiels de l'expérience utilisateur. Une fetchpriority valeur de "high" sur les ressources LCP peut encore améliorer cela en signalant l'importance de cet élément au navigateur afin qu'il puisse le récupérer à l'avance.
Lorsqu'il n'est pas possible de rendre les éléments LCP immédiatement détectables, un preload lien, également avec la fetchpriority valeur de "high", permet toujours au navigateur de charger la ressource dès que possible.
Si aucune de ces options n'est disponible, car la ressource exacte ne sera connue que plus tard lors du chargement de page, vous pouvez utiliser preconnect sur les ressources inter-origines pour réduire au maximum l'impact de la découverte tardive de la ressource.
De plus, preconnect est moins coûteux que preload en termes d'utilisation de la bande passante, mais il n'est pas sans risque. Comme c'est le cas avec les indications preload excessives, les indications preconnect excessives consomment toujours de la bande passante en ce qui concerne les certificats TLS. Veillez à ne pas vous connecter à l'avance à trop d'origines, car cela peut entraîner une contention de la bande passante.
Conclusion
Ces deux indications de ressources sont utiles pour améliorer la vitesse des pages lorsque vous savez que vous allez bientôt télécharger quelque chose à partir d'un domaine tiers, mais que vous ne connaissez pas l'URL exacte de la ressource. Par exemple, les CDN qui distribuent des bibliothèques, des images ou des polices JavaScript. Tenez compte des contraintes, n'utilisez preconnect que pour les ressources les plus importantes, reposez-vous sur dns-prefetch pour le reste et mesurez toujours l'impact dans le monde réel.