First Contentful Paint (FCP)

Philip Walton

Qu’est-ce que le FCP ?

First Contentful Paint (FCP) mesure le temps écoulé entre le moment où l'utilisateur a accédé à la page pour la première fois et le moment où une partie de son contenu s'affiche à l'écran. Pour cette métrique, le terme "contenu" fait référence au texte, aux images (y compris aux images de fond), aux éléments <svg> ou aux éléments <canvas> non blancs.

Dans la timeline de chargement illustrée dans l'image précédente, le FCP se produit dans la deuxième image, lorsque les premiers éléments de texte et d'image sont affichés à l'écran.

Vous remarquerez qu'une partie du contenu s'est affichée, mais pas la totalité. Il s'agit d'une distinction importante entre First Contentful Paint et Largest Contentful Paint (LCP), qui permet de mesurer à quel moment le chargement du contenu principal de la page est terminé.

Qu'est-ce qu'un bon score FCP ?

Afin d'offrir une expérience utilisateur de qualité, les sites doivent s'efforcer d'afficher un attribut "First Contentful Paint" de 1,8 seconde au maximum. Pour vous assurer d'atteindre cet objectif pour la plupart de vos utilisateurs, un seuil approprié à mesurer est le 75e centile des chargements de pages, segmenté en fonction des appareils mobiles et des ordinateurs.

Mesurer le FCP

Le FCP peut être mesuré en laboratoire ou sur le terrain, et il est disponible avec les outils suivants:

Outils de terrain

• PageSpeed Insights
• Rapport sur l'expérience utilisateur Chrome
• Search Console (rapport sur la vitesse de chargement des pages)
• Bibliothèque JavaScript web-vitals

Outils de l'atelier

• Phare
• Outils pour les développeurs Chrome
• PageSpeed Insights

Mesurer le FCP en JavaScript

Pour mesurer le FCP en JavaScript, vous pouvez utiliser l'API Paint Timing. L'exemple suivant montre comment créer un PerformanceObserver qui écoute une entrée paint nommée first-contentful-paint et la consigne dans la console.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});

Dans l'extrait de code précédent, l'entrée first-contentful-paint consignée vous indique à quel moment le premier élément "contentful" a été affiché. Cependant, dans certains cas, cette entrée n'est pas valide pour mesurer le FCP.

La section suivante répertorie les différences entre les rapports de l'API et le mode de calcul de la métrique.

Différences entre la métrique et l'API

• L'API enverra une entrée first-contentful-paint pour les pages chargées dans un onglet en arrière-plan, mais ces pages doivent être ignorées lors du calcul du FCP (les délais de première peinture ne doivent être pris en compte que si la page était au premier plan pendant tout le temps).
• L'API ne signale pas les entrées first-contentful-paint lorsque la page est restaurée à partir du cache amélioré, mais le FCP doit être mesuré dans ces cas, car les utilisateurs les perçoivent comme des visites de page distinctes.
• Il est possible que l'API ne signale pas les temps de rendu des iFrames multi-origines, mais pour mesurer correctement le FCP, vous devez prendre en compte tous les frames. Les sous-frames peuvent utiliser l'API pour signaler leurs temps de rendu au cadre parent pour l'agrégation.
• L'API mesure le FCP depuis le début de la navigation, mais pour les pages prérendues, il doit être mesuré à partir de activationStart, car il correspond à l'heure FCP vécue par l'utilisateur.

Plutôt que de mémoriser toutes ces différences subtiles, les développeurs peuvent utiliser la bibliothèque JavaScript web-vitals pour mesurer le FCP, qui gère ces différences à votre place (dans la mesure du possible, notez que le problème lié aux iFrames n'est pas abordé):

import {onFCP} from 'web-vitals';

// Measure and log FCP as soon as it's available.
onFCP(console.log);

Pour obtenir un exemple complet de la façon de mesurer le FCP en JavaScript, consultez le code source de onFCP().

Comment améliorer le FCP

Pour savoir comment améliorer le FCP d'un site spécifique, vous pouvez effectuer un audit de performances Lighthouse et prêter attention aux opportunités ou diagnostics spécifiques suggérés par l'audit.

Pour savoir comment améliorer le FCP en général (pour tous les sites), consultez les guides de performances suivants:

• Éliminer les ressources bloquant l'affichage
• Réduire la taille des fichiers CSS
• Supprimer les ressources CSS inutilisées
• Supprimer les fichiers JavaScript inutilisés
• Se préconnecter aux origines requises
• Réduire les temps de réponse du serveur (TTFB)
• Éviter d'avoir plusieurs redirections de page
• Précharger les requêtes de clé
• Éviter les charges utiles réseau énormes
• Diffuser des éléments statiques avec des règles de cache efficaces
• Éviter une taille de DOM excessive
• Réduire la profondeur des requêtes critiques
• S'assurer que le texte reste visible pendant le chargement des polices Web
• Limiter le nombre de requêtes et la taille des transferts

Journal des modifications

Il arrive que des bugs soient découverts dans les API utilisées pour mesurer les métriques, et parfois dans les définitions des métriques elles-mêmes. Par conséquent, des modifications doivent parfois être apportées et elles peuvent apparaître sous forme d'améliorations ou de régressions dans vos rapports et tableaux de bord internes.

Pour vous aider, toutes les modifications apportées à l'implémentation ou à la définition de ces métriques seront affichées dans ce journal des modifications.

Si vous avez des commentaires concernant ces métriques, vous pouvez les envoyer dans le groupe Google "web-vitals-feedback".