Comment améliorer le LCP (Largest Contentful Paint) dans Webflow ?

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.

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