First Contentful Paint (FCP)

Philip Walton

La métrique First Contentful Paint (FCP) est une métrique importante centrée sur l'utilisateur pour mesurer la vitesse de chargement perçue. Elle marque le premier point de la timeline de chargement de la page où l'utilisateur peut voir tout ce qui s'affiche à l'écran. Un FCP rapide permet de rassurer l'utilisateur sur le fait qu'il se passe quelque chose.

Le 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 est affichée à 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.

Tout le contenu ne s'affiche pas lorsque le premier élément de contenu s'affiche. Il s'agit d'une distinction importante entre le FCP et le Largest Contentful Paint (LCP), qui mesurent le chargement du contenu principal de la page.

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

Pour offrir une bonne expérience utilisateur, le FCP des sites doit être inférieur ou égal à 1,8 seconde. Pour vous assurer d'atteindre cet objectif pour la plupart de vos utilisateurs, le 75e centile des chargements de page, segmenté entre les appareils mobiles et les ordinateurs, constitue un bon seuil à mesurer.

Mesurer le FCP

Le FCP peut être mesuré en atelier ou sur le terrain. Il est disponible dans 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, utilisez 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 cet exemple, l'entrée first-contentful-paint enregistrée vous indique à quel moment le premier élément contenu 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 en arrière-plan, mais ces pages doivent être ignorées lors du calcul du FCP. Les codes temporels du premier rendu ne sont pris en compte que si la page a été affichée 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.

Au lieu 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 (sauf dans les cadres iFrame):

import {onFCP} from 'web-vitals';

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

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

Comment améliorer le FCP

Pour apprendre à 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:

• Éliminer les ressources qui bloquent l'affichage
• Réduire la taille des ressources CSS
• Supprimer les ressources CSS inutilisées
• Supprimer le code JavaScript inutilisé
• Préconnexion aux origines requises
• Réduire les temps de réponse du serveur
• Éviter les redirections de pages multiples
• Précharger les requêtes de clés
• Éviter d'énormes charges utiles de réseau
• Diffusez des éléments statiques avec une règle de cache efficace
• Éviter une taille de DOM excessive
• Réduire la profondeur des requêtes critiques
• S'assurer que le texte reste visible pendant le chargement de la police Web
• Limitez 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 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 à gérer cette situation, toutes les modifications apportées à l'implémentation ou à la définition de ces métriques sont présentées dans ce journal des modifications.

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