How to optimize bandwidth on Webflow and reduce your costs

Bandwidth has become a real issue for teams managing a Webflow site. Not because the platform is poorly optimized, but because a site that lives (new content, new pages, images, videos, integrations) consumes more and more bandwidth over time. And when consumption exceeds your plan's limits, you have two options: pay an overage fee or upgrade.

The problem is that most sites consume far more than they need to. Oversized images, videos hosted in the wrong place, unused fonts, forgotten scripts, assets sitting in the project without being referenced. All of this weighs on bandwidth without adding value.

This article gives you a concrete method to understand what's consuming bandwidth, prioritize the most impactful optimizations, and avoid surprises at the end of the month. Whether you manage an SMB brochure site or a SaaS marketing site with an active blog, the principles are the same.

‍

Understanding bandwidth on Webflow

Bandwidth, in the context of a website, is the total amount of data transferred between the server and visitors over a given period. Every time someone loads a page on your site, the server sends content: the page's HTML, CSS and JavaScript files, images, videos, fonts, and any linked files. The sum of all these transfers over a month is your bandwidth consumption.

On Webflow, each hosting plan includes a monthly bandwidth allocation. If you exceed that allocation, Webflow charges an overage fee or prompts you to upgrade to a higher plan. The exact limits vary depending on your plan (Basic, CMS, Business, Enterprise) and are updated regularly. Always check the current limits in your project settings or on Webflow's pricing page.

The key takeaway: bandwidth isn't just a technical metric. It's a cost item. And in most cases, a significant portion of that consumption is avoidable.

‍

How Webflow calculates bandwidth

Webflow bandwidth corresponds to everything the Webflow CDN serves to your visitors. In practice, this includes several categories of data.

HTML, CSS, and JavaScript make up the structure of each page. On a well-built Webflow site, these files are lightweight (a few tens to a few hundred KB per page). This is generally not where bandwidth explodes.

Images are, in the vast majority of cases, the single biggest bandwidth consumer. An unoptimized image can weigh 2 to 5 MB. Multiply that by the number of pages and the number of visitors, and the bill adds up fast. Webflow serves images from its CDN, and every load counts.

Videos hosted directly in Webflow (native upload) are a special case. A 30-second video in decent quality can weigh 10 to 50 MB. If it's embedded as a background or set to autoplay, every visitor downloads it. This is often the main cause of an unexpected bandwidth spike.

Fonts are a frequently overlooked item. Each font variant (regular, bold, italic, light, semi-bold) is a separate file. A site loading 4 to 6 font variants can add 200 to 500 KB per page.

Third-party scripts (analytics, chat, tracking, pixels, widgets) also add weight, even if they're hosted elsewhere. Some load additional resources (images, fonts, iframes) that either transit through the CDN or add to the overall page load.

Finally, files uploaded to the CMS or the assets panel (PDFs, documents, icons) also count toward bandwidth every time they're downloaded by a visitor.

‍

How to find out what's consuming

Before optimizing, you need to identify where the bandwidth is going. Several approaches are available, from simplest to most precise.

Webflow statistics

In your project settings, Webflow provides an overview of your monthly bandwidth consumption. It's a useful global indicator to see if you're approaching your limit, but it doesn't break down which assets or pages are consuming the most.

Browser developer tools

The "Network" tab in developer tools (Chrome DevTools, Firefox) lets you see, page by page, the weight of every loaded resource. Sort by size to immediately identify the heaviest files. This is the most direct method for a quick audit.

Google PageSpeed Insights and WebPageTest

These tools analyze how a page loads and identify resources that slow down the site. They don't directly measure bandwidth consumption, but they flag unoptimized images, blocking scripts, and unnecessarily heavy resources.

The BeBranded Bandwidth Optimizer

We built a free tool, the Bandwidth Optimizer, that helps you quickly identify the assets consuming the most bandwidth on your Webflow site and prioritize the fixes. It's a good starting point to know where to focus your efforts before opening the Designer.

‍

The 80/20 to reduce bandwidth

Not all optimizations are created equal. Some take 10 minutes and cut consumption in half. Others take hours for marginal gains. Here are the levers ranked by decreasing impact.

Images: the first lever (and the most cost-effective)

