Thumbs up

La première impression sur un site web peut être déterminante : en quelques instants seulement, l’utilisateur peut décider de poursuivre son parcours et revenir sur votre site s’il se sent bien accueilli, ou le quitter et disparaître à jamais si son expérience est mauvaise. Sachant que la vitesse de chargement est une exigence UX majeure sur internet, vous devez accélérer vos pages web pour donner la meilleure image possible de votre site en un clin d’œil. Focus sur deux métriques webperf qui vont vous aider à booster la sensation de vitesse pour vos visiteurs en termes d’affichage et d’interactivité : le First Contentful Paint et le First Input Delay.

Qu’est-ce que le First Contentful Paint

Le First Contentful Paint évalue le moment où le tout premier élément défini dans le DOM est rendu au sens technique par le navigateur (c’est-à-dire qu’il peut même ne pas encore être visible par l’utilisateur - nous allons y revenir un peu plus tard en expliquant comment le FCP est mesuré). Il peut s’agir de n’importe quel élément à n’importe quel endroit de la page (texte, image, fond, SVG ou <canvas>). Notez que le FCP exclut tout ce qui est contenu dans une iframe.

Web Performance - Chronologies des métriques de la vitesse de chargement

Un bon First Contentful Paint (FCP) est une première étape pour une bonne expérience utilisateur, et vous aide à limiter votre taux de rebond, et selon l’étape dans le tunnel de navigation, l’abandon de panier. 

En effet, afficher des éléments le plus vite possible sur une page permet de rassurer vos visiteurs. Une fois ces premiers éléments visibles dans le navigateur, vos lecteurs ou vos clients seront davantage tentés de rester plutôt que de quitter la page en pensant que le site ne fonctionne pas.

Attention toutefois, un très bon FCP ne garantit pas à lui seul une bonne expérience utilisateur. Si le navigateur affiche un premier élément (fond, menu…) mais que rien ne passe ensuite pendant plusieurs secondes, vous aurez certes fait un premier pas pour rassurer vos internautes, mais l’expérience sera ensuite décevante.

Comment mesurer le First Contentful Paint ?

Le FCP s’obtient via les API du navigateur. On le retrouve notamment dans les données Chrome User Experience Report (CrUX) de Google, dans le calcul du score Lighthouse, et il apparaît aussi dans les résultats mesurés par PageSpeed Insights.

Google PageSpeed Insights : First Contentful Paint

First Contentful Paint sur PageSpeed Insights.
Les mesures diffèrent selon le mode de collecte de données (données Lab ou données Field)

Quelle est la différence entre FCP et Start Render ?

Si vous vous intéressez à la mesure des temps de chargement, vous avez certainement entendu parler du Start Render, c’est le “cousin” du FCP. 

Alors que le FCP se concentre sur le premier élément rendu techniquement par le navigateur, le Start Render est une métrique visuelle qui se déduit du filmstrip que l’on voit dans WebPageTest, en observant le moment auquel les premiers éléments apparaissent.

Notez que l’intervalle le plus précis proposé entre chaque frame du filmstrip est de 100 ms. Ainsi, ce qui est visible dans le filmstrip ne représente pas exactement le moment où la page blanche rend le tout premier élément du DOM au sens technique, car en pratique, celui-ci peut-être rendu dans cet intervalle de 100 ms. Il peut par exemple s’agir de texte dont la font n’est pas encore chargé, d’éléments situés en dehors du viewport

En cela, le Start Render diffère donc du FCP, et il permet aussi de mieux se rapprocher de la perception d’un utilisateur. Chacune de ces métriques a son intérêt, tout dépend de ce que vous souhaitez mesurer !

Comment améliorer le First Contentful Paint

Voici quelques techniques essentielles pour optimiser votre FCP, qui consistent toutes à optimiser le chemin critique :

  • Le cache serveur : il permet de raccourcir le temps de réponse serveur, et donc d’améliorer votre FCP.
  • Inliner vos CSS : les CSS peuvent bloquer l’affichage des éléments présents dans le viewport. Pour éviter ce problème, inlinez uniquement ceux qui sont critiques pour l’affichage des éléments au-dessus de la ligne de flottaison afin qu’ils puissent être rendus au plus tôt, et chargez les autres en asynchrone.
  • Charger vos JavaScript en asynchrone : un JavaScript bloquant peut dégrader votre FCP.
  • Utiliser un CDN : en rapprochant le contenu de vos utilisateurs, vous améliorez la vitesse de chargement, surtout pour vos clients à l’étranger.
  • Limiter les résolutions DNS sur les premiers éléments du waterfall

Comment savoir si vous avez un bon FCP ?

