Comment optimiser la bandwidth sur Webflow et réduire vos coûts

La bandwidth est devenue un vrai sujet pour les équipes qui gèrent un site Webflow. Pas parce que la plateforme est mal optimisée, mais parce qu'un site qui vit (nouveaux contenus, nouvelles pages, images, vidéos, intégrations) consomme de plus en plus de bande passante au fil des mois. Et quand la consommation dépasse les limites de votre plan, deux options : payer un supplément ou upgrader.

Le problème, c'est que la plupart des sites consomment bien plus que nécessaire. Des images trop lourdes, des vidéos hébergées au mauvais endroit, des fonts inutilisées, des scripts oubliés, des assets qui traînent dans le projet sans être référencés. Tout cela pèse sur la bandwidth sans apporter de valeur.

Cet article vous donne une méthode concrète pour comprendre ce qui consomme, prioriser les optimisations les plus rentables, et éviter les surprises en fin de mois. Que vous gériez un site vitrine PME ou un site marketing SaaS avec un blog actif, les principes sont les mêmes.

‍

Comprendre la bandwidth sur Webflow

La bandwidth (bande passante), dans le contexte d'un site web, c'est la quantité totale de données transférées entre le serveur et les visiteurs sur une période donnée. Chaque fois qu'une personne charge une page de votre site, le serveur envoie du contenu : le HTML de la page, les fichiers CSS et JavaScript, les images, les vidéos, les fonts, et tout fichier lié. La somme de tous ces transferts sur un mois constitue votre consommation de bandwidth.

Sur Webflow, chaque plan d'hébergement inclut une allocation mensuelle de bandwidth. Si vous dépassez cette allocation, Webflow facture un supplément ou vous invite à passer au plan supérieur. Les limites exactes varient selon votre plan (Basic, CMS, Business, Enterprise) et évoluent régulièrement. Vérifiez toujours les limites en vigueur dans les paramètres de votre projet ou sur la page de pricing Webflow.

Ce qu'il faut retenir : la bandwidth n'est pas qu'un indicateur technique. C'est un poste de coût. Et dans la plupart des cas, une part significative de cette consommation est évitable.

‍

Comment Webflow calcule la bandwidth

La bandwidth Webflow correspond à tout ce que le CDN de Webflow sert à vos visiteurs. Concrètement, cela inclut plusieurs catégories de données.

Le HTML, le CSS et le JavaScript constituent la structure de chaque page. Sur un site Webflow bien construit, ces fichiers sont légers (quelques dizaines à quelques centaines de Ko par page). Ce n'est généralement pas là que la bandwidth explose.

Les images sont, dans la grande majorité des cas, le premier poste de consommation. Une image non optimisée peut peser 2 à 5 Mo. Multipliée par le nombre de pages et le nombre de visiteurs, la facture monte vite. Webflow sert les images depuis son CDN, et chaque chargement compte.

Les vidéos hébergées directement dans Webflow (upload natif) sont un cas particulier. Une vidéo de 30 secondes en bonne qualité peut peser 10 à 50 Mo. Si elle est intégrée en background ou en autoplay, chaque visiteur la télécharge. C'est souvent la cause principale d'un pic de bandwidth inattendu.

Les fonts sont un poste souvent négligé. Chaque variante de police (regular, bold, italic, light, semi-bold) est un fichier distinct. Un site qui charge 4 à 6 variantes de fonts peut ajouter 200 à 500 Ko par page.

Les scripts tiers (analytics, chat, tracking, pixels, widgets) ajoutent aussi du poids, même s'ils sont hébergés ailleurs. Certains chargent des ressources supplémentaires (images, fonts, iframes) qui transitent par le CDN ou alourdissent le chargement global.

Enfin, les fichiers uploadés dans le CMS ou dans les assets (PDF, documents, icônes) comptent aussi dans la bandwidth chaque fois qu'ils sont téléchargés par un visiteur.

‍

Comment savoir ce qui consomme

Avant d'optimiser, il faut identifier où va la bandwidth. Plusieurs approches sont possibles, de la plus simple à la plus précise.

Les statistiques Webflow

Dans les paramètres de votre projet, Webflow fournit un aperçu de votre consommation de bandwidth mensuelle. C'est un indicateur global utile pour voir si vous approchez de la limite, mais il ne détaille pas quels assets ou quelles pages consomment le plus.

