First Contentful Paint (FCP)

Philip Walton

Qu'est-ce que le programme 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 l'affichage à l'écran d'une partie du contenu de la page. Pour cette métrique, le "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 chronologie de chargement représentée dans l'image précédente, le FCP se produit au 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 qu'une partie du contenu s'est affichée, mais pas la totalité. 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, un seuil approprié à mesurer est le 75e centile des chargements de pages, segmenté en fonction des appareils mobiles et des ordinateurs.

Comment mesurer le FCP

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

Outils sur le terrain

• PageSpeed Insights
• Rapport sur l'expérience utilisateur de Chrome
• Search Console (rapport sur la vitesse)
• 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 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 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.
• 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-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 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.

Comment 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 :

• É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 d'énormes charges utiles de réseau
• Diffuser des éléments statiques grâce à 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é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 elles peuvent apparaître sous 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.