Webflow a une réputation bien méritée pour la qualité de son code HTML/CSS généré. Mais un code propre ne signifie pas automatiquement un site rapide. Après des dizaines de projets Webflow audités et optimisés, le constat est toujours le même : la plateforme offre une base technique solide, mais de mauvaises décisions de design et de configuration peuvent effacer cet avantage en quelques clics.

‍

Ce guide couvre les trois métriques Core Web Vitals, à savoir LCP, CLS et INP, avec des actions concrètes applicables directement dans Webflow. Uniquement ce qui s'applique à l'environnement Webflow, avec ses contraintes et ses leviers propres.

‍

Ce que Google mesure et pourquoi ça compte vraiment

Les Core Web Vitals ne sont pas uniquement un facteur de classement. Ils mesurent quelque chose de réel : la qualité d'expérience ressentie par un visiteur sur mobile, avec une connexion 4G standard. Google les a intégrés dans ses signaux de ranking en 2021, mais leur impact sur les conversions précède largement cette décision.

‍

Un site qui charge en 4 secondes perd entre 25 % et 40 % de ses visiteurs avant que la page soit interactive, et ce quel que soit le secteur ou le contenu.

‍

Les trois métriques actuelles :

• LCP (Largest Contentful Paint) : temps avant que l'élément principal de la page soit affiché. Objectif : sous 2,5 secondes.
• CLS (Cumulative Layout Shift) : instabilité visuelle pendant le chargement. Objectif : score inférieur à 0,1.
• INP (Interaction to Next Paint) : temps de réponse aux interactions utilisateur, remplace FID depuis mars 2024. Objectif : sous 200 millisecondes.

LCP sur Webflow : l'image héroïque qui plombe tout

Le LCP est la métrique sur laquelle Webflow a le plus de marge d'amélioration, et sur laquelle la plupart des projets échouent.

‍

Identifier l'élément LCP de vos pages

Sur une page Webflow typique, l'élément LCP est presque toujours l'un de ces trois éléments :

• L'image hero de la section au-dessus de la fold
• Un background-image CSS sur une section pleine largeur
• Le titre H1 si aucune image n'est présente au-dessus de la fold
  ‍

Pour identifier l'élément LCP : ouvrez Chrome DevTools, allez dans l'onglet Performance, lancez un enregistrement puis cherchez le marqueur LCP dans la timeline. PageSpeed Insights le signale aussi directement dans son panneau Insights.

‍

Le problème Webflow avec les images LCP

Par défaut, Webflow lazy-load toutes les images, y compris celles visibles immédiatement à l'écran. Sur toute image placée au-dessus de la fold, désactivez le lazy-loading dans les paramètres de l'image. Ajoutez manuellement l'attribut loading="eager" via un attribut custom si l'option n'est pas disponible dans votre version de l'interface.

‍

Le cas particulier des background-images

Les sections Webflow avec une image en arrière-plan CSS sont le cas le plus problématique pour le LCP. Le navigateur doit d'abord télécharger et parser le CSS avant de déclencher le chargement de l'image. Deux approches selon votre situation :

‍

Option 1 : remplacer le background-image par une image HTML. Ajoutez un élément image dans la section, positionnez-le en position: absolute avec width: 100 %, height: 100 % et object-fit: cover. L'image devient un élément HTML classique, préchargeable et prioritisable par le navigateur.

‍

Option 2 : preload via Head Code. Dans les paramètres de page Webflow, Custom Code, Head Code, ajoutez :

‍

<link rel="preload" as="image" href="URL_DE_VOTRE_IMAGE" fetchpriority="high">

‍

Format et compression des images

Webflow transforme automatiquement les images uploadées en WebP. Il n'effectue pas de compression agressive par défaut, c'est donc à vous de le faire en amont.

‍

Règle pratique : compressez vos images avant l'upload avec Squoosh, un outil en ligne gratuit. Une image de 1,2 Mo peut descendre à 180 Ko avec une perte de qualité imperceptible. Pour les images hero, visez 200 à 400 Ko maximum avant upload.

‍

CLS sur Webflow : empêcher la page de sauter

Le CLS mesure la stabilité visuelle pendant le chargement. Il correspond à ce phénomène agaçant où le contenu se décale au moment où vous allez cliquer. Webflow est naturellement meilleur que WordPress sur ce point car il n'injecte pas de scripts tiers par défaut.

‍

Les causes de CLS sur Webflow

Images sans dimensions explicites. Quand une image se charge de façon asynchrone sans que le navigateur connaisse ses dimensions, il ne peut pas lui réserver d'espace dans le layout. Solution : définissez toujours des dimensions sur vos éléments image, ou utilisez un ratio padding pour les images fluides. Enveloppez l'image dans un div en position: relative avec un padding-bottom en pourcentage (56,25 % pour du 16:9), puis positionnez l'image en position: absolute, width: 100 %, height: 100 %, object-fit: cover.

‍

Fonts web sans font-display. Pour les polices Google importées dans le head, ajoutez &display=swap à l'URL d'import. Les polices custom uploadées directement dans Webflow gèrent le font-display: swap automatiquement depuis 2023. Pour Adobe Fonts, vérifiez que l'option Swap est sélectionnée dans vos paramètres de projet.

‍

Embeds et iframes sans dimensions définies. Un embed YouTube, une carte Google Maps ou un formulaire Typeform sans hauteur fixe crée du CLS. Enveloppez toujours un embed dans un conteneur avec une hauteur fixe ou un ratio padding.

‍

