Découvrez les indices de ressources rel=preconnect et rel=dns-prefetch, et comment les utiliser.
Avant que le navigateur puisse demander une ressource à un serveur, il doit établir une connexion. Pour établir une connexion sécurisée, vous devez suivre trois étapes:
Recherchez le nom de domaine et résolvez-le en adresse IP.
Configurez une connexion au serveur.
Chiffrez la connexion pour la sécurité.
À chacune de ces étapes, le navigateur envoie une donnée à un serveur, et le serveur renvoie une réponse. Ce trajet (du point de départ à la destination et en retour) est appelé aller-retour.
Selon les conditions du réseau, un aller-retour unique peut prendre beaucoup de temps. Le processus de configuration de la connexion peut impliquer jusqu'à trois allers-retours, voire plus dans les cas non optimisés.
En prenant soin de tout cela à l'avance, les applications auront l'impression d'être beaucoup plus rapides. Cet article explique comment y parvenir à l'aide de deux suggestions de ressources: <link rel=preconnect> et <link rel=dns-prefetch>.
Établissez des contacts précoces avec rel=preconnect
Les navigateurs récents font tout leur possible 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 un indice (ressource 😉).
En ajoutant rel=preconnect à un <link>, vous informez le navigateur que votre page a l'intention d'établir une connexion avec un autre domaine et que vous souhaitez que le processus démarre le plus rapidement possible. Le chargement des ressources est plus rapide, car le processus de configuration est déjà terminé au moment où le navigateur les demande.
Les indications de ressources obtiennent leur nom, car il ne s'agit pas d'instructions obligatoires. Ils fournissent des informations sur l'action que vous souhaitez effectuer, mais c'est au navigateur de décider s'ils souhaitent les exécuter ou non. Configurer et maintenir une connexion ouverte demande beaucoup de travail. Par conséquent, le navigateur peut choisir d'ignorer les indications de ressources ou de les exécuter partiellement, selon 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 réduire le temps de chargement de 100 à 500 ms en établissant les premières connexions avec des origines tierces importantes. Ces chiffres peuvent sembler minimes, mais ils font une différence dans la façon dont les utilisateurs perçoivent les performances des pages Web.
Cas d'utilisation de rel=preconnect
Savoir d'où se trouve l'objet de l'extraction, mais pas quelque chose
En raison des dépendances avec versions gérées, vous vous retrouvez parfois dans une situation dans laquelle vous savez que vous allez demander une ressource à un CDN spécifique, mais sans connaître son chemin d'accès exact.
L'autre cas courant est le chargement d'images à partir d'un CDN d'images, où le chemin d'accès exact d'une image dépend des requêtes multimédias ou des vérifications de l'exécution des fonctionnalités dans le navigateur de l'utilisateur.
Dans ces situations, si la ressource à récupérer est importante, vous devez gagner le plus de temps possible en vous préconnectant au serveur. Le navigateur ne téléchargera pas le fichier tant que votre page ne le demandera pas, mais il peut au moins gérer les aspects de connexion à l'avance, ce qui évite à l'utilisateur d'attendre plusieurs allers-retours.
Diffusion de contenu multimédia
Autre exemple : vous pouvez gagner du temps lors de la phase de connexion, mais ne pas nécessairement commencer à récupérer du contenu immédiatement lorsque vous lisez en streaming du contenu multimédia d'une autre origine.
Selon la façon dont votre page gère le contenu diffusé en direct, 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 une fois que vous êtes prêt à lancer la récupération.
Comment implémenter rel=preconnect ?
Pour initier un preconnect, vous pouvez ajouter une balise <link> à la <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, tels que les polices, sont chargés en mode anonyme. Pour ceux-ci, vous devez définir l'attribut crossorigin avec l'indice 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 de manière anticipée avec rel=dns-prefetch
Vous vous souvenez des sites grâce à leur nom, tandis que les serveurs les retiennent à l'aide de leurs adresses 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 (résolution de nom de domaine) est la première étape de l'établissement d'une connexion.
Si une page doit établir des connexions avec de nombreux domaines tiers, préconnecter tous ces domaines se révèle contre-productif. Il est préférable d'utiliser la suggestion preconnect uniquement pour les connexions les plus critiques. Pour le reste, utilisez <link rel=dns-prefetch> afin de gagner du temps lors de la première étape, la résolution DNS, qui prend généralement 20 à 120 ms.
La résolution DNS est lancée de la même manière que preconnect: en ajoutant une balise <link> à la section <head> du document.
<link rel="dns-prefetch" href="http://example.com">
La compatibilité des navigateurs avec dns-prefetch est légèrement différente de celle pour preconnect . dns-prefetch peut donc servir de solution de secours pour les navigateurs qui ne sont pas compatibles avec preconnect.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">Pour implémenter la technique de remplacement en toute sécurité, utilisez des balises de lien distinctes.
<link rel="preconnect dns-prefetch" href="http://example.com">L'implémentation de la création de remplacement
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 final est de réduire autant que possible le temps de chargement d'une ressource d'une autre origine.
En ce qui concerne la Largest Contentful Paint (LCP), il est préférable que les ressources soient immédiatement visibles, car les candidatures au LCP sont des éléments essentiels de l'expérience utilisateur. Une valeur fetchpriority de "high" sur les ressources LCP peut améliorer encore ce résultat en signalant l'importance de cet asset au navigateur pour qu'il puisse l'extraire rapidement.
Lorsqu'il n'est pas possible de rendre les éléments LCP immédiatement visibles, un lien preload, également associé à la valeur fetchpriority 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 qu'à un stade ultérieur du chargement de la page), vous pouvez utiliser preconnect sur les ressources multi-origines afin de réduire autant que possible l'impact de la découverte tardive de la ressource.
De plus, preconnect est moins cher que preload en termes d'utilisation de la bande passante, mais ce n'est pas pour autant risqué. Comme c'est le cas avec un nombre excessif d'optimisations preload, un nombre excessif d'optimisations preconnect consomme encore de la bande passante en ce qui concerne les certificats TLS. Veillez à ne pas vous connecter à l'avance à trop d'origines, car cela pourrait entraîner des conflits de bande passante.
Conclusion
Ces deux conseils sur les ressources sont utiles pour améliorer la vitesse de chargement des pages lorsque vous savez que vous allez bientôt télécharger du contenu à partir d'un domaine tiers, mais que vous ne connaissez pas l'URL exacte de la ressource. Il peut s'agir, par exemple, de 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, utilisez dns-prefetch pour le reste et mesurez toujours l'impact dans le monde réel.