Priority Hints : un essai à transformer
Historiquement, les développeurs ont eu une certaine influence sur l’ordre de chargement des ressources, mais finalement assez limité. Les Priority Hints viennent s’ajouter au preloadet preconnect pour « conseiller » au navigateur de favoriser le chargement d’une ressource plutôt qu’une autre. Avant de coder cette technique recommandée (encore) par les équipes de Google, arrêtons-nous pour comprendre et définir l’usage que nous pourrions en avoir.
Techniquement ça se présente comment ?
Il s’agit tout simplement d’un attribut importance que l’on peut appliquer aux éléments link, img, scriptet iframe. Cet attribut peut prendre 3 valeurs :
high: vous considérez la ressource à priorité élevée et souhaitez que le navigateur la priorise tant que les règles du navigateur n’empêchent pas que cela se produise.low: Vous considérez la ressource à faible priorité et souhaitez que le navigateur lui enlève la priorité si son processus le permet.auto: C’est la valeur par défaut où vous n’avez pas de préférence et laissez le navigateur décider de la priorité appropriée.
Ce qu’il faut bien comprendre : l’attribut importance est un « conseil » et non une directive. Le navigateur essaiera de respecter la préférence du développeur définie avec cet attribut. Mais il est également possible que le navigateur applique ses préférences de priorités des ressources en cas de conflits avec son processus. Et n’oubliez pas que les Priority Hints ne doivent pas être confondus avec un preload qui lui est une récupération obligatoire.
Quand utilisez les priority hints ?
Les exemples d’usages remontés par web.dev sont intéressants :
- Augmenter la priorité de l’image LCP même si celle-ci est appelée par un preload.
- Augmenter la priorité de la première image d’un carrousel présent dans le viewport tout en baissant la priorité des autres images.
- Abaisser la priorité des ressources préchargées pour faire passer un preload avant les autres.
- Redéfinir les priorités des scripts.
Support des priority hints
Tout cela pourrait être intéressant mais n’est pour l’instant qu’au stade expérimental. Seul Chrome a implémenté cette fonctionnalité à partir de la version 96 et qu’il faut activer dans les flags. Son petit nom : Experimental Web Platform features.
De plus, comme il s’agit d’un essai, cette fonctionnalité si elle s’avère peu concluante pourrait être abandonné à partir de la version 99.
Notre opinion sur le sujet
J’imagine bien que certains développeurs soient intéressés par les priority hints pour tenter d’améliorer les indicateurs Core Web Vitals, notamment le LCP. Personnellement, en terme de conception de site web, je pense que nous avons déjà un certains nombre de leviers à exploiter avant d’aller greffer une nouvelle fonctionnalité qui n’est qu’un conseil et non pas une directive. Cela signifie :
- reprendre la maîtrise de l’ordre de chargement de ses ressources (comme avec un ordonnanceur),
- utiliser le preload quand cela est à-propos,
- et lazy-loader ce qui doit l’être.
Donc à part pour le cas du carrousel dans le viewport, où les priority hints apportent une vrai simplification, pour le moment j’attend de voir ce que l’essai va donner dans les prochains mois. Bref, comme le dirait Baba Voss : wait and see !
