Dans le dernier module sur l'optimisation du chargement des ressources, vous avez appris comment diverses ressources de page telles que CSS et JavaScript peuvent affecter la vitesse de chargement des pages, et comment vous pouvez les optimiser et les distribuer pour accélérer le rendu d'une page. C'est le moment idéal pour aborder un aspect plus avancé du chargement des ressources, qui consiste à aider le navigateur à les charger plus rapidement à l'aide d'indices de ressources.
Les hints de ressources peuvent aider les développeurs à optimiser davantage le temps de chargement des pages en informant le navigateur sur la façon de charger et de hiérarchiser les ressources. Un ensemble initial d'indices de ressources tels que preconnect
et dns-prefetch
a été introduit en premier.
Toutefois, au fil du temps, preload
et l'API Fetch Priority ont suivi pour fournir des fonctionnalités supplémentaires.
Les optimisations de ressources indiquent au navigateur d'effectuer certaines actions à l'avance, ce qui peut améliorer les performances de chargement. Les indications de ressources peuvent effectuer des actions telles que des recherches DNS anticipées, des connexions à des serveurs à l'avance et même la récupération de ressources avant que le navigateur ne les découvre normalement.
Les indications de ressources peuvent être spécifiées dans le code HTML (le plus souvent au début de l'élément <head>
) ou définies en tant qu'en-tête HTTP. Dans le cadre de ce module, preconnect
, dns-prefetch
et preload
sont abordés, ainsi que les comportements de récupération spéculative fournis par prefetch
.
preconnect
L'indice preconnect
permet d'établir une connexion à une autre origine à partir de laquelle vous récupérez des ressources critiques. Par exemple, vous pouvez héberger vos images ou vos composants sur un CDN ou une autre origine croisée :
<link rel="preconnect" href="https://example.com">
En utilisant preconnect
, vous anticipez le fait que le navigateur prévoit de se connecter à un serveur d'origine croisée spécifique dans un très proche avenir et que le navigateur doit ouvrir cette connexion dès que possible, idéalement avant d'attendre que l'analyseur HTML ou le scanner de préchargement le fassent.
Si une page contient une grande quantité de ressources d'origines croisées, utilisez preconnect
pour celles qui sont les plus importantes pour la page actuelle.

