Merci d'avoir participé à Google I/O ! Regarder des contenus à la demande

Cette page a été traduite par l'API Cloud Translation.

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.

Capture d'écran des temps de connexion d'une ressource dans le panneau "Network" (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> 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.

`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> Attention:Si vous utilisez preload pour télécharger une image spécifiée par un élément <img> qui varie en fonction de la fenêtre d'affichage de l'utilisateur, assurez-vous d'ajouter imagesrcset à l'indice preload pour télécharger la bonne image pour la fenêtre d'affichage actuelle. Vous devez également exclure src. afin que les navigateurs non compatibles avec le préchargement responsif ne téléchargent pas l'image de remplacement.

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> Important:Une ressource spécifiée dans un La directive preload est téléchargée deux fois si la commande as est manquant dans l'élément <link> de la directive. Pour obtenir la liste des valeurs des attributs as, consultez le Documentation MMD sur les valeurs d'attribut as

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> Attention:L'instruction preload est un élément une optimisation efficace des performances, qui est d'ailleurs surutilisée. Ressources téléchargées à l'aide de l'instruction preload sont effectivement téléchargée à priorité élevée et, en cas de surutilisation, preload risque de créer des conflits de bande passante qui ont un impact négatif sur la vitesse de chargement de la page

`prefetch`

</ph> Important:Il s'agit d'une explication très générale Indice sur la ressource prefetch. Par conséquent, cette section ne couvre pas en détail certains des points à prendre en compte et des compromis dont vous devez tenir compte. lorsque vous l'utilisez. Un module ultérieur de ce cours détaille prefetching ressources de faible priorité nécessaires dans un avenir proche, ainsi que prefetching pour accélérer les futures navigations.

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> Attention:Étant donné le caractère spéculatif des prefetch, son utilisation peut s'accompagner d'un inconvénient : les données utilisée pour récupérer la ressource peut ne plus être utilisée si l'utilisateur n'accède pas à la page qui finit par avoir besoin de la ressource préchargée. Appuyez-vous sur vos données analytiques d'autres sources de données sur les habitudes d'utilisation de votre site Web, afin de décider vous-même si il est recommandé d'utiliser prefetch. Vous pouvez également utiliser Indice Save-Data pour désactiver le préchargement pour les utilisateurs qui ont spécifié une préférence de réduction de la consommation des données.

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> Important:L'attribut fetchpriority est en particulier efficace lorsqu'il est utilisé pour l'image LCP d'une page. En élevant la priorité d'un l'image LCP d'une page avec cet attribut, vous pouvez améliorer le LCP d'une page en très facilement.

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 ?

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.

Bonne réponse !

N'effectue qu'une résolution DNS sur le serveur multi-origine.

Réessayez.

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

Réessayez.

Spécifiez la priorité relative de <link>. <img> et <script>.

Bonne réponse !

Quand utiliser l'indice prefetch ?

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.

Réessayez.

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.

Bonne réponse !

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.

Bonne réponse !

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