Images often account for 60 to 80% of a site's bandwidth. This is the first place to act.

Format. Webflow automatically converts images to WebP for compatible browsers, which significantly reduces weight compared to standard JPEG or PNG. But this conversion doesn't compensate for a poorly optimized source file. If you upload a 4,000 px wide image at maximum quality, even WebP conversion won't make it light enough.

Dimensions. Every image should be uploaded at the dimensions actually needed. If your column is 800 px wide, a 1,600 px image (for Retina screens) is more than enough. Uploading a 4,000 px image to display it at 800 px means transferring unnecessary weight on every visit.

Compression. Compress your images before uploading them to Webflow. Tools like TinyPNG, Squoosh, or ImageOptim can reduce weight by 50 to 80% with no visible loss. This is the fastest and most effective optimization.

Lazy loading. Webflow offers native lazy loading on images. Enable it for all images that aren't visible on the first screen (above the fold). This prevents loading images that the visitor may never see if they don't scroll to the bottom.

Background images. Images set as backgrounds via CSS styling in Webflow don't always benefit from lazy loading or automatic WebP conversion. If you use heavy background images, consider replacing them with standard image elements positioned absolutely, or manually compress them to WebP before uploading.

Videos: the most common trap

Uploading videos directly to Webflow is convenient, but it's often the cause of a bandwidth explosion. A 20 MB video on autoplay on the homepage, loaded by every visitor, can single-handedly consume a massive share of your monthly allocation.

The rule is simple. For short, lightweight videos (a few seconds, loop format, under 2 to 3 MB), native upload is acceptable. For everything else, host your videos on a third-party platform (YouTube, Vimeo, Wistia, Bunny.net or our tool Embed Videos) and embed them. The visitor then loads the video from the third-party service's servers, not from your Webflow bandwidth.

Watch out for background videos too. If you have a video playing automatically behind a section, check its weight. Beyond 2 to 3 MB, it's a major consumption item. Consider replacing it with an optimized image with a subtle animation effect, or compressing it heavily (reduced resolution, low bitrate, short duration).

Fonts: an often underestimated item

Each loaded font variant adds 20 to 100 KB to every page load. On a site using a font with 5 or 6 variants (light, regular, medium, semi-bold, bold, italic), that can represent 300 to 600 KB per page, transferred on every visit.

The first optimization is to limit the number of variants to what's strictly necessary. In most cases, two to three variants are enough: regular, bold, and optionally a third one (italic or medium).

The second is to use the WOFF2 format, which is the lightest. If you use custom fonts uploaded to Webflow, make sure they're in WOFF2. Older formats (TTF, OTF, WOFF1) are significantly heavier.

If your site is in a single language, you can also use subsets (character subsets) that only contain the glyphs you need, which further reduces the font file weight. Tools like Google Fonts or Fontsquirrel offer this option.

Scripts: clean up, defer, remove

Third-party scripts accumulate over time. A Facebook pixel added six months ago, a chat widget tested then abandoned, an A/B testing tool no one checks the results of. Each script adds weight and additional requests.

Take an inventory of all scripts in your project settings (head code, footer code) and on individual pages. For each script, ask the question: is this still being used? If the answer is no, remove it.

For necessary scripts, check if they can be loaded in "defer" or "async" mode to avoid blocking page rendering. In Webflow, scripts added in the footer code naturally load after the main content.

CMS and pages: structural weight

On sites with an active CMS (blog, resources, case studies), every article is a page served with all its assets. A blog with 100 articles and unoptimized images can represent significant consumption, especially if the blog generates SEO traffic.

Make sure CMS article images are optimized (format, dimensions, compression). If your blog lists articles with thumbnails, make sure the thumbnails are lightweight dedicated images and not full-size images displayed small.

On very long collection pages (lists of 50 to 100 items), pagination or "load more" can reduce bandwidth by only loading what's requested, rather than everything at once.

Webflow cleanup: assets, styles, interactions

Webflow accumulates unused assets over time (old images, old files, old logo versions). These assets don't consume bandwidth as long as they're not referenced in a page, but they clutter the project and can cause confusion.

In Webflow's Assets panel, you can identify unused files and delete them. Similarly, unused CSS styles and interactions add weight to the site's global CSS/JS files. Webflow lets you clean up orphan styles via the "Clean up" tool in the Style Manager.

