Boostez le chargement des ressources avec fetchpriority, un nouvel indice de priorité

JavaScript, CSS, images, iframes et autres ressources ont un impact sur la rapidité avec laquelle le site Web se charge, s’affiche et devient utilisable pour l’utilisateur. L’expérience de chargement est cruciale pour la première impression de l’utilisateur et la convivialité globale, c’est pourquoi Google a défini La plus grande peinture de contenu (LCP) métrique pour mesurer la rapidité avec laquelle le contenu principal se charge et s’affiche pour l’utilisateur.

Le contenu principal pour LCP est généralement le plus grand élément situé au-dessus du pli. Cet élément peut être une image, une vidéo ou simplement un gros bloc de texte. Parmi toutes ces options, il est prudent de supposer que le texte est le meilleur choix pour les performances LCP car il se charge et s’affiche rapidement.

Les navigateurs suivent un chemin de rendu critique d’analyser le document HTML et ses ressources référencées (CSS, JS, images, etc.) pour afficher le contenu à l’écran. Les navigateurs construisent une arborescence de rendu à l’aide de DOM et de CSSOM, et la page s’affiche une fois que toutes les ressources bloquant le rendu telles que CSS, les fichiers de polices et les scripts ont été analysées et traitées.

Valeurs par défaut des priorités des ressources

Concentrons-nous sur la façon dont ces ressources sont demandées et téléchargées. Le document HTML est la première ressource à être demandée et téléchargée, mais comment les navigateurs déterminent-ils ce qu’il faut ensuite télécharger et dans quel ordre ? Les navigateurs ont un ensemble de priorités prédéterminées pour chaque type de ressource, afin qu’elles puissent être téléchargées dans un ordre optimal.

Voici un résumé approximatif selon le « Priorisation et planification de la récupération des ressources dans Chromium» de Patrick Meenan :

Ces priorités par défaut fonctionnent raisonnablement bien dans la plupart des cas, ce qui se traduit généralement par de bonnes performances. Cependant, les développeurs ayant une compréhension approfondie du projet peuvent vouloir améliorer les performances au-delà en effectuant quelques ajustements sous le capot. Il est de notoriété publique que de meilleures performances de site Web se traduisent par plus de conversions, plus de trafic et une meilleure expérience utilisateur.

Nous pouvons utiliser le preload attribut pour le HTML link pour optimiser les performances de chargement en garantissant que le navigateur découvre la ressource plus tôt, la télécharge et la met en cache. Cependant, cela ne nous fournit pas un contrôle plus granulaire sur un type de ressource particulier.

Par exemple, disons que nous chargeons deux feuilles de style bloquant le rendu. Comment signaler au navigateur que main.css le fichier est plus important que third-party-plugin.css fichier sans avoir recours à JavaScript ou à une autre solution de contournement ?

fetchpriority Attribut HTML

Entrer fetchpriority Attribut HTML. Ce nouvel attribut peut être attribué à pratiquement n’importe quel élément HTML qui charge des ressources telles que des images et des scripts et affecte sa priorité relative. Priorité relative signifie que nous ne pouvons affecter une priorité qu’au sein du même type de ressource. Cela signifie que nous ne pouvons pas dire aux navigateurs de charger les images avant de charger le JavaScript bloquant le rendu.

Il est important de garder à l’esprit que cet attribut ne garantit pas qu’une ressource de priorité supérieure sera chargée avant les autres ressources (de priorité inférieure) du même type. Alors, fetchpriority ne doit pas être utilisé pour contrôler l’ordre de chargement lui-même, comme dans le cas où nous voudrions qu’une dépendance JavaScript soit chargée avant un script qui l’utilise.

Aussi, cela l’attribut n’oblige pas le navigateur à récupérer une ressource ou l’empêcher de récupérer. C’est au navigateur de décider s’il va chercher la ressource ou non. Cet attribut aide simplement le navigateur à le hiérarchiser lorsqu’il est récupéré.

Cela étant dit, fetchpriority L’attribut accepte l’une des trois valeurs suivantes :

• low
  Diminuez la priorité relative de la ressource.
• high
  Augmentez la priorité relative de la ressource.
• auto
  Valeur par défaut qui laisse le navigateur décider de la priorité.

En revenant à notre exemple précédent, nous pouvons utiliser cet attribut pour signaler au navigateur que nous voulons initier une demande et le téléchargement de main.css à une priorité plus élevée que la third-party-plugin.css qui est la même ressource CSS bloquant le rendu que main.css.

<link rel="stylesheet" href="https://smashingmagazine.com/path/to/main.css" fetchpriority="high" />
<link rel="stylesheet" href="http://smashingmagazine.com/path/to/third-party-plugin.css" fetchpriority="low" />

Assez simple, non?

Noter: Au moment de la rédaction de cet article, le fetchpriority L’attribut est actuellement pris en charge dans Chrome Canary avec une version complète pour Chrome version 101, avec d’autres navigateurs à suivre.

