How to reduce bandwidth usage in your Webflow projects

Webflow recently introduced new bandwidth limits, which are currently 4x lower than before. This inspired me to share some tips on reducing bandwidth usage on Webflow projects, thus avoiding the need for extra credits or migrating to an enterprise plan.

In simple terms, bandwidth is the number of visits multiplied by the weight of loaded resources (like page weight) over a certain period (Webflow measures it monthly). To optimize bandwidth, we need to focus on these factors.

While many companies use page views as a success metric, it's not always a reliable indicator. Not all traffic is quality traffic. Here are a few tips:

• Discontinue ineffective campaigns that bring large amounts of traffic but no leads.
• Target your audience more specifically. Narrow down your audience for better quality traffic.

Every page load requests many resources from the Webflow server. To reduce bandwidth usage, we should minimize these requests and make the requested files smaller. Here's how:

Images:

Images are usually the heaviest files loaded by the browser. To optimize them:

• Use the right dimensions. Images should be 2x larger than the size you want to use on the frontend.
• Ensure images are lazy-loaded - Webflow does this by default, but there might be cases someone changed the load type without any reason
• Use proper image formats. Use .svg for vectors and webP for bitmaps. Optimize these files using tools like tinypng.com, squoosh.app, or vecta.io/nano.
• Host heavier images outside of Webflow. I recommend Cloudflare R2 or AWS S3
• Merge images into one file where possible.

Fonts:

• Remove unused fonts. Each font variant is a separate file, so if you're only using 400, 500, 700, there's no need to load different font types,
• Optimize fonts by removing unused glyphs. If your website is in English, you won’t need arabic or chinese alphabets,
• Convert your fonts to WOFF2 before uploading.

Videos:

• Embedding videos from Vimeo or YouTube is better than hosting them on Webflow,
• Host videos outside of Webflow. Cloudflare R2 or AWS S3 are good options. Vidzflow also looks promising for less technical users.

Code optimization:

• Remove draft pages, unused components, unused CSS & interactions, hidden elements, and commented code,
• Build your project based on a scalable style guide, like MAST,
• Reuse interactions by using class triggers,
• Minify your code.

• Use tools like Pingdom to identify the heaviest resource types and where they are hosted.
• Find the heaviest assets in your Webflow dashboard and consider optimizing or removing them.