Mesurer et tenir le LCP d’une page de lecture

Le Largest Contentful Paint mesure le moment où le plus grand élément visible est affiché. Sur une page d’article, c’est presque toujours l’image de couverture ou le titre.

Trouver l’élément

new PerformanceObserver((list) => {
  const entry = list.getEntries().at(-1)
  console.log(entry?.startTime, entry?.element)
}).observe({ type: 'largest-contentful-paint', buffered: true })

Les leviers

• Précharger la couverture : elle est connue dès le rendu serveur
• Polices : font-display: swap et un préchargement ciblé
• JavaScript : rien ne doit bloquer le premier affichage

Mesurer chez les vrais visiteurs

Les outils de laboratoire donnent une tendance ; les mesures de terrain disent la vérité. Un petit script envoie le LCP réel à la mesure d’audience auto-hébergée.