Dans le dernier module sur l'optimisation du chargement des ressources, vous avez appris comment différentes ressources de page, telles que CSS et JavaScript, peuvent influer sur la vitesse de chargement des pages. Vous avez également découvert comment les optimiser et leur diffusion pour accélérer l'affichage d'une page. C'est le moment idéal pour passer à un aspect plus avancé du chargement des ressources, qui consiste à aider le navigateur à les charger plus rapidement à l'aide de suggestions de ressources.
Les indications de ressources peuvent aider les développeurs à optimiser davantage le temps de chargement des pages en indiquant au navigateur comment charger et hiérarchiser les ressources. Un ensemble initial d'indications de ressources, tel que preconnect et dns-prefetch, a été le premier à être introduit.
Toutefois, au fil du temps, preload et l'API Fetch Priority ont été conçus pour fournir des fonctionnalités supplémentaires.
Les optimisations de ressources indiquent au navigateur d'effectuer certaines actions à l'avance qui peuvent améliorer les performances de chargement. Les indices de ressources peuvent effectuer des actions telles que l'exécution de recherches DNS anticipées, la connexion à des serveurs à l'avance et même l'extraction de ressources avant que le navigateur ne les détecte normalement.
Les indications de ressources peuvent être spécifiées en HTML (le plus souvent au début de l'élément <head>) ou définies comme un en-tête HTTP. Dans le cadre de ce module, nous aborderons preconnect, dns-prefetch et preload, ainsi que les comportements d'extraction spéculatifs fournis par prefetch.
preconnect
La suggestion 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 éléments sur un CDN ou un autre réseau multi-origine:
<link rel="preconnect" href="https://example.com">
En utilisant preconnect, vous prévoyez que le navigateur prévoit de se connecter à un serveur multi-origine spécifique dans un avenir très proche et que le navigateur devrait ouvrir cette connexion dès que possible, idéalement avant d'attendre que l'analyseur HTML ou l'analyseur de préchargement le fasse.
Si vous disposez d'une grande quantité de ressources multi-origines sur une page, utilisez preconnect pour les ressources les plus critiques pour la page actuelle.
preconnect peut réduire en établissant les connexions plus tôt, plutôt qu'au moment de la découverte de la ressource multi-origine.
Google Fonts est un cas d'utilisation courant de preconnect. Google Fonts vous recommande d'utiliser une propriété preconnect pour le domaine https://fonts.googleapis.com qui diffuse les déclarations @font-face et pour le domaine https://fonts.gstatic.com qui diffuse les fichiers de polices.
<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'indice preconnect, si la ressource téléchargée à partir de l'origine utilise CORS (comme des fichiers de police), vous devez ajouter l'attribut crossorigin à l'indice preconnect.
dns-prefetch
Bien que l'ouverture précoce de connexions à des serveurs multi-origines puisse améliorer considérablement le temps de chargement initial des pages, il n'est pas toujours raisonnable ni possible d'établir des connexions à plusieurs serveurs multi-origines à la fois. Si vous craignez d'utiliser preconnect de manière excessive, nous vous recommandons d'utiliser dns-prefetch.
Selon son nom, dns-prefetch n'établit pas de connexion à un serveur multi-origine, mais effectue simplement à l'avance la recherche DNS pour celui-ci. Une résolution DNS se produit lorsqu'un nom de domaine est résolu en son adresse IP sous-jacente.
Bien que les couches de mises en cache DNS au niveau de l'appareil et du réseau contribuent à rendre ce processus généralement rapide, cela prend toujours 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 et en raison de leur coût relativement faible, elles peuvent être dans certains cas un outil plus approprié qu'un preconnect. Il peut s'agir d'une indication de ressource utile dans les cas de liens qui redirigent vers d'autres sites Web que l'utilisateur est susceptible de suivre. dnstradamus est un outil qui procède automatiquement à cette opération à l'aide de JavaScript et utilise l'API Intersection Observer pour injecter des indications dns-prefetch dans le code HTML de la page actuelle lorsque des liens vers d'autres sites Web sont défilés dans la fenêtre d'affichage de l'utilisateur.
preload
L'instruction preload permet d'initier une requête anticipée d'une ressource nécessaire à l'affichage de la page:
<link rel="preload" href="/lcp-image.jpg" as="image">
Les directives preload doivent se limiter 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 les déclarations @import ou les ressources CSS background-image susceptibles d'être des candidats LCP (Largest Contentful Paint). Dans ce cas, ces fichiers ne seraient pas découverts par l'outil d'analyse de préchargement, car la ressource est référencée dans des ressources externes.
Comme pour preconnect, l'instruction preload nécessite l'attribut crossorigin si vous préchargez une ressource CORS, telle que des polices. Si vous n'ajoutez pas l'attribut crossorigin ou que vous ne l'ajoutez pas pour les requêtes non CORS, la ressource est téléchargée deux fois par le navigateur, gaspillant ainsi de la bande passante qui aurait pu être mieux dépensé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 permet d'initier une requête de faible priorité 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 l'instruction preload. Seul l'attribut rel de l'élément <link> utilise la valeur "prefetch" à la place.
Toutefois, contrairement à la directive preload, prefetch est principalement spéculatif dans le sens où vous lancez une récupération pour une ressource pour une navigation future 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'au bout, un prefetch pour une ressource essentielle à l'affichage pour ces futures pages peut vous aider à 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é inférieure. Après la mise en page, si l'image se trouve dans la fenêtre d'affichage initiale, la priorité passe à High (Élevée). Dans l'extrait de code HTML précédent, fetchpriority indique immédiatement au navigateur de télécharger l'image LCP la plus grande avec une priorité Élevée, tandis que les vignettes les moins importantes sont téléchargées avec une priorité inférieure.
Les navigateurs récents 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 et permettre au navigateur de la télécharger lors de la première phase.
Démonstrations d'optimisations de ressources
Tester vos connaissances
À quoi sert l'indice de ressource preconnect ?
Que vous permet de faire l'API Fetch Priority ?
<link>, <img> et <script>.
Quand devez-vous utiliser l'indice prefetch ?
À suivre: Performances des images
À présent, vous commencez probablement à avoir des connaissances générales sur les considérations générales de performances en ce qui concerne le code HTML de la page, l'élément <head> et les indications de ressources. Cependant, il existe d'autres optimisations spécifiques aux différents types de ressources que les pages chargent couramment. Ensuite, la performance des images est traitée dans le module suivant, qui peut vous aider à charger les images de votre site aussi rapidement que possible, quel que soit l'appareil de l'utilisateur.