Utilisez-le avec parcimonie

Il n’est pas recommandé d’attribuer fetchpriority à chaque ressource. Les navigateurs font déjà un assez bon travail, il doit donc être utilisé avec parcimonie pour des cas d’utilisation très spécifiques où nous voulons prioriser les demandes d’amélioration de LCP, prioriser une ressource différée par rapport à l’autre du même type, prioriser les demandes de préchargement, etc. cet attribut ou l’exécution d’une optimisation prématurée peut nuire aux performances, assurez-vous donc d’exécuter des tests de performances pour vérifier.

Dans cet esprit, passons à certains de ces exemples et scénarios réels, afin que nous puissions utiliser efficacement ce nouvel attribut.

Exemples et cas d’utilisation

Amélioration des performances de Largest Contentful Paint

C’est actuellement le meilleur cas d’utilisation pour fetchpriority. Les images sont traitées après que toutes les ressources bloquant le rendu et critiques ont déjà été rendues, et même en utilisant preload ou alors loading="eager" ne changera pas cela. Cependant, avec fetchpriority nous pouvons essayer de nous assurer que l’image LCP est plus susceptible d’être prête pour ce rendu initial, ce qui entraîne une amélioration considérable des performances.

Dans cet esprit, le bloc de texte est le candidat LCP le plus facultatif dans la plupart des cas, car il offre de meilleures performances que les images ou d’autres contenus multimédias. Pour les cas où les images sont essentielles ou constituent la partie principale du contenu, nous n’avons pas d’autre choix que de simplement les afficher. Nous devons donc les optimiser pour qu’ils se chargent le plus rapidement possible.

Examinons un exemple simple de carrousel d’images qui est également le contenu principal de la fenêtre d’affichage et un candidat de choix pour LCP.

Nous pouvons exécuter le test Lighthouse pour vérifier les métriques et utiliser ces données à des fins de comparaison.

Veuillez noter: Plusieurs facteurs peuvent affecter les statistiques, de sorte que les résultats peuvent différer, mais l’essentiel est le même.

utilisons fetchpriority et attribuer un high priorité à l’image principale (active) et low priorité aux vignettes.

<!-- Carousel is above the fold -->    
<nav>
      <ul class="hero__list">
        <li>
          <img fetchpriority="low" src="https://smashingmagazine.com/2022/04/boost-resource-loading-new-priority-hint-fetchpriority/..." />
        </li>
        <li>
          <img fetchpriority="low" src="https://smashingmagazine.com/2022/04/boost-resource-loading-new-priority-hint-fetchpriority/..." />
        </li>

     <!-- ... -->

    <figure class="hero__figure">
      <img fetchpriority="high" src="https://smashingmagazine.com/2022/04/boost-resource-loading-new-priority-hint-fetchpriority/..."></img>

    <!-- ... -->

Let’s run Lighthouse on the modified example, and we can notice that our LCP has improved.

By using fetchpriority, we marked which of the images were more important for content and which are not. So, the browser took these signals into account when fetching resources, prioritizing the main content image, which in turn allowed for the main content to show earlier, improving the LCP metric!

Deferred Images

Similarly, we can use fetchpriority attribute to prioritize below-the-fold resources that have loading="lazy" attribute. Even though this won’t affect LCP times, we can still signal the browser to prioritize the largest (active) carousel image over the small thumbnails when the browser decides to load them. That way, we can improve even the lazy loading user experience.

Remember, this attribute doesn’t force browsers to fetch a resource. Even with fetchpriority set to high, the browser will still decide if the resource is going to be fetched or not. We only signal to the browser which one of these requests is more important from each group.

<!-- Carousel is below the fold -->   

<nav>
      <ul class="hero__list">
        <li>
          <img loading="lazy"fetchpriority="low" src="https://smashingmagazine.com/2022/04/boost-resource-loading-new-priority-hint-fetchpriority/..." />
        </li>
        <li>
          <img loading="lazy" fetchpriority="low" src="https://smashingmagazine.com/2022/04/boost-resource-loading-new-priority-hint-fetchpriority/..." />
        </li>

     <!-- ... -->

    <figure class="hero__figure">
      <img loading="lazy" fetchpriority="high" src="https://smashingmagazine.com/2022/04/boost-resource-loading-new-priority-hint-fetchpriority/..."></img>

    <!-- ... -->

Deferred Stylesheets

We can also use fetchpriority to signal which scripts and stylesheets should have a higher priority when loading.

Please note: The scripts and stylesheets remain render-blocking if they are not deferred.

Let’s take a look at the following example. If you want to follow along with this example on CodePen, make sure to inspect the configuration of the HTML tab on the CodePen example below. The code referenced below is included there, as the CodePen HTML tab only covers HTML body, and head is added with this separate config.

Nous chargeons les ressources suivantes :

• Feuille de style Google Fonts
  Différez le chargement juste après le premier rendu. Ce changement de police est visible pour l’utilisateur (FOUT).
