First Contentful Paint (FCP) : 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 que l’utilisateur ou l’utilisatrice perçoivent que le chargement a commencé, il faut qu’il ou elle voient des changements, du contenu qui apparaît. 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.

Le First Paint : quelle signification ?

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 utilisateurs.

Comment, dans ce contexte, ne mesurer que ce qui fait sens pour un utilisateur ?

C’est la question à laquelle tente de répondre le First Contentful Paint (FCP). D’après la spécification Paint Timing, un élément cible est “contentful” (c’est-à-dire, ayant du contenu) lorsqu’une ou plusieurs des conditions suivantes s’appliquent :

• l’élément possède un nœud de texte enfant, représentant un texte non vide, et l’opacité utilisée du nœud est supérieure à zéro ;

• l’élément est un élément remplacé (les images, iframes, embed… bref tous les éléments affichant une prévisualisation occupant l’espace avant d’être téléchargés puis définitivement affichés) représentant une image disponible ;

• l’élément a une image d’arrière-plan qui est une image de contenu, et sa taille d’arrière-plan utilisée a des valeurs de largeur et de hauteur non nulles ;

• l’élément est un “canvas” dont le mode contextuel est défini sur une valeur autre que “none” ;

• L’élément est une vidéo qui affiche son poster ou la première image de la vidéo ;

• L’élément est une image SVG donc certains nœuds enfants sont visibles ;

• L’élément est une champ de saisie avec une valeur non-nulle (les valeurs de placeholder sont prises en compte).

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, canvas…).

Vous pouvez retrouver le First Contentful Paint dans Speed Analysis mais aussi 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, Edge, Opéra et Firefox.

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

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

Le First Contentful Paint : quelles limites ?

Malheureusement, le FCP comporte aussi plusieurs limites.

Tout d’abord, il ne prend pas en compte les contenu des 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 un paragraphe de texte utilisant une WebFont, 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 web 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.

https://fonts.googleapis.com/css?family=Caveat&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éclenche 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 utilisateur.

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).

Que retenir du First Contentful Paint ?

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. Le contenu des iframes est exclus, 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.