.png)
Table of contents
.avif)
If you're running a marketing website on Webflow, bandwidth is not just a technical detail in the background. As traffic grows and the site fills up with images, videos, and CMS content, Webflow bandwidth usage can increase surprisingly fast and lead to unexpected hosting costs or plan upgrades. Most teams only notice it when they get close to Webflow bandwidth limits or when a campaign suddenly pushes the site beyond its normal usage.
The good news is that bandwidth problems are usually not caused by traffic alone. In most cases, they come from the way assets are loaded, hosted, and structured across the site. Understanding how Webflow bandwidth works, and how to reduce bandwidth usage, helps you avoid unnecessary hosting upgrades, keep the site lighter, and make better decisions as the project grows.
Webflow bandwidth is the total amount of data transferred from your website to visitors each month. Every time someone opens a page, their browser has to download the files that make that page work. That includes HTML, CSS, JavaScript, images, fonts, videos, and any other assets used on the page.
Together, those files create the page weight, and every request adds to your monthly bandwidth usage. Webflow tracks bandwidth per site, per month. If your project goes over the limit for two consecutive months, Webflow may upgrade your hosting plan automatically or apply overage fees. Bandwidth starts to matter as soon as your site grows. More traffic, more content, and more campaigns usually mean more assets being loaded and more data being transferred.
Webflow bandwidth limits depend on the hosting plan you’re on. For most projects, the limits look like this:
Plan Bandwidth
Basic 10 GB
CMS 50 GB
Business 100 GB
Enterprise Custom
If your site regularly serves heavy media files, those Webflow bandwidth limits can be reached much faster than expected. At first glance, these numbers can look fairly generous. In practice, they disappear faster than most teams expect. A typical landing page can easily weigh 3–5 MB once you include large images, fonts, and scripts.
Multiply that by a few thousand visits, and the numbers add up quickly. Bandwidth often becomes a problem during campaign launches, content pushes, or sudden traffic spikes. The site may look fine on the surface, but the hosting limits get much closer once the project starts growing.
In most Webflow projects, bandwidth is usually consumed by a relatively small group of heavy assets. The most common ones are:
None of these things are bad on their own. Rich visuals, motion, and downloadable content can make a website much stronger. The issue usually starts when those assets are uploaded without much optimization or when they keep piling up over time. Before trying to reduce bandwidth, it’s worth understanding which files are actually responsible for the usage. In many cases, a small number of assets are doing most of the damage.
Webflow gives you basic bandwidth data directly inside the project settings.
In Project Settings → Site Usage, you can see how much bandwidth your project is using and which assets are responsible for most of it.
In many cases, the results follow the usual 80/20 pattern: a small number of files generate most of the bandwidth usage. That often means a hero video, oversized CMS images, or downloadable files hosted inside the project. Once you know which assets are the heaviest, it becomes much easier to decide what to compress, remove, or move outside Webflow.
Every page load pulls multiple resources from Webflow servers: images, fonts, scripts, videos, and stylesheets. All of them add to your bandwidth usage. In practice, reducing bandwidth comes down to two things: loading fewer resources and making those resources smaller. Most of the gains usually come from optimizing images, fonts, videos, and the overall project structure.
Images are usually the heaviest files loaded by the browser. Poorly optimized visuals can easily weigh several megabytes, and when they appear across multiple pages or CMS items, they get downloaded again and again. A few simple practices usually make the biggest difference:
Images should usually be exported at roughly 2× the display size to keep them sharp on high-resolution screens without making them heavier than necessary. For example:
Uploading images that are much larger than needed increases page weight and directly increases bandwidth usage.
Fonts are easy to overlook, but they can quietly add a lot of weight to a website.Since font files load across the whole site, even small font optimizations can reduce overall Webflow bandwidth usage. Each font variant is loaded as a separate file. If your project only uses a few weights, for example 400, 500, and 700, there’s no reason to load anything beyond that.
It’s also worth cleaning up unused glyphs. Many font files include support for multiple languages, and if your site is only in English, you probably don’t need Arabic, Chinese, or Cyrillic characters sitting in the file and increasing its size. Finally, fonts should be uploaded in WOFF2 format whenever possible. It’s much smaller than older formats and has become the standard for web use.
Videos can burn through bandwidth very quickly, especially when they’re hosted directly in Webflow. In most cases, embedding videos from YouTube or Vimeo is the better option. The file is then delivered from their infrastructure instead of your Webflow hosting, which helps keep bandwidth usage under control.
If you need more control over playback, branding, or where the files are stored, videos can also be hosted externally using services like Cloudflare R2, AWS S3, or Vidzflow. That setup usually makes more sense for heavier video usage or projects that are already close to their bandwidth limits.
Bandwidth optimization is not only about media files. The structure of the Webflow project matters too. Over time, most projects collect a lot of unnecessary weight: old pages, unused classes, outdated interactions, hidden elements, and bits of code that nobody touches anymore. Cleaning that up helps reduce unnecessary requests and keeps the project easier to maintain.
Typical cleanup tasks include:
It also helps to build the project around a scalable style system such as MAST. That makes it easier to reuse patterns, avoid duplicated styles, and keep the structure from getting messy as the site grows. On top of that, enabling HTML, CSS, and JavaScript minification in Webflow settings reduces the size of the files delivered to the browser.
Hosting large files outside Webflow is one of the most effective ways to reduce bandwidth usage. Services like Cloudflare R2 or AWS S3 let you serve images, videos, PDFs, and other heavy files from external infrastructure instead of Webflow hosting. That means those assets do not count toward your Webflow bandwidth limits. It is mostly helpful for websites with large media libraries, downloadable resources, or high-traffic pages. If your project regularly serves heavy assets, moving them outside Webflow can free up a big part of your bandwidth allowance without changing the front-end experience.
If you want to understand what is actually loading on a page, tools like Pingdom are very useful. They show every resource requested during page load and make it easier to spot the heaviest files. Inside Webflow, the Site Usage dashboard is also worth checking regularly. It helps you see which assets consume the most bandwidth, so you can decide what to compress, replace, or move outside the project.
Optimization helps, but it is not always the right long-term answer. If your site keeps reaching its bandwidth limits even after images, videos, fonts, and other heavy assets have already been cleaned up, it may simply mean the project has grown. More traffic, more campaigns, and more content naturally increase bandwidth usage.
At that point, upgrading the hosting plan can be the simpler and more sensible option. And bandwidth is not the only reason to upgrade. For larger teams, Webflow Enterprise can also make sense because of security, governance, support, and team workflows.
The goal of optimization is not to squeeze every last megabyte out of the site forever. It is to keep the project efficient enough that growth does not turn into unnecessary technical friction.
Many teams only start thinking seriously about bandwidth when their site gets close to the limits of a Webflow plan. Sometimes that does not mean an upgrade is immediately necessary. Better asset optimization, external hosting for large files, and a bit of project cleanup can buy you more room and delay the move to a higher-tier plan. But if the site keeps hitting those limits because of real traffic growth, not because of avoidable bloat, upgrading may simply be the right decision.
In some cases, Enterprise also makes sense before bandwidth becomes a real issue, especially if the team needs more control, support, or security. Optimization should help you stay efficient, not force the marketing team to work around the website.
Before launching campaigns or publishing new content, it’s worth checking:
A quick review like this often helps catch bandwidth issues before they turn into hosting problems.
Understanding Webflow bandwidth limits and how to reduce bandwidth usage helps teams scale their websites without unexpected hosting costs. The good news is that most bandwidth issues can be improved with a few practical changes: lighter images, better video hosting, cleaner fonts, and a more disciplined project structure. In many cases, that is enough to keep bandwidth under control while allowing the site to grow without unnecessary friction.
Share
1
/
4
Webflow bandwidth limits depend on your hosting plan. Basic plans include around 10 GB per month, CMS plans around 50 GB, and Business plans around 100 GB. If your site keeps exceeding those limits, Webflow may require a plan upgrade.
2
/
4
The fastest way to reduce Webflow bandwidth is to optimize images, host videos outside Webflow, remove unused font files, and clean up unnecessary assets. In most projects, a few simple fixes can significantly reduce bandwidth usage.
3
/
4
Yes. Hosting assets on Cloudflare can reduce Webflow bandwidth usage because files like images, videos, and downloads are served outside Webflow hosting. The same applies to AWS or other external storage providers.
4
/
4
The biggest contributors to Webflow bandwidth are usually large images, background videos, font files, Lottie animations, and downloadable resources like PDFs. On most websites, heavy assets consume much more bandwidth than traffic alone.