preconnect
peut atténuer en établissant des connexions plus tôt, plutôt qu'au moment de la découverte de la ressource d'origine croisée.
Google Fonts est un cas d'utilisation courant de preconnect
. Google Fonts vous recommande d'ajouter preconnect
aux domaines https://fonts.googleapis.com
qui diffusent les déclarations @font-face
et https://fonts.gstatic.com
qui diffusent les fichiers de police.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
L'attribut crossorigin
permet d'indiquer si une ressource doit être récupérée à l'aide du partage des ressources entre origines multiples (CORS). Lorsque vous utilisez l'indication preconnect
, si la ressource téléchargée depuis l'origine utilise CORS (comme les fichiers de police), vous devez ajouter l'attribut crossorigin
à l'indication preconnect
.
dns-prefetch
Bien que l'ouverture anticipée de connexions à des serveurs d'origine croisée puisse améliorer considérablement le temps de chargement initial des pages, il n'est pas toujours raisonnable ni possible d'établir des connexions à de nombreux serveurs d'origine croisée à la fois. Si vous craignez d'utiliser trop souvent preconnect
, vous pouvez utiliser l'indicateur de ressource dns-prefetch
, qui est beaucoup moins coûteux.
Comme son nom l'indique, dns-prefetch
n'établit pas de connexion à un serveur d'origine croisée, mais effectue simplement la recherche DNS à l'avance. Une recherche DNS a lieu lorsqu'un nom de domaine est résolu en son adresse IP sous-jacente.
Bien que les couches de caches DNS au niveau de l'appareil et du réseau contribuent à accélérer généralement ce processus, il faut tout de même un certain temps.
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
Les résolutions DNS sont relativement peu coûteuses. En raison de leur coût relativement faible, elles peuvent être un outil plus approprié dans certains cas qu'un preconnect
. En particulier, il peut s'agir d'un indice de ressource souhaitable à utiliser dans le cas de liens qui redirigent vers d'autres sites Web que vous pensez que l'utilisateur est susceptible de suivre. dnstradamus est l'un de ces outils qui le fait automatiquement à l'aide de JavaScript et utilise l'API Intersection Observer pour injecter des indices dns-prefetch
dans le code HTML de la page actuelle lorsque des liens vers d'autres sites Web sont affichés dans la fenêtre d'affichage de l'utilisateur.
preload
L'instruction preload
permet de lancer une requête anticipée pour une ressource requise pour le rendu de la page :
<link rel="preload" href="/lcp-image.jpg" as="image">
Les directives preload
doivent être limitées aux ressources critiques découvertes tardivement.
Les cas d'utilisation les plus courants sont les fichiers de police, les fichiers CSS récupérés via des déclarations @import
ou les ressources CSS background-image
qui sont susceptibles d'être des candidats au Largest Contentful Paint (LCP). Dans ce cas, ces fichiers ne seraient pas détectés par le scanner de préchargement, car la ressource est référencée dans des ressources externes.
Comme pour preconnect
, la directive preload
nécessite l'attribut crossorigin
si vous préchargez une ressource CORS, comme des polices. Si vous n'ajoutez pas l'attribut crossorigin
(ou si vous l'ajoutez pour des requêtes non CORS), la ressource est téléchargée deux fois par le navigateur, ce qui gaspille de la bande passante qui aurait pu être mieux utilisée pour d'autres ressources.
<link rel="preload" href="/font.woff2" as="font" crossorigin>
Dans l'extrait de code HTML précédent, le navigateur est invité à précharger /font.woff2
à l'aide d'une requête CORS, même si /font.woff2
se trouve sur le même domaine.
prefetch
La directive prefetch
est utilisée pour lancer une requête de priorité faible pour une ressource susceptible d'être utilisée pour de futures navigations :
<link rel="prefetch" href="/next-page.css" as="style">
Cette directive suit en grande partie le même format que la directive preload
, à la différence que l'attribut rel
de l'élément <link>
utilise la valeur "prefetch"
.
Toutefois, contrairement à la directive preload
, prefetch
est en grande partie spéculative, car vous lancez une récupération d'une ressource pour une future navigation qui peut ou non se produire.
Dans certains cas, prefetch
peut être utile. Par exemple, si vous avez identifié un parcours utilisateur sur votre site Web que la plupart des utilisateurs suivent jusqu'à la fin, un prefetch
pour une ressource essentielle au rendu de ces futures pages peut contribuer à réduire leur temps de chargement.
API Fetch Priority
Vous pouvez utiliser Fetch Priority API
via son attribut fetchpriority
pour augmenter la priorité d'une ressource. Vous pouvez utiliser l'attribut avec les éléments <link>
, <img>
et <script>
.
<div class="gallery">
<div class="poster">
<img src="img/poster-1.jpg" fetchpriority="high">
</div>
<div class="thumbnails">
<img src="img/thumbnail-2.jpg" fetchpriority="low">
<img src="img/thumbnail-3.jpg" fetchpriority="low">
<img src="img/thumbnail-4.jpg" fetchpriority="low">
</div>
</div>
Par défaut, les images sont récupérées avec une priorité plus faible. Après la mise en page, si l'image se trouve dans la fenêtre d'affichage initiale, la priorité est définie sur Élevée. Dans l'extrait de code HTML précédent, fetchpriority
indique immédiatement au navigateur de télécharger l'image LCP plus grande avec une priorité élevée, tandis que les images miniatures moins importantes sont téléchargées avec une priorité inférieure.
Les navigateurs modernes chargent les ressources en deux phases. La première phase est réservée aux ressources critiques et se termine une fois que tous les scripts bloquants ont été téléchargés et exécutés. Pendant cette phase, le téléchargement des ressources de priorité faible peut être retardé. En utilisant fetchpriority="high"
, vous pouvez augmenter la priorité d'une ressource, ce qui permet au navigateur de la télécharger lors de la première phase.
Démos d'optimisations de ressources
Tester vos connaissances
À quoi sert l'indication de ressource preconnect
?
Que vous permet de faire l'API Fetch Priority ?
<link>
, <img>
et <script>
.
Quand utiliser l'indice prefetch
?
À suivre : Performances des images
À présent, vous devriez commencer à vous sentir assez à l'aise avec les considérations générales sur les performances en ce qui concerne le code HTML des pages, l'élément <head>
et les indications de ressources. Toutefois, il existe d'autres optimisations spécifiques aux différents types de ressources que les pages chargent généralement. Ensuite, les performances des images seront abordées dans le prochain module. Vous y apprendrez comment faire en sorte que les images de votre site Web se chargent le plus rapidement possible, quel que soit l'appareil de l'utilisateur.