First Contentful Paint (FCP), Start Render, First Paint. Comment bien mesurer la performance du début d’affichage ?

Comment mesurer correctement la vitesse à laquelle une page Web commence à afficher son contenu ? Plusieurs indicateurs de performance Web existent pour répondre à cette question, dont le First Paint, le Start Render et, plus récemment, le First Contentful Paint (FCP). Comment le FCP se démarque-t-il, quelles sont ses limites ? Découvrons ensemble les mesures du début d’affichage des pages Web par le navigateur.

Après un clic ou une action de navigation, pour qu’un utilisateur perçoive que le chargement a commencé, il faut qu’il voit des changements, du contenu apparaître. Comment pouvons-nous savoir à quel moment démarre l’affichage du contenu ? Une des manières les plus simples est de demander l’information au navigateur lui-même, après la navigation. C’est ce qu’on appelle le First Paint, un des plus anciens indicateurs de Performance Web.

Mais le First Paint peut nous induire en erreur, car la notion de « paint » (en français, de rendu) est considérée sous l’angle du navigateur, pas sous celui de l’utilisateur. Or un navigateur peut tout à fait procéder à un rendu invisible aux utilisateurs. Par exemple, si l’élément « rendu » a la même couleur que le fond par défaut de la page, le First Paint le prendra en compte malgré tout. Utiliser le First Paint pour surveiller la performance de vos pages ne vous garantit donc pas de mesurer ce qui est affiché et visible par vos visiteurs.

Comment, dans ce contexte, ne mesurer que ce qui fait sens pour un visiteur ? C’est la question à laquelle tente de répondre le First Contentful Paint (FCP). D’après la spécification Paint Timing :

Le FCP est le moment où le navigateur procède au rendu du premier élément de contenu du DOM, qui peut être un texte, une image, un SVG ou un élément de type canvas.

Paint Timing 1
Avant-projet Éditeur, 13 juin 2019

Comme le First Paint, le navigateur retourne l’information en procédant au rendu des éléments mais, en plus, il vérifie le type d’élément (texte, image, SVG ou canvas).

Vous pouvez retrouver le First Contentful Paint sur Dareboost, dans WebPageTest ou dans des services de Google comme Lighthouse ou Chrome UX Report dont les données sont utilisées dans PageSpeed Insights. Pour l’instant, le FCP n’est disponible que sur Chrome et Opéra, mais Firefox envisage également sont support.

Voici comment récupérer le First Contentful Paint dans les Chrome DevTools :

let fcp = performance.getEntriesByName("first-contentful-paint")[0].startTime;

Malheureusement, le FCP comporte aussi plusieurs limites.

Tout d’abord, il ne prend pas en compte les iframes, ce qui peut être un problème si votre contenu principal dépend du chargement d’une iframe (mais c’est assurément un cas extrême à éviter).

Deuxièmement, le FCP peut être faussé par une portion de texte en attente du chargement d’une WebFont. Dans cet exemple, nous nous attendons à ce que le FCP vaille environ 900 ms, car nous ne voyons aucun contenu avant cela :

Le filmstrip de notre exemple

Pourtant, la valeur réelle du FCP est d’environ 600 ms, car c’est le moment auquel le contenu textuel est rendu pour la première fois par le navigateur. Cependant, comme la police n’est pas encore chargée, le texte reste vierge (donc invisible) pendant un moment. Ce phénomène est appelé Flash Of Invisible Text (FOIT).

Pour éviter que cela ne se produise sur votre site, assurez-vous que vous utilisez la directive CSS @font-face avec une valeur différente de la valeur par défaut pour le descripteur font-display. Si vous utilisez Google Fonts, veuillez noter que le service encourage désormais à utiliser la valeur font-display:swap. Assurez-vous que votre appel de Google Fonts spécifie bien une valeur pour « display » dans la requête d’URL.

<link href="https://fonts.googleapis.com/css?family=Caveat&amp;display=swap" rel="stylesheet">

L’une des principales limitations auxquelles vous pouvez être confronté avec le First Contentful Paint est que l’indicateur ne se limite pas à la fenêtre d’affichage (viewport). Quel que soit l’endroit où se produit l’affichage d’un premier contenu, cela déclenchera le FCP, même si le contenu en question n’est pas au-dessus de la ligne de flottaison, et qu’il est donc invisible pour un visiteur.

Pour savoir à quel moment quelque chose est affiché et vraiment visible pour l’utilisateur, nous devons donc utiliser un autre indicateur de performance : le Start Render. L’algorithme du Start Render est basé sur l’analyse vidéo du chargement de la page, à la recherche du premier pixel modifié dans la fenêtre d’affichage.

Même si le Start Render se déclenche quel que soit le type de contenu (comme le First Paint), c’est un excellent moyen de surveiller le moment où un utilisateur peut s’apercevoir que la page se charge, tout en évitant le bruit des affichages « techniques » déclenchés par le navigateur.

Le Start Render est uniquement disponible dans les outils de surveillance synthétique, car une analyse vidéo est nécessaire, alors que le FCP et le First Paint peuvent être récupérés directement auprès du navigateur, ce qui les rend utilisables également dans les outils de Real USer Monitoring (RUM).

En résumé :

First Paint
La première action de rendu du navigateur, d’après une définition « technique » du navigateur. Pas nécessairement visible d’un humain.
First Contentful Paint
La première action de rendu du navigateur d’après une définition « technique » du navigateur, concernant un texte, une image, un SVG ou un canvas. Les iframes sont exclues, et le texte peut être présent mais pas encore visible (à cause d’une police web en cours de chargement, ou à l’extérieur du viewport).
Start Render
Quelque chose est visible par l’utilisateur dans la fenêtre. Quoi que ce soit, même si ce n’est qu’un arrière-plan.

Avec Dareboost, vous pouvez mesurer et surveiller ces indicateurs très facilement. Nous vous conseillons de vous concentrer uniquement sur l’un d’entre eux, et vous suggérons le Start Render car c’est celui qui présente le moins d’effets de bord.

Si vous n’êtes pas déjà un de nos clients, n’attendez plus pour demander un essai sur notre service de surveillance synthétique.

A propos Boris Schapira

Customer Success Manager chez Dareboost, je suis aussi un développeur web, un consultant en stratégie digitale, un formateur… expliquez-moi vos problèmes de performance web ou de gouvernance et je vous aiderai à les régler. Twitter: @boostmarks |

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.