• Feuille de style inférieure à la ligne de flottaison non critique (Bootstrap est utilisé juste comme exemple pour un fichier CSS plus volumineux)
  Différez le chargement après le premier rendu avec une faible priorité, car ces styles sont utilisés en dessous de la ligne de flottaison.
• CSS critique
  Rendu bloquant et appliqué immédiatement.

Nous utiliserons une technique courante pour différer le chargement des feuilles de style non critiques et ajouter un preload avec approprié fetchpriority pour s’assurer que la police est chargée dès que possible, de sorte que le FOUT (Flash de texte sans style) se produit juste après le premier rendu.

<!-- Increase priority for fonts to load fonts right after the first render -->
<link rel="preload"
      as="style"
      fetchpriority="high" 
      onload="this.onload=null;this.rel="stylesheet""
      href="https://fonts.googleapis.com/css2?family=Crete+Round&family=Roboto:wght@400;700&display=swap" />

<!-- Preload non-critical, below-the-fold CSS with low priority -->
<link rel="preload"
      as="style"
      fetchpriority="low"
      onload="this.onload=null;this.rel="stylesheet""
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />

<!-- No JS fallback for stylesheets -->
<noscript>
  <!-- -->
</noscript>

<!-- Inline critical CSS (above-the-fold styles) -->
<style>
  /* Critical CSS */
</style>

Bien que cette configuration n’affecte pas LCP ou d’autres mesures de performances, elle montre comment nous pouvons utiliser fetchpriority pour améliorer l’expérience de chargement en donnant la priorité à une ressource par rapport à l’autre au sein du même type.

Affiner les priorités des ressources JavaScript

Bien que nous puissions utiliser async et defer pour changer quand les scripts sont chargés et analysés, avec fetchpriority nous pouvons avoir un contrôle plus granulaire sur les ressources JavaScript.

Ces deux exemples de web.dev montrent parfaitement comment nous pouvons combiner ces attributs pour encore plus d’options de chargement de script :

<script src="https://smashingmagazine.com/2022/04/boost-resource-loading-new-priority-hint-fetchpriority/async_but_important.js" async fetchpriority="high"></script>
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>

Prioriser JavaScript fetch Demandes

Cet attribut n’est pas limité au HTML, il peut également être utilisé en JavaScript fetch pour donner la priorité à certains appels d’API par rapport à d’autres.

Par exemple, disons que nous chargeons un article de blog. Nous voulons donner la priorité au contenu principal sur les commentaires, nous devons donc passer un priority attribut dans fetch objet d’options.

Veuillez noter: Le priority La valeur est high par défaut, nous n’avons donc qu’à attribuer low quand on veut réduire la priorité du fetch demande.

/* High-priority fetch for post content (default) */
function loadPost() {
  fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(parseResponse)
    .then(parsePostData)
    .catch(handleError);
}

/* Lower-priority fetch for comments (with priority option) */
function loadComments() {
  fetch("https://jsonplaceholder.typicode.com/posts/1/comments", {
    priority: "low"
  })
    .then(parseResponse)
    .then(parseCommentsData)
    .catch(handleError);
}

Embarqué iframe Éléments

Nous pouvons attribuer fetchpriority pour iframe éléments comme n’importe quelle autre ressource. Cependant, gardez à l’esprit que cet attribut n’affecte que la ressource principale de l’iframe et ne s’applique pas aux ressources du iframe. Le navigateur chargera les ressources dans l’iframe avec des priorités par défaut. Cependant, nous les retardons toujours pour commencer plus tard.

<iframe fetchpriority="low" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/..." frameborder="0"></iframe>

Conclusion

Dernièrement, nous avons vu de nouvelles fonctionnalités intéressantes qui nous permettent de contrôler le navigateur et le comportement de chargement — Couches en cascade CSS laissez-nous contrôler les couches de règles CSS, et maintenant, fetchpriority nous permettra un contrôle plus granulaire sur la priorité de chargement des ressources. Cependant, ce contrôle sur les concepts de base oblige les développeurs à être prudents et à les utiliser conformément aux meilleures pratiques, car une utilisation incorrecte peut nuire à la fois aux performances et à l’expérience utilisateur.

Dans cet esprit, fetchpriority ne doit être utilisé que dans des cas particuliers, tels que :

• Amélioration des performances LCP pour les images et autres ressources multimédias ;
• Changer les priorités de link et script Ressources;
• Réduire la priorité de JavaScript fetch les demandes qui ne sont pas critiques pour le contenu ou la fonctionnalité ;
• Diminution de la priorité des éléments iframe.

Au moment de la rédaction de cet article, cet attribut est disponible dans Chrome Canary et devrait être publié dans la version 101 de Chrome, avec d’autres navigateurs pour suivre cet exemple. Ce sera formidable de voir la communauté de développement proposer des cas d’utilisation et des améliorations de performances plus intéressants.

Références

(vf, yk, il)