Animations Webflow qui déplacent des éléments avant de les stabiliser. Pour les animations au-dessus de la fold, préférez des effets sur opacity et transform uniquement. Évitez d'animer des propriétés qui affectent le layout comme margin, padding, height ou width.

‍

INP sur Webflow : la réactivité aux clics et aux interactions

L'INP mesure le délai entre une interaction utilisateur, comme un clic ou une frappe clavier, et le moment où le navigateur affiche une mise à jour visuelle en réponse. Un INP élevé donne l'impression que le site est figé. Webflow est généralement bon sur ce point par défaut. Les problèmes surviennent avec les scripts tiers et les animations JavaScript complexes.

‍

Scripts tiers : la principale source d'INP élevé

Chaque script tiers ajouté dans le head ou le body de votre site occupe le thread principal du navigateur et retarde les réponses aux interactions. Parmi les scripts fréquemment problématiques sur les sites Webflow :

• Intercom ou HubSpot Chat, qui chargent des centaines de Ko de JavaScript
• Google Tag Manager avec trop de tags configurés
• Hotjar ou FullStory, des scripts de session recording très gourmands
• LinkedIn Insight Tag, notoire pour son impact sur les performances

Pour les scripts ajoutés via Custom Code, utilisez l'attribut defer :

<script defer src="https://votre-script.js"></script>

‍

Pour les scripts de chat ou de support, chargez-les seulement après une première interaction utilisateur plutôt qu'au chargement initial. GTM avec des triggers conditionnels permet aussi de mieux contrôler leur exécution.

‍

Interactions Webflow et INP

• Préférez les animations CSS via les states Webflow aux interactions JavaScript complexes. Les animations CSS utilisent le thread de composition, pas le thread principal.
• Évitez d'animer plus de 5 à 6 éléments simultanément dans une seule interaction.
• Testez l'INP spécifiquement sur l'ouverture du menu de navigation, souvent la principale source d'INP élevé sur les sites avec des menus animés.

Mesurer correctement : les outils à utiliser

PageSpeed Insights vs Lighthouse

Beaucoup de propriétaires de sites s'alarment d'un score Lighthouse de 65 en rouge, puis oublient que leur site est classé en première page le même jour. La différence est fondamentale.

‍

Lighthouse simule un appareil mobile lent avec une connexion ralentie. C'est un test de laboratoire utile pour identifier des problèmes, mais le score ne correspond pas directement à ce que vivent vos utilisateurs réels.

‍

PageSpeed Insights combine Lighthouse avec les données CrUX, c'est-à-dire des données réelles collectées par Chrome sur votre site pendant les 28 derniers jours. La section Field Data est ce que Google utilise réellement pour le ranking. Vos données terrain peuvent être significativement meilleures que le score simulé.

‍

Les outils recommandés

• PageSpeed Insights sur pagespeed.web.dev. À tester sur vos 3 à 5 pages principales, pas uniquement la homepage.
• WebPageTest sur webpagetest.org. Permet de visualiser le chargement de votre page image par image, et de tester depuis des connexions et localisations réelles.
• Chrome DevTools, onglet Performance. Pour identifier les Long Tasks, les ressources bloquantes et le waterfall de chargement.
• Google Search Console, rapport Core Web Vitals. La source de vérité pour savoir comment Google catégorise vos URLs : Bon, À améliorer ou Mauvais. L'impact de vos optimisations y apparaît avec un décalage de 28 jours.

‍

Checklist d'optimisation Webflow par ordre de priorité

Impact élevé, effort faible

• Désactiver le lazy-loading sur les images au-dessus de la fold
• Comprimer les images avant upload avec Squoosh ou ImageOptim
• Ajouter fetchpriority="high" sur l'image ou le background hero
• Supprimer les scripts tiers inutilisés ou dont vous ne consultez pas les données
• Ajouter defer sur tous les scripts tiers dans Custom Code

Impact élevé, effort moyen

• Remplacer les background-images CSS des sections hero par des éléments img natifs
• Ajouter des dimensions explicites sur toutes les images Webflow
• Envelopper tous les embeds dans des conteneurs de hauteur fixe
• Auditer et alléger les interactions Webflow au-dessus de la fold

Impact moyen, effort moyen

• Migrer les scripts tiers vers GTM avec des triggers conditionnels
• Vérifier le font-display des polices web utilisées
• Réduire le nombre d'éléments animés simultanément dans les interactions complexes

Impact cumulatif

• Optimiser les vidéos de fond : format WebM, autoplay muted, poster image
• Éviter les classes CSS inutilisées, Webflow nettoie partiellement à la publication

Ce que Webflow fait bien nativement

Pour finir avec une perspective équilibrée : Webflow prend en charge nativement plusieurs optimisations que vous devriez gérer manuellement sur WordPress.

• CDN global Fastly. Votre site est distribué sur des noeuds internationaux. Le TTFB est généralement excellent, souvent sous 200 ms depuis la France, sans aucune configuration requise.
  ‍
• Compression automatique des assets. CSS et JavaScript sont minifiés à la publication. Les images sont servies en WebP avec srcset automatique.
  ‍
• HTTP/2 et TLS natifs. Actifs par défaut, sans configuration.
  ‍
• Pas de base de données. Contrairement à WordPress, Webflow sert des pages statiques. C'est un avantage structurel sur le TTFB et l'INP.

Ces avantages vous donnent une avance réelle. Le travail d'optimisation décrit dans cet article consiste à ne pas la gâcher par de mauvaises décisions de configuration.