Le préchargement du contenu est l’un des nombreux moyens d’améliorer les performances du Web. Le site rel de l’attribut link peut être utilisé pour indiquer au navigateur comment traiter différentes ressources. Voici un aide-mémoire pratique pour vous aider à vous souvenir des différentes valeurs et de leurs effets.
rel="preload": Télécharger la ressource dès que possible. Utilisé lorsque vous allez avoir besoin d’une ressource dans quelques secondes, sur la même page.
rel="prefetch": Suggère que la ressource soit récupérée à l’avance. Utilisé lorsque vous avez besoin d’une ressource pour la page suivante.
rel="preconnect": Établit une connexion avec le site Web lié, afin d’accélérer la récupération des ressources par la suite. Utilisé lorsque vous avez besoin d’une ressource, mais que vous ne connaissez pas encore son URL complète.
rel="dns-prefetch": Résout le DNS du site web lié, afin d’accélérer la récupération des ressources à partir de ce site. Utilisé lorsque vous allez avoir besoin d’une ressource, mais que vous ne connaissez pas encore son URL complète (principalement pour les anciens navigateurs).
rel="prerender": Précharger la ressource et la rendre en arrière-plan, accélérant ainsi le chargement de la page à l’avenir. Utilisé lorsque les utilisateurs sont susceptibles de naviguer vers une page spécifique.
rel="modulepreload": Précharger un script de module JavaScript. Utilisé lorsque vous aurez bientôt besoin d’un script de module ES.
