C’est quoi le First Contentful Paint (FCP) ?
La métrique First Contentful Paint (FCP) mesure le temps entre le début du chargement de la page jusqu’à ce qu’une première partie du contenu de la page soit visible à l’écran. Pour cette métrique, le « contenu » peut faire référence à un simple texte, aux images (y compris les images d’arrière-plan) ou encore aux svg. À ne pas confondre avec LCP, pour Largest Contentful Paint, qui lui mesure le contenu le plus long à charger depuis le chargement de la page.
Comment le score FCP est-il calculé ?
La bonne valeur de FCP à atteindre sur desktop est de 940ms ou moins, une note moyenne (à améliorer) est comprise entre 940ms et 1,6s et une mauvaise note est supérieure à 1,6s.
Pour ce qui est du mobile, une note inférieure à 1,8s est considérée comme bonne, si la note est supérieure à 3s elle sera considérée comme mauvaise et entre les deux à améliorer.
Le FCP, métrique du rendu du navigateur, influe sur le score des Core Web vitals (CWV) de 10 points sur 100. À titre de comparaison, le LCP lui est de 25 % du score soit 25 points sur 100.
Comment mesurer le FCP ?
Le FCP peut être mesuré en laboratoire ou sur le terrain. L'idéal est probablement de le mesurer sur le terrain. Les optimisations comme la mise en cache des ressources, la mise en cache du navigateur ou encore l'amélioration de la mise en cache serveur peuvent significativement améliorer ce score. Pour voir votre score et les opportunités pour l'améliorer il est possible d'utiliser un ou plusieurs des outils suivants :
Outils de terrain pour analyser les éléments de contenu :
- Google Search Console pour les Core Web vitals
- Google PageSpeed Insights peut aussi afficher les scores de terrain, incluant First Contentful Paint, parfois disponibles.
Outils de laboratoire pour mesurer la vitesse de chargement :
- Lighthouse / Chrome Dev Tools
- Google PageSpeed Insights pour analyser la vitesse de chargement
- webpagetest.org pour analyser les Core Web Vitals
Comment améliorer son score FCP ?
Le FCP est une métrique qui s'améliore de la même manière que le LCP. Ayant déjà parcouru le sujet de A à Z pas à pas pour améliorer la performance de votre LCP, je vous invite vivement à consulter cet article.
Cependant, voici tout de même une liste des améliorations possibles pour améliorer votre FCP :
- Éliminer les ressources bloquant le rendu
- Minifier CSS / JS
- Supprimer les CSS inutilisés / JS
- Préconnexion
- Réduire les temps de réponse du serveur (TTFB)
- Éviter les redirections
- Précharger les demandes clés
- Éviter les grandes charges utiles du réseau
- Servir les actifs avec un cache
- Éviter de créer des chaînes de requêtes critiques
- Assurez-vous que le texte reste visible pendant le chargement des polices Web
0 commentaires