Introduction

Les Core Web Vitals sont les trois métriques de performance que Google utilise officiellement comme critères de ranking depuis 2021. En 2026, ils restent des signaux actifs et mesurés, avec une évolution majeure : l'INP (Interaction to Next Paint) a remplacé définitivement le FID (First Input Delay) en mars 2024 comme métrique de réactivité.

Les trois métriques actives en 2026 sont :

LCP — Largest Contentful Paint : Temps de chargement du plus grand élément visible. Cible : inférieur à 2,5 secondes.

CLS — Cumulative Layout Shift : Stabilité visuelle de la page — absence de déplacements de contenu inattendus. Cible : inférieur à 0,1.

INP — Interaction to Next Paint : Réactivité de la page aux interactions de l'utilisateur (clics, saisies). Cible : inférieur à 200 millisecondes.

Ce guide couvre les causes les plus fréquentes de mauvais scores sur les sites Webflow et les corrections réalisables directement dans l'interface Webflow, sans développeur externe.

Dernière mise à jour : avril 2026.

Métrique 1 — LCP (Largest Contentful Paint) : améliorer le chargement

Qu'est-ce que le LCP ?

Le LCP mesure le temps nécessaire pour que le plus grand élément visible de la page — généralement une image hero ou un titre H1 — soit complètement chargé et affiché. Google cible un LCP inférieur à 2,5 secondes pour une expérience considérée comme "bonne".

Causes fréquentes d'un mauvais LCP sur Webflow

Image hero trop lourde : L'image en haut de page est l'élément LCP le plus fréquent. Une image non optimisée de plusieurs mégaoctets dégrade immédiatement le score LCP.

Lazy loading activé sur l'image hero : Le lazy loading est bénéfique pour les images hors écran, mais contre-productif sur l'image principale — il retarde son chargement prioritaire.

Polices web bloquées au rendu : Si une police web met du temps à charger et que le titre H1 dépend d'elle, le LCP est retardé jusqu'à ce que la police soit disponible.

Animations d'entrée sur les éléments au-dessus du pli : Les animations Webflow qui retardent l'apparition du contenu principal contribuent directement à un LCP élevé.

Corrections réalisables dans Webflow

Correction #1 — Désactiver le lazy loading sur l'image hero : Cliquer sur l'image principale > dans le panneau d'élément Webflow, s'assurer que l'option "Lazy load" est désactivée pour cette image spécifique. L'activer uniquement pour les images hors écran.

Correction #2 — Ajouter l'attribut "eager" sur l'image LCP : Via les Custom Attributes de l'image dans Webflow, ajouter l'attribut loading avec la valeur eager pour signaler au navigateur de charger cette image en priorité.

Correction #3 — Uploader des images compressées et dimensionnées correctement : Webflow convertit en WebP mais ne redimensionne pas. Uploader des images à la résolution d'affichage réelle — une image 4000px sur une section de 1440px est inutilement lourde.

Correction #4 — Supprimer ou retarder les animations d'entrée sur les éléments above the fold : Dans l'onglet Interactions de Webflow, vérifier que les éléments visibles immédiatement à l'ouverture n'ont pas d'animation de type "fade in" ou "slide in" avec un délai. Ces animations retardent le LCP mesuré par Google.

Correction #5 — Utiliser font-display: swap pour les polices : Dans les paramètres de police Webflow, activer l'option font-display: swap pour que le texte s'affiche immédiatement avec une police de secours pendant le chargement de la police principale.

Métrique 2 — CLS (Cumulative Layout Shift) : éliminer les décalages visuels

Qu'est-ce que le CLS ?

Le CLS mesure la somme des déplacements de mise en page inattendus qui se produisent pendant le chargement d'une page. Un CLS élevé signifie que les éléments se déplacent après leur affichage initial — ce qui crée une expérience frustrante et nuit au ranking. Google cible un CLS inférieur à 0,1.

Causes fréquentes d'un mauvais CLS sur Webflow

Images sans dimensions définies : Si une image est placée sans hauteur réservée, le navigateur ne sait pas combien d'espace lui allouer avant qu'elle charge — provoquant un décalage visuel.

Animations qui modifient la hauteur ou la largeur des blocs : Les animations Webflow de type "slide down", "expand", ou "height from 0" modifient la géométrie de la page et génèrent du CLS.

Polices web causant un FOUT : Le "Flash of Unstyled Text" se produit lorsqu'une police web remplace la police de secours — si les deux polices ont des dimensions différentes, le texte se déplace et génère du CLS.

Bannières ou pop-ups qui s'insèrent dans le flux du document : Les barres de cookie ou les pop-ups qui poussent le contenu existant vers le bas créent un CLS mesurable.

Corrections réalisables dans Webflow

Correction #1 — Définir des dimensions fixes pour toutes les images : Dans Webflow, pour chaque image, définir une largeur et une hauteur fixées ou utiliser un ratio d'aspect (aspect ratio) dans les paramètres de style. Cela réserve l'espace avant le chargement et élimine le CLS associé.

Correction #2 — Remplacer les animations de taille par des animations d'opacité : Dans l'onglet Interactions de Webflow, éviter les effets qui changent height, width, padding ou margin. Utiliser exclusivement opacity (0 à 1) et transform (translate, scale) qui ne modifient pas la géométrie de mise en page.

Correction #3 — Activer font-display: swap : Cette option dans les paramètres de police Webflow réduit le FOUT et donc le CLS associé au remplacement de police.

Correction #4 — Positionner les bannières et pop-ups en position fixée (fixed) : Dans Webflow, les éléments en position fixed ou absolute ne font pas partie du flux du document et ne génèrent pas de CLS. Une barre de cookie en position fixed en bas de l'écran n'affecte pas le score CLS.

