Cette page a été traduite par l'API Cloud Translation.

First Contentful Paint (FCP)

Philip Walton

Navigateurs pris en charge

Qu'est-ce que le programme First Content Placement ?

"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 l'affichage à l'écran d'une partie du contenu de la page. Pour cette métrique, le terme "contenu" désigne le texte, les images (y compris les images de fond), les éléments <svg> ou les éléments <canvas> non blancs.

Calendrier de migration vers le format FCP sur google.com — Dans cette chronologie de chargement, le FCP se produit au cours du deuxième frame, car c'est à ce moment que les premiers éléments de texte et d'image sont affichés à l'écran.

Dans la chronologie de chargement représentée dans l'image précédente, le FCP se produit au cours du deuxième frame, car c'est à ce moment que les premiers éléments de texte et d'image sont affichés à l'écran.

Vous remarquerez que certains contenus sont affichés, mais pas tous. Il est important de faire la distinction entre le premier "First Contentful Paint" et le plus grand "First Contentful Paint" (LCP), qui vise à mesurer le moment où le chargement des principaux contenus 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'obtenir un délai de première peinture avec contenu de 1,8 seconde ou moins. Pour vous assurer d'atteindre cet objectif pour la plupart de vos utilisateurs, nous vous recommandons de mesurer le 75e centile des chargements de pages, segmentés par appareil mobile et ordinateur.

Une valeur de FCP de 1,8 seconde ou moins est considérée comme bonne, une valeur supérieure à 3 secondes comme mauvaise, et une valeur comprise entre les deux comme nécessitant une amélioration. — Les valeurs de FCP acceptables sont de 1,8 seconde ou moins. Les valeurs médiocres sont supérieures à 3 secondes.

Comment mesurer le FCP ?

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

Outils sur le 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 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});

Avertissement:Ce code montre comment consigner l'entrée first-contentful-paint dans la console, mais la mesure du FCP en JavaScript est plus complexe. Lisez la suite pour en savoir plus.

Dans l'extrait de code précédent, l'entrée first-contentful-paint enregistrée vous indiquera quand le premier élément avec du contenu a été peint. Toutefois, dans certains cas, cette entrée n'est pas valide pour mesurer le FCP.

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

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

L'API distribue 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 tout le temps).
L'API ne signale pas d'entrées first-contentful-paint lorsque la page est restaurée à partir du cache avant/arrière, mais le FCP doit être mesuré dans ce cas, car les utilisateurs les perçoivent comme des visites de pages distinctes.
L'API peut ne pas enregistrer les délais de peinture des iframes inter-origines, mais pour mesurer correctement le FCP, vous devez prendre en compte tous les frames. Les sous-cadres peuvent utiliser l'API pour signaler leurs délais de peinture au cadre parent à des fins d'agrégation.
L'API mesure le FCP à partir du début de la navigation, mais pour les pages prérendues, le FCP doit être mesuré à partir de activationStart, car il correspond au temps FCP tel que l'utilisateur l'a vécu.

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 d'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.

Remarque:Dans certains cas (par exemple, les iFrames inter-origines), il n'est pas possible de mesurer le FCP en JavaScript. Pour en savoir plus, consultez la section Limites de la bibliothèque web-vitals.

Améliorer le FCP

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

Pour découvrir comment améliorer le FCP en général (pour n'importe quel site), consultez les guides de performances suivants:

Journal des modifications

Il arrive parfois que des bugs soient détectés 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 ces modifications peuvent apparaître sous la forme d'améliorations ou de régressions dans vos rapports et tableaux de bord internes.

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

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