First Contentful Paint (FCP)

Navigateurs pris en charge

  • 60
  • 79
  • 84
  • 14.1

Source

Qu'est-ce que le FCP ?

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

Chronologie FCP de google.com

Dans la chronologie de chargement ci-dessus, le FCP se produit dans la deuxième image, car c'est à ce moment-là que les premiers éléments de texte et d'image sont affichés à l'écran.

Vous remarquerez que même si une partie du contenu s'est affichée, elle ne s'est pas affichée intégralement. Il s'agit d'une distinction importante entre First Contentful Paint (FCP) et Largest Contentful Paint (LCP), qui vise à mesurer le moment où le chargement du contenu principal de la page est terminé.

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

Pour offrir une expérience utilisateur de qualité, les sites doivent s'efforcer d'avoir une valeur "First Contentful Paint" de 1,8 seconde ou moins. Pour vous assurer d'atteindre cet objectif pour la plupart de vos utilisateurs, le 75e centile de chargements de pages, segmenté entre appareils mobiles et ordinateurs, constitue un bon seuil à mesurer.

Les bonnes valeurs FCP sont inférieures ou égales à 1, 8 seconde, les valeurs médiocres sont supérieures à 3 secondes et les valeurs intermédiaires doivent être améliorées.

Mesurer le FCP

Le FCP peut être mesuré en atelier ou sur le terrain. Il est disponible dans les outils suivants:

Outils de terrain

Outils de l'atelier

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 portant le nom first-contentful-paint et l'enregistre 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'exemple ci-dessus, l'entrée first-contentful-paint enregistrée vous indique quand le premier élément contentful a été peint. Toutefois, 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 générés par l'API et le mode de calcul de la métrique.

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

  • L'API envoie une entrée first-contentful-paint pour les pages chargées dans un onglet d'arrière-plan, mais ces pages doivent être ignorées lors du calcul du FCP (les temps de première peinture ne doivent être pris en compte que si la page était au premier plan pendant toute la durée).
  • 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 voient comme des visites de page distinctes.
  • L'API peut ne pas signaler les temps de rendu des cadres iFrame 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 frame parent à des fins d'agrégation.
  • L'API mesure le FCP dès le début de la navigation, mais pour les pages prérendues, le FCP doit être mesuré à partir de activationStart, car il correspond à l'heure FCP telle qu'elle est perçue 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 pour vous (dans la mesure du possible, le problème iFrame n'est pas couvert):

import {onFCP} from 'web-vitals';

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

Vous pouvez consulter le code source de onFCP() pour obtenir un exemple complet de mesure du FCP en JavaScript.

Comment améliorer le FCP

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

Pour découvrir comment améliorer le FCP en général (pour tous les sites), consultez les guides d'amélioration des performances suivants:

Journal des modifications

Des bugs sont parfois découverts dans les API utilisées pour mesurer les métriques, et parfois dans les définitions des métriques elles-mêmes. Des modifications doivent donc parfois être apportées, et ces modifications peuvent se présenter comme des améliorations ou des 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 sur ces métriques, vous pouvez les faire dans le groupe Google web-vitals-feedback.