Webflow is great. You can do so many things with it. But sometimes, you do too much and get a bandwidth limit warning (or worse). Here's how to fix or even prevent Webflow bandwidth issues.
I see it every week on the Webflow subreddit. Website owners are looking for help when they receive an unexpected bandwidth invoice from Webflow or have a website that performs poorly without knowing why.
It happens all the time. You built what you thought was a simple website, but suddenly you're facing bandwidth charges or watching potential customers leave your site because it loads too slowly.
I've helped several clients build lightweight Webflow websites that look great and perform even better. Here's how that works.
Based on what I've seen in Webflow for my clients and my own websites, there are three main reasons your Webflow site might be going through your bandwidth as fast as it is. If we were to look at your website, one (or more) of these three would likely be responsible.
First, unoptimized media. Large images, video files, and GIFs that haven't been compressed or sized properly. I've seen high-resolution photos get uploaded to Webflow straight from someone's phone. And because of it, it's probably 5MB when it should be under 250KB.
The second category is all about CSS files. These files determine how your website looks. Every time you create a new style class instead of using an existing one, you're adding lines to your CSS file. At some point, the file becomes bloated and heavy, which contributes to your Webflow bandwidth issues.
And finally, third-party plugins and external scripts. An example would be an external JavaScript framework for unique animations.
While less common on Webflow than other platforms, these can still add significant weight to your site if you're not careful about what you're loading.
The best way to avoid Webflow bandwidth issues is to design with performance in mind from day one. If you hire Webflow help, hire a designer who knows how to keep a website light and nimble. Or if you're building in Webflow yourself, keep lightweight content (optimized images and reusable CSS classes) in mind from day one.
They say it's better to prevent than to cure, and that really applies here. When you get that bandwidth notification from Webflow, it usually means it's too late for a quick and easy fix.
If that's the case for you, read on. I'll discuss the plan on how to fix these issues next.
We've discussed the main categories of Webflow bandwidth usage, so now, it is time to tackle them. Let's start with the most common issue: unoptimised images and media. We'll look at the rest after.
The first thing you can do is to use Webflow's built-in responsive image feature. When you upload an image, you automatically get multiple sizes for each breakpoint.
This will save a lot of bandwidth, but only when used correctly. If you upload a large file, Webflow can only do so much on its own. Keep it small!
Determining the size of an image is all about context. You do not need to upload a 2000px image for a 96px profile picture, for example. In that case, a 96px or 192px upload (for high-res monitors) is just fine.
The Webflow University has a good resource on image resolution for more information.
Oh, and to help you a bit more, I want to mention a few things on file formats. Here's what to pick for different visual types.
For CSS cleanup, use Webflow's "clean up" feature from the style manager. It removes unused CSS classes that add unnecessary weight to your stylesheets.
You can safely remove these styles. Webflow checks if you use the styles and only removes them when not in use. And in the off chance it does go wrong, you can always load a backup. This has never happened to me before, but it is always good to mention.
Now that you've cleaned up your CSS, I recommend consistency with your styling moving forward. Instead of creating new classes for similar elements, reuse existing ones. This keeps your CSS file lean and your design system organized.
For scripts and plugins, reconsider your current selection. Are you loading analytics scripts that you don't check? Remove or replace it with something more lightweight. The fancy external framework for animations? There's usually a more user-friendly and lightweight option available within Webflow.
The list can go on depending on your current setup. I'm very confident that there's something to clean up on any website!
The tips I mentioned previously help to clean up any damage that's been done already. But preventing that damage in the first place is way better. Here's how I would do it if I were to start a new Webflow website.
Let's start yet again with the visuals. Before uploading any image, ask yourself what the largest display size for this image will be and resize that image before you upload it. Using WebP for every photo will reduce the file size, too.
For icons, backgrounds, and any visuals without 'real elements', use an SVG. SVGs are vector-based and very lightweight because of it.
As for the CSS of your Webflow website, establish a consistent design system. Create reusable classes for common elements like buttons, text styles, and spacing. This keeps your CSS lean and makes your site easier to maintain.
For the Webflow websites I work on, I like a 'utility class' approach. Utility classes are simple classes that each have one property. It is super scalable and hard to bloat. This approach is used for TailwindCSS and Bootstrap, too.
The above is all about building, but regular checks and monitoring are just as important. Tools like Google PageSpeed Insights or GTmetrix give you a clear score and show a list of things you can improve on your website.
I've used both (for free), and they've been very helpful for my websites. Keep in mind that GTmetrix's free version only shows test results for desktop. The downside of PageSpeed Insights compared to GTMetrix is that it simulates your website.
Also, do not aim for a 90-100 score. In almost any case, it is not worth it to go that far. 75 or up is good enough!
By the way, Webflow also allows you to see your bandwidth usage and how it is divided over your website. Reviewing that tool every now and then is a smart thing to do, too.
If you're working on an existing site that's already having bandwidth issues, sometimes the most cost-effective solution is bringing in someone to clean up your website. A designer experienced in Webflow optimization can often identify and fix issues much faster than you trying to figure it out on your own.
This could be extra helpful when you're running a website with complex animations or interactions. The cost of professional optimization by a designer with UX knowledge often pays for itself in reduced hosting (bandwidth) costs and improved conversion rates for your business.
Optimising your Webflow website is a lower priority for lots of people. Done is better than perfect. And because of it, when the dreaded bandwidth notification (and invoice…) comes in, many Webflow website owners are surprised.
To prevent this from happening, focus on proper image optimization, clean CSS, and minimal external scripts. When you work on an existing Webflow website, the above applies too. You just have to do more cleanup work to get back up to speed.
Investing in a lightweight website that performs will pay for itself in no time. Your visitors will like the snappy and professional-looking website. They will be more likely to sign up or make a purchase from your website.