En 2020, le site HTTP Archive, qui analyse l’état du web, indique que la médiane du First Contentful Paint est de 2,2 secondes sur desktop et de 5,1 secondes sur mobile.
Au premier semestre 2020, d’après l’analyse que nous faisons des sites les plus visités en France pour établir notre classement mensuel de la webperf mobile avec le JDN :

  • le FCP moyen est de 2582 pour les sites e-commerce, et de 1890 pour les sites médias ;
  • le Start Render moyen est de 2539 pour les sites e-commerce, et de 1814 pour les sites médias.

Maintenant que nous avons vu comment mesurer et optimiser le FCP, et comment vous situer, voyons un autre indicateur qui permet d’observer la première impression de vitesse en termes d’interaction : le First Input Delay.

Qu’est-ce que le First Input Delay

La vitesse d’affichage est indispensable pour une bonne expérience utilisateur, tout comme l’interactivité. Pour évaluer la réactivité à la suite d’une interaction sur une page web, vous aurez besoin de mesurer votre FID. Il faut que le score soit le plus bas possible pour donner une bonne impression de la vitesse de votre site.

Plus précisément, le FID mesure le temps qu’il faut aux pages web pour répondre, entre le moment où l’utilisateur interagit pour la première fois et le moment où le navigateur est en mesure de réagir suite à cette interaction.

Mais qu’est-ce qui peut dégrader un score FID ? Ce sont généralement les fichiers JavaScript ! En effet, pendant que le navigateur analyse et exécute un fichier JavaScript lourd, il ne peut généralement rien faire d’autre - et notamment, il ne peut pas réagir aux actions de l’utilisateur.
C’est encore plus flagrant sur les téléphones mobiles d’entrée de gamme, qui sont les premiers à pâtir de JavaScript mal optimisés. En tant qu’utilisateurs, vous pouvez donc voir une page web ou des éléments affichés, mais cliquer sans que rien ne se passe, ce qui est vraiment frustrant.

Comment savoir si vous avez un bon score FID ?

Google recommande d’avoir un score FID inférieur à 100 ms.

Core Web Vitals Google : First Input Delay (FID)

Ce score fait partie des Core Web Vitals, des métriques orientées UX, au même titre que le Cumulative Layout Shift (qui évalue la stabilité visuelle d’une page web) et que le Largest Contentful Paint (qui évalue le moment où l’image la plus importante apparaît dans le navigateur).

Comme les autres Core Web Vitals, le FID compte pour votre référencement. Le moteur de recherche l'intègre à son algorithme de ranking suite à la mise à jour Page Experience.
Le FID est donc important pour votre UX ainsi que pour votre SEO !

Sachez qu’en août 2020, moins de 15 % des sites répondaient à l’ensemble des critères définis par Google pour ces 3 métriques…
Alors, il y a du pain sur la planche ! Pour vous aider, nous proposons de nombreuses astuces techniques et bonnes pratiques pour améliorer vos performances dans notre newsletter mensuelle à laquelle vous pouvez vous abonner ici.

Comment mesurer le FID 

Le FID ne peut se mesurer qu’avec des outils de Real User Monitoring (RUM), étant donné qu’il faut qu’un utilisateur réel interagisse avec une page web.

Google propose les outils suivants pour mesurer le FID :

Et vous pouvez aussi le mesurer en JavaScript.

Si vous souhaitez évaluer l’interactivité de vos pages web avec des outils de Synthetic Monitoring (comme WebPageTest, par exemple), vous pouvez observer le “cousin” du FID : le Total Blocking Time, qui évalue la somme de toutes les périodes où le Main Thread est bloqué par des tâches dont l’exécution est supérieure à 50 ms. En améliorant l’un, vous devriez améliorer l’autre. Attention toutefois, ces deux métriques n'étant pas calculées de la même façon, vous pouvez obtenir des résultats éloignés, comme on le voit sur le test ci-dessous :

Google PageSpeed Insights : Total Blocking Time et First Input Delay

FID et TBT mesurés par un test PageSpeed

Comment améliorer le First Input Delay

Si vous avez lancé un test avec PageSpeed Insights pour mesurer votre FID, attention à ne pas vous lancer aveuglément dans l’application des recommandations de Google pour optimiser la vitesse de vos pages. Ces recommandations sont intéressantes et donnent des informations qui permettent de définir des pistes d’amélioration, mais certaines nécessitent une expertise webperf pour être appliquées efficacement.

Dans tous les cas, veillez à réduire :

  • l’impact des Third Parties
  • le temps d’exécution du JavaScript
  • le travail du Main Thread
  • le nombre et la taille des ressources JS... 

Ce sont des bonnes pratiques incontournables pour optimiser l’interactivité.
Vous trouverez aussi des conseils détaillés dans notre article dédié à l’optimisation du FID.

Pour aller plus loin, découvrir d’autres métriques et d’autres techniques
pour mesurer et optimiser la vitesse de chargement de votre site web :

Téléchargez le livre blanc


Hello SMX Paris !