Chrome 77 est sortie le 10 septembre dernier et introduit 2 nouvelles métriques en matière de web performance : le Largest Contentful Paint 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) mesure le temps qui s’écoule entre la navigation et le moment où le navigateur restitue graphiquement le premier bit de contenu du DOM. 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.
Je vous recommande la lecture sur le blog de Dareboost concernant le sujet du FCP et un peu plus même. - 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. 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 ne sont pas pris en compte. Cela concerne les élements img, svg, video, les blocs de texte, et les éléments avec une image de fond chargée via la fonction url().
Cette métrique n’est pour l’instant accessible que via JavaScript. Il faudra utiliser l’API 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 (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 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.
