Le First Contentful Paint

Euh Google, qu’est-ce que tu est encore allé nous inventer ? C’est quoi le First Contentful Paint ? Petit tour d’horizon de ce nouveau metrix, de sa définition et de ses conséquences pour votre temps de chargement et votre référencement.

Définition du First Contentful Paint

Commençons par sa traduction, le First Contentful Paint (FCP) mesure le temps entre le clic sur le lien d’un site Internet, l’arrivée de votre navigateur sur la page page donc, et le moment où il affiche le premier bit de contenu de la page, le premier bit du DOM (Document Object Modèle). Aux yeux de Google, il s’agit d’une donnée très importante, car elle fournit des informations sur le chargement réel de la page.

L’arrivée sur la page, cela veut dire que le navigateur a trouvé le serveur qui héberge le site et qu’il s’y est connecté, il a eu une réponse et il attend les informations. De son côté, le serveur qui héberge le site Internet reçoit une requête pour afficher une page. Il commence à générer la page en allant chercher tous les fichiers nécessaires, très souvent plus d’une centaine, à aller chercher les infos dans la base de donnée et à créer le code source de la page. Il a beaucoup de boulot !

Une fois que le serveur a réussit à générer la page, il l’envoie au navigateur qui va enfin pouvoir commencer à essayer de l’afficher. Pour y arriver, il va devoir charger dans un premier temps toutes les dépendances, c’est à dire tout les fichiers obligatoires pour afficher la page correctement. Pour les développeurs, notamment tout ce qui est dans la partie <head> en non asynchrone.

Seulement une fois que tout cela est chargé, il va pouvoir afficher le premier bit du contenu de la page (dans la balise <body>). Le temps écoulé entre le début de ce processus et sa fin correspond au First Contentful Paint, l’affichage du premier contenu.

Quelle sont les recommandations de Google pour améliorer le First Contentful Paint ?

Comme on le voit il y a donc plusieurs étapes durant le First Contentful Paint, il s’agira donc d’optimiser chacune d’entre elles. Et comme il s’agit d’un indicateur et non d’un problème établi, il va y avoir une multitude d’action à mener pour réduire le First Contenful Paint. Voici une première liste fournie par Google :

  • Accélérer le temps de téléchargement des ressources
  • Réduire le temps de travail du serveur pour générer la page
  • Réduire le nombre de feuilles de style et les scripts externes bloquants
  • Utiliser de la mise en cache http afin de ne pas télécharger à nouveau tous les fichiers au fur et à mesure de leur navigation.
  • Réduire et compresser les ressources textuelles pour améliorer leur temps de chargement.
  • Optimiser le démarrage de JavaScript et réduire son exécution.

Exemples d’optimisation du First Contenful Paint sous WordPress.

Sous WordPress, l’un des premiers ralentissement est le temps de génération de la page. Une page WordPress est générée à partir d’une centaine de fichier, avec notamment des fichiers de traductions qui peuvent être un peu gros. Tout cela se passe côté serveur, cela est très rapide à l’échelle humaine, on parle de quelques centaines de millisecondes pour tout réunir. WordPress va en même temps aller chercher les informations dans le serveur de la base de donnée. il y aura donc 2 serveurs sollicités, et même si ils sont très souvent à proximité l’un de l’autre, cela ralentit le processus et multiplie par 2 les risques de problème matériel.

Pour palier à cela on pourra utiliser sous WordPress un plugin de cache qui s’occupera de générer la page une première fois et en stockera une sauvegarde sur le serveur. Lors du prochain appel de la page, plutôt que de la régénérer, il ira directement chercher cette sauvegarde. Cela peut parfois faire économiser plusieurs secondes.

Il existe d’autres solutions à mettre en place pour optimiser le First Contenful Paint sous WordPress, qui peuvent être plus ou moins techniques avec notamment :

  • La minification du CSS ou la création de critical Path
  • l’utilisation de chargement asynchrone du JS
  • La mise en place de DNS préfetch
  • La compression GZIP
  • Le cache navigateur

Le FCP, une métrix dure à optimiser.

Optimiser son FCP n’est pas chose facile. Il convient de le faire des la conception du site Internet et de l’avoir en tête tout au long du développement du site Web. Si vous éprouvez des difficultés à l’optimiser, n’hésitez pas à nous contacter pour que nous puissions vous accompagner.