Comment améliorer le LCP (Largest Contentful Paint) dans Webflow ?
Apprenez à améliorer le LCP de votre site Webflow sous 2,5s : identification de l'élément LCP, optimisation image et font.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment améliorer le LCP (Largest Contentful Paint) de votre site Webflow. Le LCP mesure le temps d'affichage du plus grand élément visible : Google considère qu'il doit être inférieur à 2,5 secondes.
| Score LCP | Évaluation Google | Action |
|---|---|---|
| < 2,5s | Bon | Maintenir |
| 2,5s à 4s | À améliorer | Optimiser en priorité |
| > 4s | Mauvais | Correction urgente |
1. Identifiez votre élément LCP
Dans PageSpeed Insights, l'élément LCP est indiqué dans le rapport. Sur la plupart des sites Webflow, c'est l'image hero ou le titre H1 principal. Ouvrez Chrome DevTools > Performance > LCP pour le confirmer.
2. Optimisez l'image LCP
Si votre LCP est une image : réglez Loading: Eager dans Webflow, ajoutez l'attribut custom fetchpriority: high, et ajoutez un preload dans le head. Si l'image est en CSS background, le preload est obligatoire car le navigateur ne la détecte pas automatiquement.
3. Optimisez le titre LCP
Si votre LCP est un titre H1 avec une font custom, la font doit être préchargée. Ajoutez un preload WOFF2 dans le head et assurez-vous que font-display: swap est appliqué pour éviter le FOIT.
4. Réduisez le TTFB (Time to First Byte)
Un TTFB élevé (>600ms) indique un problème côté serveur. Webflow utilise un CDN Fastly : votre TTFB devrait être inférieur à 200ms. Si ce n'est pas le cas, vérifiez que votre domaine custom est bien connecté via le CDN Webflow et non via un proxy tiers qui ajouterait de la latence.
Conclusion
Un LCP sous 2,5s est l'objectif principal des Core Web Vitals. Cas d'usage :
- Landing pages publicitaires avec image hero
- Pages d'accueil avec titre en font custom
- Pages produit e-commerce avec image principale
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
