Google a publié un article encourageant les développeurs et les éditeurs à utiliser le nouvel attribut (et expérimental) d’indice de priorité « importance » qui peut aider à améliorer Core Web Vitals et l’expérience utilisateur.

L’équipe du navigateur Chrome a partagé un exemple où une image d’arrière-plan chargée avec l’attribut HTML Priority Hint a économisé 1,9 seconde en temps de téléchargement, juste dans cette image.

Le problème que les conseils de priorité résolvent

Les éditeurs peuvent accélérer la découverte des ressources de pages Web à l’aide de et peut également indiquer comment et quand les scripts sont téléchargés et exécutés à l’aide du « asynchrone » et « reporter » les attributs.

Mais les éditeurs ne peuvent pas envoyer de signal pour dire au navigateur quelles ressources sont importantes et lesquelles ne le sont pas.

Google fournit ces exemples de problèmes résolus par Priority Hints :

« Les images de 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.

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 indices de priorité pour réduire la priorité de certaines de ces ressources. »

L’indice de ressource d’attribut d’importance

En HTML, les parties qui composent une page Web sont appelées éléments. Ce serait la div, les titres, les balises de paragraphe, les balises d’image, l’élément de lien, etc.

Je suis presque sûr que tout ce qu’on appelle une balise HTML est en fait un élément HTML, c’est un moyen facile de se souvenir de ce qu’est un élément.
Chaque élément peut être modifié avec ce qu’on appelle un attribut. Vous vous souvenez de l’attribut nofollow ? L’attribut nofollow modifie l’élément .

L’attribut importance modifie les éléments de la page Web en indiquant au navigateur Web si un élément de la page Web est important, non important ou simplement laisser le navigateur décider.

L’attribut d’importance est appelé un indice de priorité. L’attribut indique au navigateur qu’un élément spécifié est important (ou pas important) et lui donne une priorité plus élevée (ou plus faible).

Les valeurs que le «importance” l’attribut peut communiquer sont :

  • Haute
  • Bas
  • Auto

L’indicateur de ressource d’attribut d’importance s’applique aux éléments suivants :

  • lien
  • image
  • scénario
  • iframe

Comment les conseils de ressources améliorent les éléments vitaux Web de base

Les navigateurs calculent automatiquement les niveaux de priorité pour le téléchargement des ressources.

Les outils actuels comme l’attribut « preload » aident à donner des conseils de ressources pour le téléchargement de ressources importantes comme, par exemple, les polices et les images.

Les autres indicateurs de ressources sont asynchrones et différés.

Tous ces éléments permettent d’accélérer le téléchargement de l’ensemble du document et de rendre le document visible et interactif plus rapidement.

Mais le navigateur doit encore décider lequel est le plus important.

Selon Web.dev, une image préchargée sera téléchargée mais sera toujours affectée d’une faible priorité par le navigateur et retardée.

Voici l’explication :

« Prenez une image de peinture la plus grande avec contenu, qui, une fois préchargée, aura toujours une faible priorité.

Si elle est repoussée par d’autres ressources précoces à faible priorité, l’utilisation d’indices de priorité peut toujours aider à déterminer la rapidité de chargement de l’image. »

Un exemple de la façon dont l’attribut d’importance est utile est lorsqu’une page Web a un carrousel d’images en haut de la fenêtre d’affichage (la partie du navigateur que le visiteur du site voit actuellement).

Si le carrousel contient cinq images, elles peuvent toutes être préchargées. Mais si le premier se voit attribuer le « haute” attribut d’importance et les autres étant donné le “bas”, la page web s’affichera plus rapidement car le navigateur saura désormais donner une priorité élevée à la première image.

Un autre exemple donné par Google est l’image en vedette en haut de la page Web. Le navigateur donne à l’image une faible priorité et ne la rend qu’une fois que le reste de la mise en page de la page Web est terminé.

Google explique :

« Fournir l’indice 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.

Notez que le préchargement est toujours requis pour la découverte précoce des images LCP incluses en tant qu’arrière-plans CSS et peut être combiné avec des conseils de priorité en incluant l’importance=’élevé’ sur le préchargement, sinon il commencera toujours avec la priorité par défaut « Faible » pour les images .”