This cleanup doesn't have as strong an impact as optimizing images or videos, but it helps keep the project clean and lightweight over time.

‍

Quick audit checklist

Here are the points to check first for a quick bandwidth audit. If you can check most of these, your site is already well optimized. If not, each unchecked item is a potential immediate gain.

‍To identify precisely which assets weigh the most on your site, the BeBranded Bandwidth Optimizer gives you a clear, prioritized view of the fixes to apply.

‍

Estimating your bandwidth and avoiding surprises

Estimating your bandwidth consumption isn't an exact science, but a reasonable estimate lets you anticipate overages and choose the right plan.

The simple method

The basic formula is: monthly bandwidth = average page weight x number of monthly page views.

To get the average page weight, open your browser's DevTools (Network tab), load your homepage, and note the total transferred. Do the same for 3 to 5 representative pages (service page, blog article, contact page). Calculate the average.

The number of monthly page views is available in your analytics tool (Google Analytics, Plausible, Fathom) or in Webflow's statistics.

Two real cases

SMB brochure site (5 to 10 pages). If your average page weight is 1.5 MB and you have 5,000 page views per month, your consumption is about 7.5 GB per month. That's comfortable on most Webflow plans. But if your images aren't optimized and the average weight rises to 4 MB, you jump to 20 GB per month, which can approach or exceed some plan limits.

SaaS marketing site with an active blog (50 to 100 articles). If your blog generates 30,000 page views per month with an average page weight of 2 MB, you consume about 60 GB per month. Add traffic to the marketing pages and resources, and you can reach 80 to 100 GB. In this case, optimizing blog images (thumbnails, article images) has a direct, measurable impact on the bill.

Planning for growth

If your traffic increases (which is the goal), your bandwidth increases proportionally. An optimization done today on page weight has a compounding effect: the more traffic grows, the more significant the bandwidth savings. Investing half a day on optimization now could save you a plan upgrade in six months.

‍

When to upgrade vs optimize

The question comes up often: should you optimize the site or simply upgrade to a higher plan?

The answer depends on the gap between your current consumption and your plan's limit, and on the remaining optimization potential.

If your site is already well optimized (compressed images, no heavy native video, limited fonts, cleaned-up scripts) and your traffic is growing naturally, upgrading is the right call. It's a sign of growth, not a problem.

If your site is consuming a lot of bandwidth with moderate traffic, it's a sign that optimizations are possible and will have an immediate impact. In this case, optimizing first is almost always more cost-effective than paying for a higher plan to compensate for poorly managed assets.

The decision logic is as follows. Start with a quick audit (the checklist above or the Bandwidth Optimizer). If the audit reveals significant gains (uncompressed images, heavy native videos, unused fonts), optimize first. If the audit shows an already clean site with high consumption driven by traffic, the upgrade is justified.

Don't pay for a higher plan to compensate for an optimization problem. And don't waste time micro-optimizing if the real cause is healthy traffic growth.

‍

Conclusion: action plan

Here's a tiered action plan, depending on the time you can invest.

In 30 minutes. Open DevTools on your 3 most visited pages. Identify images over 500 KB. Compress them with TinyPNG or Squoosh and re-upload them to Webflow. Enable lazy loading on below-the-fold images. If a heavy video is uploaded natively, replace it with a YouTube or Vimeo embed.

In 2 hours. Run the full audit using the checklist above. Remove unused third-party scripts. Reduce font variants. Clean up unused assets and orphan styles. Check background images and replace the heaviest ones.

In one day. Go through all images on the site and in the CMS. Set up a publishing process (target dimensions, systematic compression, recommended format) so every new piece of content is optimized from upload. Document the rules for the team. Estimate your monthly bandwidth and compare it to your current plan to anticipate the coming months.

Bandwidth optimization isn't a one-time task. It's a habit to build into day-to-day site management. The biggest gains come in just a few hours, and good publishing practices prevent consumption from creeping back up.

If you want to know exactly what's weighing down your site, start with the Bandwidth Optimizer. And if you'd like a full audit of your Webflow site (performance, bandwidth, SEO), we're happy to discuss.