Les priority hints, futur game changer pour les core web vitals ?

Referencement

SEO / Referencement 223 Views comments

Precedence hint est le nom donné à une fonctionnalité expérimentale permettant aux développeurs de websites de prioriser le chargement de certaines ressources pour optimiser le temps de chargement des pages. La fonctionnalité est en part de check 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 easy balise meta suffit et ne s'lively que sur les versions de Chrome& 96& à& 99. Remark en tirer profit& ? Deux specialists expriment leur level de vue sur la question.

Pourquoi l'utiliser& ?

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 cost 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 web 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 ultimate, tout cela devient contre-productif. Certains développeurs pensent que le preload est la answer 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 website 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 web page et bloquer le reste des éléments dont le website aurait besoin en premier, ce qui ralentit l'affichage de la page. Les precedence hints sont justement là pour remettre de l'ordre.

Les precedence 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 complete, 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 precedence hints, ces derniers vont permettre de faire une sélection plus high-quality des éléments à prioriser et donc de charger la web page selon ce qui nous semble être le plus necessary. "Cela simplifie le chargement des ressources et permet d'avoir un achieve concret sur le LCP, notamment" précise Eroan Boyer. Le LCP (Largest Contentful Paint, une des 4& métriques des Core Net 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é.

Démonstration des priority hints
©& Google

Comparaison du temps de chargement de la web 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 precedence 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 necessary 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 precedence hint s'il estime que ce n'est pas utile". Automotive 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 sort d'élément placer cette fonctionnalité check, Stéphane Rios préconise de s'adapter& : "Il ne peut pas y avoir de conseil international. C'est en fonction du webmaster, de son website, de son utilisation. A lui de définir quels éléments sont essentiels".

Comments