Priority hint est le nom donné à une fonctionnalité expérimentale permettant aux développeurs de sites de prioriser le chargement de certaines ressources pour optimiser le temps de chargement des pages. La fonctionnalité est en phase de test jusqu'au 22 mars 2022 dans Origin Trial, une plateforme gérée par Google Chrome qui offre la possibilité aux développeurs de tester les nouveaux outils et de donner leur avis sur ces dernières. Pour l'utiliser, une simple balise meta suffit et ne s'active que sur les versions de Chrome 96 à 99. Comment en tirer profit ? Deux experts expriment leur point de vue sur la question.
Pour améliorer sa webperf, il existe deux leviers principaux : "Soit on diminue le nombre ou le poids des éléments qu'il y a sur la page, soit on modifie l'ordre dans lequel on charge ces éléments pour prioriser les plus importants", explique Eroan Boyer, spécialiste webperf chez Contentsquare. Avant l'arrivée des priority hints, d'autres attributs comme le preload ou defer permettaient d'orienter le navigateur sur les éléments à prioriser ou non. "Une page peut comporter plus d'une centaine de ressources à charger, et tous ces éléments ne se chargent pas instantanément. Les navigateurs ont défini depuis bien longtemps des priorités. C'est pour ça qu'il y a des notions de bloquants ou pas bloquants, synchrone ou asynchrone, defer dans les scripts", explique Stéphane Rios, CEO de Fasterize.
Le protocole http2 a rajouté une notion de priorité par-dessus ça : le serveur peut décider d'envoyer une ressource qu'il juge prioritaire par rapport à une autre. "Au final, tout cela devient contre-productif. Certains développeurs pensent que le preload est la solution magique et en placent partout. Mais le preload utilisé sans priorité va engendrer une priorité trop haute par rapport à d'autre éléments qui devraient arriver avant", poursuit le CEO de Fasterize. En effet, le preload peut être intéressant pour un code Javascript dont le site pourrait avoir besoin par la suite. Mais si ce code est trop lourd, il va arriver très tôt dans le chargement de la page et bloquer le reste des éléments dont le site aurait besoin en premier, ce qui ralentit l'affichage de la page. Les priority hints sont justement là pour remettre de l'ordre.
Les priority hints ne sont qu'une indication mais vont permettre d'aiguiller le navigateur en précisant que tel élément est prioritaire pour le webmaster par rapport à d'autres. Au total, il existe cinq niveaux de priorités : highest, high, medium, low et lowest. Contrairement aux attributs preload ou defer dont les développeurs disposaient avant l'arrivée des priority hints, ces derniers vont permettre de faire une sélection plus fine des éléments à prioriser et donc de charger la page selon ce qui nous semble être le plus important. "Cela simplifie le chargement des ressources et permet d'avoir un gain concret sur le LCP, notamment" précise Eroan Boyer. Le LCP (Largest Contentful Paint, une des 4 métriques des Core Web Vitals) est une des métriques qui mesure la rapidité d'affichage d'une page : "Concrètement, c'est le moment où le viewport (ce qui est affiché au-dessus de la ligne de flottaison sur un ordinateur) est affiché.
Comparaison du temps de chargement de la page avec et sans l'utilisation des priority hints (GIF Crédits : Google)
Une fonction miracle ?
Si les priority hints sont très efficaces pour optimiser les ressources dont dispose le navigateur pour afficher le rendu de la page, il faut néanmoins les utiliser avec parcimonie : "Il ne faut pas en mettre partout. Sinon, il va falloir gérer la priorité de 150 objets, ce qui n'a pas de sens", estime Stéphane Rios. Surtout que les navigateurs sont désormais suffisamment bons pour déterminer quels éléments sont importants. "Le navigateur a déjà une tonne d'algorithmes pour gérer les priorités de chargement. Les priority hints sont juste là pour indiquer que telle ressource est importante, et qu'une autre l'est moins", précise Stéphane Rios. Les priority hints sont surtout un moyen d'aider le navigateur à faire le bon choix de priorisation des éléments à charger sur des pages qui ont déjà des problèmes de lenteur.
Autre point important souligné par Eroan Boyer : "Les navigateurs sont doués pour déterminer ce qu'il faut prioriser, et il peut très bien décider d'ignorer un priority hint s'il estime que ce n'est pas utile". Car c'est toujours le navigateur qui aura le dernier mot sur ce sujet. "Il s'agit d'une indication, pas d'un ordre", résume le CEO de Fasterize. Et pour savoir sur quel type d'élément placer cette fonctionnalité test, Stéphane Rios préconise de s'adapter : "Il ne peut pas y avoir de conseil global. C'est en fonction du webmaster, de son site, de son utilisation. A lui de définir quels éléments sont essentiels".
Priority hint est le nom donné à une fonctionnalité expérimentale permettant aux développeurs de sites de prioriser le chargement de certaines ressources pour optimiser le temps de chargement des pages. La fonctionnalité est en phase de test…
Je gère mes abonnements push
Les informations recueillies sont destinées à CCM Benchmark Group pour vous assurer l’envoi de votre newsletter.
Elles seront également utilisées sous réserve des options souscrites, à des fins de ciblage publicitaire.
Vous bénéficiez d’un droit d’accès et de rectification de vos données personnelles, ainsi que celui d’en demander l’effacement dans les limites prévues par la loi.
Vous pouvez également à tout moment revoir vos options en matière de ciblage. En savoir plus sur notre politique de confidentialité.