Aider le navigateur avec des indices de ressources

Dans le dernier module sur l'optimisation du chargement des ressources, vous avez découvert Les ressources de la page, comme les fichiers CSS et JavaScript, peuvent avoir une incidence sur la vitesse de chargement de la page vous pouvez les optimiser ainsi que leur livraison pour accélérer l'affichage d'une page. C'est le moment idéal pour aborder un aspect plus avancé des ressources ce qui implique d'aider le navigateur à les charger plus rapidement des indices de ressources.

Les indications de ressources peuvent aider les développeurs à optimiser davantage le temps de chargement des pages au navigateur comment charger et hiérarchiser les ressources. Un ensemble initial de ressources Les suggestions telles que preconnect et dns-prefetch ont été les premières à être introduites. Toutefois, au fil du temps, preload et l'API Fetch Priority ont suivi pour offrent des fonctionnalités supplémentaires.

Les indices de ressources indiquent au navigateur d'effectuer certaines actions à l'avance ce qui peut améliorer les performances de chargement. Les optimisations de ressource permettent d'effectuer des actions : comme l’exécution des premières résolutions DNS, la connexion aux serveurs à l’avance, et même récupérant des ressources avant que le navigateur ne les découvre en temps normal.

Les optimisations de ressources peuvent être spécifiées en HTML, le plus souvent au début de l'<head> ou défini comme en-tête HTTP. Dans le cadre de ce module, preconnect, dns-prefetch et preload sont abordés, ainsi que les comportements d'extraction spéculative fournis par prefetch.

preconnect

La suggestion preconnect permet d'établir une connexion avec une autre origine à partir de où vous récupérez les ressources critiques. Par exemple, vous hébergez peut-être des images ou des éléments sur un CDN ou un autre multi-origine:

<link rel="preconnect" href="https://example.com">

En utilisant preconnect, vous prévoyez que le navigateur prévoit de se connecter à un un serveur multi-origine spécifique dans un avenir très proche, et que le navigateur doit ouvrir la connexion le plus tôt possible, idéalement avant que la requête un analyseur HTML ou un scanner de préchargement.

Si vous disposez d'une grande quantité de ressources multi-origines sur une page, utilisez preconnect pour les ressources les plus essentielles pour la page actuelle.

<ph type="x-smartling-placeholder">
</ph> Capture d&#39;écran des temps de connexion d&#39;une ressource dans le panneau &quot;Network&quot; (Réseau) des outils pour les développeurs Chrome. La configuration de la connexion comprend le temps de blocage, la négociation du proxy, la résolution DNS, la configuration de la connexion et la négociation TLS. <ph type="x-smartling-placeholder">
</ph> Visualisation des temps de connexion dans le panneau "Network" (Réseau) de Chrome DevTools. Les durées indiquées dans le cadre rouge correspondent à la configuration d'une avec un serveur multi-origines que preconnect peut atténuer en établissant des connexions plus tôt, plutôt qu'au moment la découverte de la ressource multi-origine.

Google Fonts est un cas d'utilisation courant de preconnect. Recommandations de Google Fonts que vous preconnect au domaine https://fonts.googleapis.com diffusé les déclarations @font-face et au domaine https://fonts.gstatic.com qui diffuse 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ées à l'aide du partage des ressources entre origines multiples (CORS). Lorsque vous utilisez la Conseil preconnect, si la ressource téléchargée depuis l'origine utilise (les fichiers de police, par exemple), vous devez ajouter l'attribut crossorigin au fichier Indice sur preconnect.

<ph type="x-smartling-placeholder">

dns-prefetch

Si l'ouverture précoce des connexions aux serveurs d'origine différente peut améliorer le temps de chargement initial de la page, il se peut qu'il ne soit ni raisonnable, ni possible d'établir des connexions avec plusieurs serveurs multi-origines à la fois. Si vous êtes préoccupé(e) que vous utilisez peut-être preconnect de manière excessive, la ressource suivante peut s'avérer bien moins coûteuse Indice dns-prefetch.

Comme son nom l'indique, dns-prefetch n'établit pas de connexion vers un réseau d'origines multiples serveur, mais effectue simplement la recherche DNS à l'avance. Un DNS de recherche se produit 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 à rendre un processus généralement rapide, cela prend encore 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 assez peu coûteuses et, en raison de leur coût relativement faible, Dans certains cas, ils peuvent s'avérer plus appropriés qu'un preconnect. Dans en particulier, il peut s'agir d'une indication de ressource souhaitable à utiliser dans les cas de liens accéder à d'autres sites Web qui, selon vous, l'utilisateur est susceptible de suivre. dnstradamus est l'un de ces outils qui effectue automatiquement cette opération à l'aide de JavaScript, et utilise l'API Intersection Observer pour injecter des indications dns-prefetch dans la le code HTML de la page actuelle lorsque l'utilisateur fait défiler des liens vers d'autres sites Web fenêtre d'affichage.

