Accélérez le chargement des ressources avec des conseils de priorité et fetchpriority

À quelle vitesse vos ressources les plus critiques se chargent-elles ?

Cette question précise a des propriétaires de sites Web (et des experts chevronnés du Web) sur les épingles et les aiguilles. Et il se trouve que c'est ce qui fait ou défait votre site Web dans les premières millisecondes.

Pour optimiser le chargement des ressources, deux options s'offrent à vous :

1. Comptez entièrement sur les mécanismes des navigateurs pour télécharger et récupérer les ressources dans un ordre optimal.
2. Essayez de les aider en implémentant des indices de ressources.

Malheureusement, aussi performants que soient les navigateurs modernes, chaque site/application diffère par sa configuration et son contexte. Et même s'ils sont assez doués pour attribuer des priorités aux ressources, dans certains cas, cela ne suffit pas.

Hélas, les indices de ressources ont une influence limitée sur la hiérarchisation des ressources.

Heureusement, il existe un nouvel indice que vous pouvez ajouter à votre boîte à outils de performance Web - Conseils prioritaires.

Et dans cet article, vous en apprendrez plus sur :

• Quels sont les conseils de priorité ;
• Quand les utiliser ;
• Comment les implémenter via fetchpriority ;
• Comment les tester sur votre site.

Commençons!

Que sont les conseils prioritaires ?

Les conseils de priorité sont un signal qui permet aux propriétaires de sites Web et aux développeurs d'indiquer la priorité des ressources (par exemple, images, polices, CSS, scripts et iframes) lorsque les navigateurs les chargent.

Le navigateur doit télécharger toutes sortes de ressources lors du processus de création d'une page Web. En tant que ressource prioritaire, il demande et télécharge en premier le document HTML.

Mais comment un navigateur détermine-t-il ce qu'il faut charger ensuite ?

Eh bien, les navigateurs ont un ensemble de priorités prédéterminées pour chaque type de ressource :

Ces priorités par défaut fonctionnent généralement assez bien, ce qui se traduit par de bonnes performances Web.

Cependant, comme Addy Osmani l'a mentionné dans son article sur les conseils de priorité, les navigateurs peuvent faire de très bonnes suppositions éclairées sur ce qu'il faut chercher ensuite.

Mais ils ne connaissent pas votre projet aussi bien que vous.

Un petit réglage peut donc être nécessaire :

"Les navigateurs comme Chrome disposent d'heuristiques pour tenter de récupérer des ressources avec la priorité appropriée en fonction de signaux tels que leur présence dans la fenêtre d'affichage. Cela dit, sans les conseils de priorité, Chrome ne peut augmenter la priorité des images dans la fenêtre d'affichage qu'une fois la mise en page est terminée. C'est très souvent trop tard, et à ce stade, cela peut entrer en concurrence avec tout le reste. Une autre raison d'envisager l'utilisation d'indices est qu'en tant qu'auteur de page, vous savez probablement ce qui est le plus important que vos utilisateurs doivent voir en premier et peut informer le navigateur afin qu'il puisse optimiser votre cas d'utilisation."

Auparavant, la seule chose que vous pouviez faire était d'utiliser le préchargement ou la préconnexion.

Et bien que le préchargement soit une directive obligatoire que les navigateurs doivent respecter, dans certains cas, la ressource préchargée peut toujours avoir une faible priorité.

Par exemple, une image LCP (Largest Contentful Paint) préchargée peut obtenir une faible priorité et être repoussée par d'autres ressources hautement prioritaires. Dans de tels cas, les conseils de priorité peuvent parfaitement compléter le préchargement et aider à la rapidité avec laquelle les ressources sont chargées.

Voici un webinaire sur Priority Hints, où Pat Meenan parle de Priority Hints dans Chrome et les appelle même "un code de triche" pour LCP :

Ceci est un excellent exemple de la puissance des conseils de priorité.

Voyons maintenant quand vous devez implémenter les conseils de priorité dans votre stratégie de performances Web.

Quand utiliser les conseils de priorité

Selon Google, il existe 5 scénarios principaux dans lesquels les conseils de priorité pourraient être utiles :

1. Vous avez plusieurs images au-dessus de la ligne de flottaison, mais toutes n'ont pas besoin d'avoir la même priorité. Par exemple, dans un carrousel d'images, seule la première image visible a besoin d'une priorité plus élevée par rapport aux autres.
   
2. Les images héros à l'intérieur de la fenêtre commencent avec une faible priorité. Une fois la mise en page terminée, Chrome découvre qu'ils sont dans la fenêtre d'affichage et augmente leur priorité (malheureusement, les outils de développement n'affichent que la priorité finale - WebPageTest affichera les deux). Cela ajoute généralement un délai important au chargement de l'image. Fournir l'indication de priorité dans le balisage permet à l'image de démarrer avec une priorité élevée et de commencer à se charger beaucoup plus tôt.

Remarque : Déclarer des scripts comme async ou defer indique au navigateur de les charger de manière asynchrone. Cependant, comme le montre la figure ci-dessus, ces scripts se voient également attribuer une priorité "faible". Vous souhaiterez peut-être augmenter leur priorité tout en garantissant un téléchargement asynchrone, en particulier pour les scripts critiques pour l'expérience utilisateur.