Les outils de développement du navigateur

L'onglet "Network" des outils de développement (Chrome DevTools, Firefox) vous permet de voir, page par page, le poids de chaque ressource chargée. Triez par taille pour identifier immédiatement les fichiers les plus lourds. C'est la méthode la plus directe pour un audit rapide.

Google PageSpeed Insights et WebPageTest

Ces outils analysent le chargement d'une page et identifient les ressources qui ralentissent le site. Ils ne mesurent pas directement la bandwidth consommée, mais ils signalent les images non optimisées, les scripts bloquants, et les ressources inutilement lourdes.

Le Bandwidth Optimizer BeBranded

Nous avons conçu un outil gratuit, le Bandwidth Optimizer, qui vous aide à identifier rapidement les assets qui consomment le plus de bandwidth sur votre site Webflow et à prioriser les corrections. C'est un bon point de départ pour savoir où concentrer vos efforts avant de toucher au Designer.

‍

Les 80/20 pour réduire la bandwidth

Toutes les optimisations ne se valent pas. Certaines prennent 10 minutes et divisent la consommation par deux. D'autres demandent des heures pour un gain marginal. Voici les leviers classés par impact décroissant.

Images : le premier levier (et le plus rentable)

Les images représentent souvent 60 à 80 % de la bandwidth d'un site. C'est donc le premier endroit où agir.

Format. Webflow convertit automatiquement les images en WebP pour les navigateurs compatibles, ce qui réduit significativement le poids par rapport au JPEG ou PNG classique. Mais cette conversion ne compense pas un fichier source mal optimisé. Si vous uploadez une image de 4 000 px de large en qualité maximale, même la conversion WebP ne suffira pas à la rendre légère.

Dimensions. Chaque image doit être uploadée aux dimensions réellement nécessaires. Si votre colonne fait 800 px de large, une image de 1 600 px (pour les écrans Retina) suffit largement. Uploader une image de 4 000 px pour l'afficher à 800 px, c'est transférer du poids inutile à chaque visite.

Compression. Compressez vos images avant de les uploader dans Webflow. Des outils comme TinyPNG, Squoosh ou ImageOptim permettent de réduire le poids de 50 à 80 % sans perte visible. C'est l'optimisation la plus rapide et la plus efficace.

Lazy loading. Webflow propose le lazy loading natif sur les images. Activez-le pour toutes les images qui ne sont pas visibles au premier écran (above the fold). Cela évite de charger des images que le visiteur ne verra peut-être jamais s'il ne scrolle pas jusqu'en bas.

Background images. Les images définies comme background via le style CSS dans Webflow ne bénéficient pas toujours du lazy loading ni de la conversion WebP automatique. Si vous utilisez des background images lourdes, envisagez de les remplacer par des éléments image classiques positionnés en absolu, ou compressez-les manuellement en WebP avant upload.

Vidéos : le piège le plus courant

L'upload de vidéos directement dans Webflow est pratique, mais c'est souvent la cause d'une explosion de bandwidth. Une vidéo de 20 Mo en autoplay sur la homepage, chargée par chaque visiteur, peut consommer à elle seule une part massive de votre allocation mensuelle.

La règle est simple. Pour les vidéos courtes et légères (quelques secondes, format loop, moins de 2 à 3 Mo), l'upload natif est acceptable. Pour tout le reste, hébergez vos vidéos sur une plateforme tierce (YouTube, Vimeo, Wistia, Bunny.net ou notre outil gratuit Embed Videos) et intégrez-les via un embed. Le visiteur charge alors la vidéo depuis les serveurs du service tiers, pas depuis votre bandwidth Webflow.

Attention aussi aux vidéos en background. Si vous avez une vidéo en arrière-plan de section qui se lance automatiquement, vérifiez son poids. Au-delà de 2 à 3 Mo, c'est un poste de consommation majeur. Envisagez de la remplacer par une image optimisée avec un léger effet d'animation, ou de la compresser fortement (résolution réduite, bitrate bas, durée courte).

Fonts : un poste souvent sous-estimé

Chaque variante de police chargée ajoute entre 20 et 100 Ko au chargement de chaque page. Sur un site qui utilise une font avec 5 ou 6 variantes (light, regular, medium, semi-bold, bold, italic), cela peut représenter 300 à 600 Ko par page, transférés à chaque visite.

