First Contentful Paint (FCP)

Navigateurs pris en charge

  • Chrome: 60 <ph type="x-smartling-placeholder">
  • Edge: 79 <ph type="x-smartling-placeholder">
  • Firefox: 84 <ph type="x-smartling-placeholder">
  • Safari: 14.1. <ph type="x-smartling-placeholder">

Source

<ph type="x-smartling-placeholder">

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, "contenu" fait référence à du texte, des images (y compris des images de fond), des éléments <svg> ou des éléments <canvas> non blancs.

<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">
</ph> Chronologie FCP de google.com <ph type="x-smartling-placeholder">
</ph> Dans cette timeline de chargement, 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.

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.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> Les bonnes valeurs FCP sont inférieures ou égales à 1,8 seconde, les valeurs faibles sont supérieures à 3 secondes, et tout élément entre les deux doit être amélioré. .
Les bonnes valeurs FCP sont de 1,8 seconde ou moins. Les valeurs faibles sont supérieures à 3 secondes

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

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 objet 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});
<ph type="x-smartling-placeholder">

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().

<ph type="x-smartling-placeholder">

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:

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".