preload

L'instruction preload permet de lancer une demande anticipée de ressource. nécessaire pour l'affichage de la page:

<link rel="preload" href="/lcp-image.jpg" as="image">

Les directives preload doivent être limitées aux ressources critiques récemment découvertes. Les cas d'utilisation les plus courants sont les fichiers de police et les fichiers CSS récupérés via @import. ou les ressources background-image CSS susceptibles d'être La plus grande Candidats au LCP (Contentful Paint). Dans de tels cas, ces fichiers ne seraient pas découverte par l'analyseur de préchargement, car la ressource est référencée dans des ressources.

<ph type="x-smartling-placeholder">

Comme pour preconnect, la directive preload exige que l'élément crossorigin si vous préchargez une ressource CORS, comme des polices. Si vous n'ajoutez pas l'attribut crossorigin (ou ajoutez-le pour les requêtes autres que CORS), la ressource est téléchargée deux fois par le navigateur, gaspillant ainsi de la bande passante mieux investir dans d'autres ressources.

<link rel="preload" href="/font.woff2" as="font" crossorigin>
<ph type="x-smartling-placeholder">

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.

<ph type="x-smartling-placeholder">

prefetch

<ph type="x-smartling-placeholder">

L'instruction prefetch permet de lancer une demande 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 globalement le même format que l'instruction preload, mais seulement L'attribut rel de l'élément <link> utilise plutôt la valeur "prefetch". Toutefois, contrairement à la directive preload, prefetch est en grande partie spéculatif dans que vous lancez la récupération d'une ressource pour une navigation future ou non.

prefetch peut parfois être utile, par exemple si vous avez identifié un flux utilisateur sur votre site Web que la plupart des utilisateurs suivent jusqu'à la fin, un prefetch pour une ressource essentielle à l'affichage pour ces futures pages peut aider à de réduire leur temps de chargement.

<ph type="x-smartling-placeholder">

API Fetch Priority

Vous pouvez utiliser Fetch Priority API via son attribut fetchpriority pour pour augmenter la priorité d'une ressource. Vous pouvez utiliser cet attribut avec <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>
<ph type="x-smartling-placeholder">

Par défaut, les images sont récupérées avec une priorité inférieure. Après la mise en page, si le se trouve dans la fenêtre d'affichage initiale, la priorité est augmentée pour Priorité Élevée. Dans l'extrait de code HTML précédent, fetchpriority indique 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 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é. Au cours de cette phase, les ressources de priorité faible peuvent être retardées en cours de téléchargement. En utilisant fetchpriority="high", vous pouvez augmenter la priorité d'un ressource, ce qui permet au navigateur de la télécharger pendant la première phase.

Démonstrations des optimisations de ressources

Tester vos connaissances

À quoi sert la suggestion de ressource preconnect ?

N'effectue qu'une résolution DNS sur le serveur multi-origine.
Il ouvre une connexion à un serveur multi-origine, y compris la résolution DNS, ainsi que la connexion et la négociation TLS avant que le navigateur le découvriraient autrement.

Que vous permet de faire l'API Fetch Priority ?

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

Quand utiliser l'indice prefetch ?

Lorsque vous êtes hautement confiant que les ressources ou les pages que vous avez l'intention de précharger sont nécessaires par l'utilisateur.
Si l'utilisateur n'a pas explicitement indiqué sa préférence pour une consommation réduite des données sur l'utilisation de l'IA générative.
Pour toutes les ressources ou pages dont l'utilisateur pourrait avoir besoin, que ce soit ou non ils en auront réellement besoin à l’avenir.

À suivre: Performances des images

À présent, vous commencez probablement à être assez confiant quant à vos connaissances de performances générales en ce qui concerne le code HTML des pages, le <head> et les optimisations de ressources. Il existe toutefois d'autres optimisations sont propres aux différents types de ressources fréquemment chargés par les pages. Ensuite, les performances des images, est abordée dans le module suivant, les images de votre site Web se chargent aussi vite que possible, quel que soit le l'appareil de l'utilisateur.