Correction #5 — Vérifier le CLS sur mobile via les breakpoints Webflow : Le CLS est souvent plus élevé sur mobile à cause des différences de mise en page. Prévisualiser chaque page sur les breakpoints mobiles dans l'éditeur Webflow pour identifier les décalages spécifiques au mobile.

Métrique 3 — INP (Interaction to Next Paint) : améliorer la réactivité

Qu'est-ce que l'INP ?

L'INP (Interaction to Next Paint) mesure le temps écoulé entre une interaction de l'utilisateur (clic, saisie clavier, tap sur mobile) et l'affichage de la prochaine image par le navigateur. Il remplace le FID depuis mars 2024 et couvre toutes les interactions tout au long de la session, pas seulement la première. Google cible un INP inférieur à 200 millisecondes.

Causes fréquentes d'un mauvais INP sur Webflow

Interactions Webflow complexes sur le thread principal : Les animations déclenchées par des clics ou des survols qui exécutent de nombreux calculs JavaScript bloquent le thread principal et retardent la réponse visuelle.

Trop d'interactions simultanées sur une même page : Un système d'onglets, un carrousel, un menu animé et des effets de survol actifs simultanément surchargent le rendu et dégradent l'INP.

Scripts tiers lourds : Les scripts de chat, de tracking ou publicitaires injectés via Webflow Custom Code consomment des ressources du thread principal et augmentent l'INP.

Images CMS non optimisées dans des listes dynamiques : Le chargement de nombreuses images haute résolution dans une liste CMS Webflow peut bloquer le thread de rendu et affecter l'INP.

Corrections réalisables dans Webflow

Correction #1 — Réduire le nombre d'interactions sur les pages à fort trafic : Dans l'onglet Interactions de Webflow, auditer toutes les animations actives sur la page. Supprimer les effets de survol redondants et simplifier les animations de navigation pour réduire la charge sur le thread principal.

Correction #2 — Utiliser des transitions CSS plutôt que des animations JavaScript : Les transitions CSS (opacity, transform) s'exécutent sur le GPU et ne bloquent pas le thread principal. Dans Webflow, préférer les transitions de style natives aux interactions JavaScript complexes pour les effets visuels simples.

Correction #3 — Charger les scripts tiers de manière différée : Dans Webflow > Settings > Custom Code > Footer Code, placer les scripts tiers dans le footer plutôt que dans le head. Ajouter l'attribut defer ou async sur les balises script via les Custom Attributes de Webflow.

Correction #4 — Limiter le nombre d'items dans les listes CMS : Dans les paramètres de Collection List dans Webflow, limiter le nombre d'items affichés à la valeur minimale nécessaire. Utiliser la pagination plutôt que d'afficher 50 entrées d'un coup.

Correction #5 — Optimiser les images dans les listes CMS avant l'upload : Redimensionner les images à la taille d'affichage réelle avant de les uploader dans les champs CMS. Une vignette de 400x300px n'a pas besoin d'être stockée en 2000x1500px.

Comment mesurer ses Core Web Vitals sur un site Webflow

Quatre méthodes permettent de mesurer les Core Web Vitals d'un site Webflow :

1. PageSpeed Insights (pagespeed.web.dev) — L'outil Google le plus direct. Fournit les scores LCP, CLS et INP pour les données réelles (CrUX) et les données de laboratoire (Lighthouse), séparément pour mobile et desktop.

2. Google Search Console > Core Web Vitals — Rapport global qui identifie les pages en échec, à améliorer, et bonnes à l'échelle du site entier, basé sur des données réelles d'utilisateurs.

3. Chrome DevTools > Lighthouse — Audit local exécutable depuis le navigateur sur n'importe quelle URL, y compris les aperçus Webflow non publiés (webflow.io).

4. Web Vitals extension Chrome — Extension Google qui affiche les scores CWV en temps réel pendant la navigation, utile pour tester les interactions INP spécifiques.

Les 3 erreurs les plus fréquentes sur Webflow

Erreur #1 — Activer le lazy loading sur toutes les images sans exception : Le lazy loading doit être désactivé sur l'image principale (LCP). L'appliquer à toutes les images de manière indéfinie dégrade le LCP.

Erreur #2 — Utiliser des animations "height: auto" pour révéler du contenu : Les animations qui font passer un élément de height: 0 à height: auto sont les principales sources de CLS sur les sites Webflow. Utiliser des animations d'opacité + transform à la place.

Erreur #3 — Tester uniquement sur desktop : Google évalue les Core Web Vitals principalement sur mobile. Un site qui performe bien sur desktop peut avoir des scores médiocres sur mobile à cause de la puissance de traitement inférieure des appareils mobiles. Toujours tester sur les deux.

Conclusion

Les Core Web Vitals — LCP, CLS et INP — sont des critères de ranking mesurables et améliorables directement depuis l'interface Webflow. Les causes les plus fréquentes de mauvais scores sur Webflow sont : le lazy loading mal configuré, les animations qui modifient la géométrie de la page, et les scripts tiers non différés.

La priorité d'optimisation recommandée : commencer par le LCP (impact le plus visible sur le ranking), puis le CLS (le plus facile à corriger dans Webflow), puis l'INP (le plus dépendant des choix d'interactions).

Vous souhaitez qu'un expert audite et optimise les Core Web Vitals de votre site Webflow ? Notre équipe peut réaliser un diagnostic complet et implémenter les corrections nécessaires.

Ce guide est mis à jour en avril 2026 pour refléter les métriques Core Web Vitals actives en 2026, incluant l'INP comme remplacement officiel du FID.