La première optimisation est de limiter le nombre de variantes au strict nécessaire. Dans la majorité des cas, deux à trois variantes suffisent : regular, bold, et éventuellement une troisième (italic ou medium).

La seconde est d'utiliser le format WOFF2, qui est le plus léger. Si vous utilisez des fonts custom uploadées dans Webflow, vérifiez qu'elles sont bien en WOFF2. Les formats anciens (TTF, OTF, WOFF1) sont significativement plus lourds.

Si votre site est en français uniquement, vous pouvez aussi utiliser des subsets (sous-ensembles de caractères) qui ne contiennent que les glyphes latin, ce qui réduit encore le poids du fichier font. Des outils comme Google Fonts ou Fontsquirrel proposent cette option.

Scripts : nettoyer, différer, supprimer

Les scripts tiers s'accumulent au fil du temps. Un pixel Facebook ajouté il y a six mois, un widget de chat testé puis abandonné, un outil d'A/B testing dont personne ne regarde les résultats. Chaque script ajoute du poids et des requêtes supplémentaires.

Faites un inventaire de tous les scripts présents dans les paramètres du projet (head code, footer code) et dans les pages individuelles. Pour chaque script, posez la question : est-ce qu'il sert encore ? Si la réponse est non, supprimez-le.

Pour les scripts nécessaires, vérifiez s'ils peuvent être chargés en mode "defer" ou "async" pour ne pas bloquer le rendu de la page. Dans Webflow, les scripts ajoutés dans le footer code se chargent naturellement après le contenu principal.

CMS et pages : le poids structurel

Sur les sites avec un CMS actif (blog, ressources, études de cas), chaque article est une page servie avec tous ses assets. Un blog de 100 articles avec des images non optimisées peut représenter une consommation importante, surtout si le blog génère du trafic SEO.

Vérifiez que les images des articles CMS sont optimisées (format, dimensions, compression). Si votre blog liste les articles avec des thumbnails, assurez-vous que les thumbnails sont des images légères et pas les images complètes affichées en petit.

Sur les pages de collection très longues (listes de 50 à 100 items), la pagination ou le "load more" peut réduire la bandwidth en ne chargeant que ce qui est demandé, plutôt que tout d'un bloc.

Nettoyage Webflow : assets, styles, interactions

Webflow accumule au fil du temps des assets qui ne sont plus utilisés (anciennes images, anciens fichiers, anciennes versions de logos). Ces assets ne consomment pas de bandwidth tant qu'ils ne sont pas référencés dans une page, mais ils encombrent le projet et peuvent être source de confusion.

Dans le panneau Assets de Webflow, vous pouvez identifier les fichiers non utilisés et les supprimer. De même, les styles CSS et les interactions non utilisés ajoutent du poids au fichier CSS/JS global du site. Webflow permet de nettoyer les styles orphelins via l'outil "Clean up" dans le Style Manager.

Ce nettoyage n'a pas un impact aussi fort que l'optimisation des images ou des vidéos, mais il contribue à maintenir un projet propre et léger dans le temps.

‍

Checklist d'audit rapide

Voici les points à vérifier en priorité pour un audit bandwidth rapide. Si vous cochez la majorité de ces points, votre site est déjà bien optimisé. Sinon, chaque correction non cochée est un gain potentiel immédiat.

‍Pour identifier précisément quels assets pèsent le plus sur votre site, le Bandwidth Optimizer BeBranded vous donne une vue claire et priorisée des corrections à appliquer.

‍

Estimer sa bandwidth et éviter les surprises

Estimer votre consommation de bandwidth n'est pas une science exacte, mais une estimation raisonnable permet d'anticiper les dépassements et de choisir le bon plan.

La méthode simple

La formule de base est : bandwidth mensuelle = poids moyen d'une page x nombre de pages vues par mois.

Pour obtenir le poids moyen d'une page, ouvrez les DevTools de votre navigateur (onglet Network), chargez votre page d'accueil, et notez le total transféré. Faites de même pour 3 à 5 pages représentatives (page service, article de blog, page contact). Faites la moyenne.

