Nouveau : que sont le Largest Contentful Paint et le Performance Event Timing ?
Chrome 77 est sortie le 10 septembre dernier et introduit 2 nouvelles métriques en matière de web performance : le Largest Contentful Paint 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. et PerformanceEventTiming.
Largest Contentful Paint
Qu’utilise-t-on aujourd’hui avant l’apparition du Largest Contentful Paint ? Ils existent pas moins de 3 indicateurs s’en rapprochant…
- Le First Contentful Paint ( FCP Le First Contentful Paint (FCP) mesure le temps nécessaire pour que le premier élément visible, comme du texte ou une image, apparaisse à l'écran, reflétant ainsi la vitesse de chargement perçue par l'utilisateur. ) mesure le temps qui s’écoule entre la navigation et le moment où le navigateur restitue graphiquement le premier bit de contenu du DOM Le DOM (Document Object Model) est une représentation en structure d'arbre d'un document HTML ou XML, permettant aux développeurs d'accéder et de manipuler dynamiquement les éléments d'une page web via des langages de programmation comme JavaScript. . Il s’agit d’une étape importante pour les utilisateurs, car elle permet de savoir si la page est effectivement en train de se charger.
- Le First Meaningful Paint (FMP) est la métrique qui répond à la question : « Est-ce utilisable ? ». Ainsi il mesure le temps qu’il faut pour que le contenu principal d’une page apparaisse à l’écran.
- Le SpeedIndex (SI) mesure le temps moyen auquel les parties visibles de la page sont affichées. Elle est exprimée en millisecondes et dépend de la taille du 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. . Ajouté à WebPagetest en 2012, cet indice mesure la vitesse à laquelle le contenu de la page est rempli visuellement. Il est particulièrement utilisé pour comparer les expériences des pages les unes par rapport aux autres (comme sur le classement de la webperf du JDN).
La nouvelle mesure LCP
Le Largest Contentful Paint (LCP) mesure la vitesse de livraison du plus grand élément de contenu utile à l’écran. Les développeurs de Chrome sont parti du postulat que nous n’avons pas aujourd’hui de métrique fiable concernant l’expérience de rendu visuel de leurs utilisateurs. En effet, les métriques existantes telles que First Paint et First Contentful Paint se concentrent sur le rendu initial, mais ne tiennent pas compte de l’importance du contenu rendu dans le navigateur. Dès lors, ces « anciennes » métriques pourraient donc indiquer des moments où l’utilisateur ne considère toujours pas la page comme utilisable…
Donc, l’objectif du Largest Contentful Paint est d’établir une meilleure corrélation avec l’expérience de l’utilisateur que les mesures précédentes, pour permettre de mieux comprendre les attentes (au sens premier du terme) des utilisateurs.
La taille de l’élément reporté sera établie selon sa surface occupée réellement dans le viewport. Néanmoins, si l’élément s’étend à l’extérieur du viewport, ou si l’un des éléments est coupé ou a un débordement non visible, ces portions ne comptent pas dans la taille de l’élément. De plus, les marges intérieures et extérieures ou bordures appliquées via CSS Le CSS (Cascading Style Sheets) est un langage utilisé pour décrire l'apparence et la mise en page des documents HTML, en définissant des styles comme les couleurs, polices, marges, et positionnements des éléments sur une page web. ne sont pas pris en compte. Cela concerne les élements img, svg Le SVG (Scalable Vector Graphics) est un format d'image vectorielle basé sur XML qui permet de créer des graphiques et des animations redimensionnables sans perte de qualité, couramment utilisé pour les logos, icônes et graphiques interactifs sur le web. , video, les blocs de texte, et les éléments avec une image de fond chargée via la fonction url Une URL (Uniform Resource Locator) est l'adresse unique d'une ressource sur Internet, comme une page web, une image ou un fichier, permettant de la localiser et d'y accéder via un navigateur. ().
Cette métrique n’est pour l’instant accessible que via JavaScript JavaScript est un langage de programmation dynamique principalement utilisé pour ajouter des fonctionnalités interactives aux pages web. Il permet de manipuler le DOM, de gérer des événements, et d'effectuer des requêtes asynchrones. . Il faudra utiliser l’ API Une API (Application Programming Interface) est un ensemble de règles permettant à différents logiciels de communiquer entre eux. Elle simplifie l'intégration et l'échange de données entre systèmes. PerformanceObserver pour récupérer cette valeur. Reste un point intriguant…
Et si l’élément le plus grand n’est pas le plus important ?
Dans certains cas, l’élément (ou les éléments) le plus important de la page n’est pas le même que l’élément le plus important. Or c’est bien la mesure du temps de rendu de cet autre élément qui pourrait nous intéresser. Toutefois il est possible grâce à l’API de préciser quel élément doit être mesuré.
Pas sûr que ça aide à démocratiser cet indicateur que LightHouse Lighthouse est un outil open-source de Google qui permet d'auditer la performance, l'accessibilité, le SEO et les bonnes pratiques des sites web. Il fournit des rapports détaillés et des recommandations pour améliorer les performances. (et par extension tous les outils qui s’y rapportent comme PageSpeed Insights ou Web.dev) n’utilise pas pour le moment.
PerformanceEventTiming
Le PerformanceEventTiming offre une mesure relative à la première interaction « discrète » de l’utilisateur. Ce qui signifie qu’elle se rapporte à la latence La latence est le délai entre l'envoi d'une requête et la réception d'une réponse. Elle est souvent utilisée pour mesurer le temps que met un réseau ou un système à réagir. avant une interaction tel que :
- la touche vers le bas,
- la souris vers le bas,
- le clic,
- le pointeur vers le bas et/ou vers le haut.
Cet indicateur reste un sous-ensemble de l’API EventTiming. L’idée du PerformanceEventTiming est de pouvoir mesurer de manière plus fine la réactivité de la page. Enfin là encore, cet indicateur n’est disponible que via JavaScript.
Pour le moment il vous faudra donc intégrer le Largest Contentful Paint et le PerformanceEventTiming dans votre code JavaScript (qui rappelons-le, n’a pas de validateur immédiat). Ce qui pourrait à terme alourdir le temps d’exécution de ce dernier. Bref au bout d’un certain point : quand considère-t-on que la prise de mesure fausse le test ? Qui va tester le thermomètre ? Quelle est l’expérience ressentie par les utilisateurs ? Ces 2 nouvelles métriques ne résolvent pas à elles seules toutes ces questions… en tout cas pas seules. Car il faudra bien définir l’échelle de leur pertinence au regard et en complément des éléments dont nous disposons déjà.
Photo par Marc-Olivier Jodoin via Unsplash.