Vous pouvez utiliser l'API JavaScript fetch() pour récupérer des ressources ou des données de manière asynchrone. L'extraction se voit attribuer une priorité élevée par le navigateur. Il peut y avoir des situations dans lesquelles vous ne souhaitez pas que toutes vos récupérations soient exécutées avec une priorité élevée et préférez utiliser différentes indications de priorité à la place. Cela peut être utile lors de l'exécution d'appels d'API en arrière-plan et de leur mélange avec des appels d'API qui répondent aux entrées de l'utilisateur, comme avec la saisie semi-automatique. Les appels d'API d'arrière-plan peuvent être marqués comme de faible priorité et les appels d'API interactifs marqués comme de haute priorité.

Le navigateur attribue au CSS et aux polices une priorité élevée, mais toutes ces ressources peuvent ne pas être aussi importantes ou nécessaires pour LCP. Vous pouvez utiliser des conseils de priorité pour réduire la priorité de certaines de ces ressources.

Presque tous les sites Web relèvent des deux premiers scénarios. Pour déterminer si vous devez travailler sur l'un des autres éléments, approfondissez votre code (HTML/JS) ou demandez l'aide d'un développeur Web.

Comment implémenter des conseils de priorité : l'attribut fetchpriority

Vous pouvez implémenter des conseils de priorité à l'aide de l'attribut HTML fetchpriority.

Vous pouvez utiliser l'attribut avec :

• lien
• image
• scénario
• balises iframe

L'attribut fetchpriority accepte l'une des trois valeurs suivantes :

• élevé : indique que vous considérez la ressource comme critique et que vous souhaitez que le navigateur la priorise.
• faible : signalant que vous considérez la ressource comme moins importante et que vous souhaitez que le navigateur la dépriorise.
• auto : une valeur par défaut lorsque vous n'avez pas de préférence et laissez le navigateur décider de la priorité appropriée.

Vous pouvez également utiliser l'API JavaScript Fetch :

Peu de choses à garder à l'esprit lors de l'utilisation de l'attribut fetchpriority :

• fetchpriority ne garantit pas qu'une ressource de priorité supérieure sera chargée avant d'autres ressources (de priorité inférieure) du même type.
• fetchpriority ne doit pas être utilisé pour contrôler l'ordre de chargement lui-même.
• fetchpriority n'est pas une directive obligatoire et ne peut pas forcer le navigateur à récupérer une ressource ou l'empêcher de la récupérer. C'est au navigateur de décider s'il va chercher la ressource ou non.

Important : Semblables aux conseils de ressources, les conseils de priorité doivent être utilisés avec prudence, car une utilisation excessive peut entraîner des ralentissements plutôt que des améliorations de performances.

Comment tester votre site avec des conseils de priorité

Avant d'exécuter vos tests, vous devez savoir que les conseils de priorité ne sont disponibles que dans Chrome 101 (ou version ultérieure) et Edge 101 (ou version ultérieure) :

Passons maintenant à la question posée :

Le moyen le plus simple serait d'utiliser un outil, vous n'avez donc pas à modifier votre code manuellement.

Heureusement, la fonctionnalité Experiments de WebPageTest vous permet de tester des fonctionnalités de performance telles que les conseils de priorité sans modifier votre code.

Cependant, la fonctionnalité Experiment de WebPageTest fait partie de leur abonnement payant, vous devez donc prévoir des dépenses supplémentaires.

Au contraire, si vous avez des compétences techniques, vous pouvez affiner vous-même le code de votre site et tester l'impact de Priority Hints.

Assurez-vous d'effectuer des tests après chaque modification que vous apportez.

résumer

Nous avons couvert beaucoup de terrain, alors voici un bref récapitulatif des points les plus importants :

• Les conseils de priorité vous permettent d'indiquer la priorité des ressources de votre site.
• Les conseils de priorité peuvent vous aider à accélérer le chargement des images au-dessus de la ligne de flottaison, des images héros (élément LCP), des scripts asynchrones et différés, des CSS et des fichiers de polices.
• Les conseils de priorité peuvent être implémentés via l'attribut fetchpriority.
• Vous pouvez utiliser l'attribut fetchpriority avec les balises link, img, script et iframe.
• L'attribut fetchpriority accepte l'une des trois valeurs suivantes : high, low et auto.
• Attention : les conseils de priorité doivent être implémentés avec parcimonie car leur utilisation excessive peut entraîner une diminution des performances plutôt qu'une amélioration de la vitesse.
• fetchpriority n'est pas une directive obligatoire et ne peut pas forcer le navigateur à récupérer une ressource ou l'empêcher de la récupérer. C'est au navigateur de décider s'il va chercher la ressource ou non.
• Les conseils de priorité sont disponibles dans Chrome 101 ou version ultérieure.

Pour mesurer l'impact de Priority Hints sur votre site, effectuez des tests après chaque modification.

Outils de test populaires :

• Informations sur la vitesse de la page
• GTMetrix
• WebPageTest
• Phare
• Pingdom