Le nombre de pages vues par mois est disponible dans votre outil d'analytics (Google Analytics, Plausible, Fathom) ou dans les statistiques Webflow.

Deux cas concrets

Site vitrine PME (5 à 10 pages). Si votre poids moyen par page est de 1,5 Mo et que vous avez 5 000 pages vues par mois, votre consommation est d'environ 7,5 Go par mois. C'est confortable sur la plupart des plans Webflow. Mais si vos images ne sont pas optimisées et que le poids moyen monte à 4 Mo, vous passez à 20 Go par mois, ce qui peut approcher ou dépasser certaines limites de plan.

Site marketing SaaS avec blog actif (50 à 100 articles). Si votre blog génère 30 000 pages vues par mois avec un poids moyen de 2 Mo par page, vous consommez environ 60 Go par mois. Ajoutez le trafic sur les pages marketing et les ressources, et vous pouvez atteindre 80 à 100 Go. Dans ce cas, l'optimisation des images du blog (thumbnails, images d'articles) a un impact direct et mesurable sur la facture.

Anticiper la croissance

Si votre trafic augmente (ce qui est l'objectif), votre bandwidth augmente proportionnellement. Une optimisation faite aujourd'hui sur le poids des pages a un effet cumulatif : plus le trafic croît, plus le gain en bandwidth est significatif. Investir une demi-journée d'optimisation maintenant peut vous faire économiser un upgrade de plan dans six mois.

‍

Quand upgrader vs optimiser

La question se pose souvent : faut-il optimiser le site ou simplement passer au plan supérieur ?

La réponse dépend de l'écart entre votre consommation actuelle et la limite de votre plan, et du potentiel d'optimisation restant.

Si votre site est déjà bien optimisé (images compressées, pas de vidéo lourde en natif, fonts limitées, scripts nettoyés) et que votre trafic croît naturellement, l'upgrade est la bonne réponse. C'est un signe de croissance, pas un problème.

Si votre site consomme beaucoup de bandwidth avec un trafic modéré, c'est un signe que des optimisations sont possibles et qu'elles auront un impact immédiat. Dans ce cas, optimiser d'abord est presque toujours plus rentable que de payer un plan supérieur pour compenser des assets mal gérés.

La logique décisionnelle est la suivante. Commencez par un audit rapide (la checklist ci-dessus ou le Bandwidth Optimizer). Si l'audit révèle des gains significatifs (images non compressées, vidéos natives lourdes, fonts inutilisées), optimisez d'abord. Si l'audit montre un site déjà propre avec une consommation élevée due au trafic, l'upgrade est justifié.

Ne payez pas un plan supérieur pour compenser un problème d'optimisation. Et ne perdez pas du temps à micro-optimiser si la vraie cause est une croissance saine du trafic.

‍

Conclusion : plan d'action

Voici un plan d'action par pallier, selon le temps que vous pouvez y consacrer.

En 30 minutes. Ouvrez les DevTools sur vos 3 pages les plus visitées. Identifiez les images de plus de 500 Ko. Compressez-les avec TinyPNG ou Squoosh et réuploadez-les dans Webflow. Activez le lazy loading sur les images sous le fold. Si une vidéo lourde est uploadée en natif, remplacez-la par un embed YouTube ou Vimeo.

En 2 heures. Faites l'audit complet avec la checklist ci-dessus. Supprimez les scripts tiers inutilisés. Réduisez les variantes de fonts. Nettoyez les assets et styles orphelins. Vérifiez les background images et remplacez les plus lourdes.

En une journée. Reprenez l'ensemble des images du site et du CMS. Mettez en place un process de publication (dimensions cibles, compression systématique, format recommandé) pour que chaque nouveau contenu soit optimisé dès l'upload. Documentez les règles pour l'équipe. Estimez votre bandwidth mensuelle et comparez-la à votre plan actuel pour anticiper les prochains mois.

L'optimisation de la bandwidth n'est pas un one-shot. C'est une habitude à intégrer dans la gestion quotidienne du site. Les gains les plus importants se font en quelques heures, et les bonnes pratiques de publication empêchent la consommation de repartir à la hausse.

Si vous voulez savoir exactement ce qui pèse sur votre site, commencez par le Bandwidth Optimizer. Et si vous souhaitez un audit complet de votre site Webflow (performance, bandwidth, SEO), on peut en discuter.