La même chose se produit avec les scripts téléchargés en mode asynchrone ou différé, ils se voient tous deux attribuer une faible priorité.

En ajoutant un indice de priorité aux scripts importants, le navigateur pourra afficher la page plus rapidement et offrir une meilleure expérience utilisateur.

Un chargement plus rapide sera ressenti par les visiteurs du site

Les conseils prioritaires subissent ce que Google appelle un essai d’origine. Chrome a effectué un essai il y a deux ans, mais il n’a pas attiré beaucoup d’attention.

Chrome le déploie dans Chrome 96, dont la sortie est prévue le 21 novembre 2021. Les conseils de priorité sont déjà disponibles sur Chrome Canary, qui est la version de test de Chrome.

Ces fonctionnalités peuvent être activées dans les versions actuelles de Chrome en saisissant ce qui suit dans la barre d’adresse :

chrome://flags/

puis faites défiler vers le bas et activez la section intitulée : Fonctionnalités expérimentales de la plate-forme Web

Capture d’écran : Fonctionnalités expérimentales de la plate-forme Web

Capture d'écran des fonctionnalités de la plate-forme Web expérimentale Chrome

Comment vérifier le niveau de priorité des ressources

Les niveaux de priorité des ressources sont disponibles pour examen dans n’importe quelle version de Chrome, dans les outils de développement sous l’onglet Réseau.

Cliquez sur les trois points (menu points de suspension) dans le coin supérieur droit, > Plus d’outils > Outils de développement (puis sélectionnez l’onglet Réseau).

À partir de là, vous chargez une page Web, faites un clic droit sur l’une des colonnes (comme Temps ou Cascade) et sélectionnez Priorité et vous pouvez afficher les niveaux de priorité.

Une fois inscrit à l’essai Priority Hints, vous pouvez utiliser Chrome Canary pour afficher la priorité mise à jour des ressources et également dans Chrome version 96 lors de son déploiement.

Lorsque vous participez à cet essai, les conseils de priorité seront affichés aux navigateurs des visiteurs de votre site et toutes les améliorations apportées à Core Web Vitals seront reflétées à partir de cela.

Cependant, il est important de noter qu’il s’agit d’indices prioritaires et non d’une directive.

Cela signifie que le navigateur n’a pas à suivre strictement les indications de priorité. Le navigateur peut choisir d’ignorer les conseils et d’assigner et d’ordinateur sa propre commande.

Cela peut être vérifié dans Chrome Dev Tools sous l’onglet Réseau comme décrit ci-dessus.

Comment s’inscrire à l’essai Priority Hints

Les éditeurs doivent s’inscrire auprès de Chrome pour participer aux essais d’origine pour les conseils prioritaires.

Le formulaire d’inscription Priority Hints est ici:

https://developer.chrome.com/origintrials/#/view_trial/365917469723852801

Essai d’origine des conseils prioritaires

Il s’agit de la deuxième version de cet essai d’origine. La première fois qu’il a été testé, il n’y a pas eu beaucoup de réponse. Mais cette fois, cela pourrait être différent en raison des éléments vitaux de Core Web.

L’essai est ouvert aux inscriptions maintenant et il se déroule jusqu’au 22 mars 2022. Le but de l’essai est de mesurer l’intérêt des développeurs et de voir s’il en résulte des améliorations significatives.

La poursuite de la fonctionnalité après cette date dépend de vos commentaires. C’est une excellente occasion d’améliorer l’expérience utilisateur et d’être l’un des premiers à utiliser cette nouvelle fonctionnalité.

Citations

Lire l’annonce du nouvel essai d’origine de Priority Hints

Optimisation du chargement des ressources avec les conseils de priorité

Inscrivez-vous pour participer à l’essai Origin

Page d’inscription aux conseils de priorité

Suivez la progression des indices de priorité Chrome

Page d’état des indicateurs de priorité Chrome

Lire l’explicateur des conseils de priorité dans GitHub

Conseils prioritaires

Téléchargez Chrome Canary pour les développeurs avec les dernières fonctionnalités

Canari chromé

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici