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 Le Largest Contentful Paint (LCP) mesure le temps qu'il faut pour afficher le plus grand élément visible d'une page web, comme une image ou un bloc de texte, indiquant la rapidité du chargement perçu. 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 Le viewport est la zone visible d'une page web dans un navigateur. Il définit la partie du site qui est affichée à l'écran et s'adapte en fonction de la taille de l'appareil, comme un ordinateur, une tablette ou un smartphone. tout en baissant la priorité des autres images.
- Abaisser la priorité des ressources préchargées pour faire passer un preload Le preload est une technique d'optimisation web qui permet de charger des ressources critiques (comme des polices, scripts ou images) en priorité avant leur utilisation, afin d'améliorer les performances et réduire le temps de chargement. 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 Les Core Web Vitals sont des métriques de Google qui mesurent la vitesse de chargement, l'interactivité et la stabilité visuelle des sites web. Elles sont essentielles pour offrir une bonne expérience utilisateur et améliorer le SEO. , 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 !
