Aider le navigateur avec des indices de ressources

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.

Capture d&#39;écran des délais de connexion pour une ressource dans le panneau réseau des outils pour les développeurs Chrome. La configuration de la connexion inclut le temps d&#39;arrêt, la négociation du proxy, la résolution DNS, la configuration de la connexion et la négociation TLS.
Visualisation des délais de connexion dans le panneau réseau des outils pour les développeurs Chrome. Les délais indiqués dans la zone rouge sont ceux impliqués dans la configuration d'une connexion avec un serveur d'origine croisée, que 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 ?

Ouvre une connexion à un serveur d'origine croisée, y compris la recherche DNS, ainsi que la négociation de connexion et TLS avant que le navigateur ne la découvre autrement.
Effectue uniquement une résolution DNS pour le serveur d'origine croisée.

Que vous permet de faire l'API Fetch Priority ?

Spécifiez la priorité à laquelle le code HTML de la page actuelle est téléchargé.
Spécifiez la priorité relative pour les éléments <link>, <img> et <script>.

Quand utiliser l'indice prefetch ?

Si l'utilisateur n'a pas indiqué explicitement qu'il préférait réduire l'utilisation des données.
Pour toutes les ressources ou pages dont l'utilisateur pourrait avoir besoin, qu'il en ait réellement besoin ou non à l'avenir.
Lorsque vous êtes très sûr que les ressources ou les pages que vous souhaitez précharger seront nécessaires à l'utilisateur.

À 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.