Core Web Vitals no-code : optimiser Bubble & Webflow pour le SEO

80% des sites no-code échouent au test Core Web Vitals de Google à leur première mise en ligne. Et pourtant, Bubble et Webflow peuvent parfaitement atteindre le vert — à condition de savoir où regarder. Chez Fabrica Digitalis à Annecy, nous auditons chaque semaine des plateformes no-code dont les scores plombent le SEO et font fuir les visiteurs mobiles. Voici la méthode que nous appliquons pour transformer un site lent en machine à convertir.

Core Web Vitals : pourquoi votre site no-code se fait pénaliser

Les Core Web Vitals mesurent trois choses : la vitesse d'affichage du plus gros élément visible (LCP), la réactivité à la première interaction (INP, qui a remplacé le FID en mars 2024), et la stabilité visuelle pendant le chargement (CLS). Google utilise ces métriques comme signal de ranking depuis 2021.

Le problème avec Bubble et Webflow : les builders génèrent du HTML/CSS/JS mutualisé, chargent des bibliothèques entières même si vous n'utilisez que 10% des composants, et servent souvent des images non optimisées. Résultat typique à l'audit : LCP à 4,2s, CLS à 0,28, score Lighthouse mobile autour de 35/100.

La bonne nouvelle : 90% de ces problèmes se corrigent sans toucher à une ligne de code backend.

Lazy loading : charger ce qui compte, quand ça compte

Dans Webflow

Webflow applique nativement loading="lazy" sur les images insérées via le CMS depuis 2020. Mais attention : les images du fold supérieur (ce qui s'affiche avant scroll) ne doivent jamais être en lazy loading, sous peine de ruiner le LCP. Dans Webflow, allez sur l'image hero, panneau Settings, et décochez "Lazy load" pour la remplacer par Eager.

Pour les vidéos embarquées (YouTube, Vimeo), remplacez l'iframe par une image statique cliquable qui déclenche le chargement à la demande. Gain mesuré : -1,8s de LCP sur un site vitrine moyen.

Dans Bubble

Bubble est plus capricieux. Le lazy loading natif existe depuis la refonte du Page Loader (2023), mais il faut l'activer explicitement dans Settings > General > Enable responsive image serving. Pour les Repeating Groups longs, utilisez l'option "Full list" uniquement si nécessaire ; sinon, préférez "Ext. vertical scrolling" qui charge par paquets.

Compression d'assets : le levier le plus sous-estimé

Une image mal compressée pèse souvent 10 à 20 fois son poids optimal. Nos règles chez Fabrica Digitalis :

• Format WebP ou AVIF systématique (Webflow convertit automatiquement depuis 2022, Bubble nécessite un passage par TinyPNG ou Squoosh avant upload).
• Dimensions réelles : jamais une image de 3000px affichée dans un conteneur de 400px. Redimensionnez à la taille max d'affichage × 2 (pour les écrans Retina).
• Qualité à 75-82% : au-delà, le gain visuel est imperceptible mais le poids explose.
• Polices web : limitez-vous à 2 familles et 3 graisses maximum, en format woff2, avec font-display: swap.

Sur un projet client récent — un e-commerce Webflow dont vous retrouverez des cas similaires dans nos études de cas — nous avons fait passer le poids moyen des pages de 4,7 Mo à 890 Ko simplement en traitant les images et les polices.

Minimisation : traquer le JavaScript inutile

C'est ici que les no-code builders font le plus de dégâts. Chaque plugin ajouté charge sa propre bibliothèque, souvent en bloquant le rendu.

Audit des plugins Bubble

Dans l'éditeur, ouvrez l'onglet Plugins et désactivez tout ce qui n'est pas utilisé sur la page courante. Encore mieux : utilisez les Page Loading Options pour n'exécuter certains scripts qu'après l'event DOMContentLoaded. Les plugins analytics, chat, et popups sont les premiers coupables.

Audit des intégrations Webflow

Webflow laisse coller du code custom dans le head et le body. Vérifiez que :

1. Google Tag Manager est appelé en async.
2. Les scripts tiers (Hotjar, Intercom, Calendly) sont chargés en defer ou déclenchés sur interaction utilisateur.
3. Vous n'avez pas plusieurs versions de jQuery qui cohabitent (classique sur les templates achetés).

Pour la minification CSS/JS, Webflow s'en occupe nativement si vous cochez les cases dans Project Settings > Publishing > Minify. Oui, elles sont décochées par défaut.

CLS : stabiliser la mise en page

Le CLS (Cumulative Layout Shift) sanctionne les éléments qui bougent pendant le chargement. Les causes récurrentes sur no-code :

• Images sans dimensions définies (toujours renseigner width/height en CSS).
• Bannières de cookies qui s'insèrent après coup : réservez un espace fixe en haut de page.
• Polices personnalisées qui provoquent un FOUT (Flash of Unstyled Text) : utilisez size-adjust dans la déclaration @font-face.

Mesurer, pas deviner : les bons outils

Avant toute optimisation, mesurez avec :

• PageSpeed Insights pour les données terrain (CrUX) et laboratoire.
• WebPageTest pour simuler des connexions 3G et des localisations précises.
• Chrome DevTools > Performance pour identifier les scripts bloquants.

Visez : LCP < 2,5s, INP < 200ms, CLS < 0,1. Ces seuils ne sont pas négociables si vous voulez ranker sur des requêtes concurrentielles.

Et après ? La maintenance qui préserve les gains

Optimiser une fois ne suffit pas. Chaque nouvelle page, chaque plugin ajouté, chaque image uploadée peut dégrader les scores. C'est pourquoi nous proposons des forfaits de maintenance performance incluant un audit mensuel des Core Web Vitals et des correctifs proactifs.

Vous êtes basé à Annecy, en Haute-Savoie ou dans la région lyonnaise, et votre site Bubble ou Webflow stagne en page 2 de Google ? Découvrez nos services d'optimisation no-code ou explorez nos offres packagées adaptées aux TPE/PME. Nous diagnostiquons gratuitement vos Core Web Vitals en 48h.