How can you reduce the bandwidth consumption of your Webflow project?

Webflow has recently updated its pricing system. This has a direct impact on your site's bandwidth management. The changes include adjustments to bandwidth limits, including a reduction for certain plans, making it more crucial than ever to optimize your Webflow project.

Find out more about the changes to Webflow's plans in July 2024.

With bandwidth limits now lowered for Basic, CMS and Business plans, it's essential to maximize your site's optimization to avoid additional costs and maintain optimal performance.

In this article, we'll guide you through some practical strategies for reducing the bandwidth consumption of your Webflow project.

What you need to know about bandwidth

What's bandwidth?

Bandwidth, in the context of websites, represents the amount of data transferred between your site and visitors over a given period of time.

Measured in gigabytes (GB ) or terabytes (TB ), bandwidth is essential in determining a site's ability to handle traffic. The more visitors your site has, and the more content these visitors download or view, the higher the bandwidth used.

What data is transferred?

When we talk about data transferred between the site and the surfer, we are talking about :

• HTML files: The HTML code of web pages that structures the content and layout of your site.
• CSS style sheets: The CSS files that determine the look and feel of your website.
• JavaScript scripts: JavaScript files that add interactive and dynamic functionalities to your site.
• Images and graphics: All image files (JPEG, PNG, GIF, WebP, etc.) used for the visual content of your site.
• Videos and audios: Multimedia files embedded or streamed on your site.
• File downloads: Any downloadable document or file offered on your site (PDF, zip files, etc.).
• Web fonts: Font files downloaded to display text in your site's specific styles.
• Dynamic data: AJAX requests and responses to load content dynamically without reloading the entire page.
• APIs and integrations: Data exchanged with third-party services via APIs integrated into your site.

How is bandwidth calculated?

Total bandwidth is the sum of all this data transferred between your server and users' browsers. For example:

• Page loading: Each time a web page is visited, HTML, CSS and JavaScript files and associated media are downloaded.
• File downloads: Each direct file download by users increases bandwidth consumption.
• Streaming media: Streaming video and audio consumes bandwidth continuously.
• Dynamic interactions: Data exchanges via AJAX calls or other dynamic interactions also add to bandwidth.

Example of bandwidth calculation :

1. Main page: The size of your site's main page is 2 MB (including HTML, CSS, JavaScript, and images).
2. Number of visitors: Your site receives 1,000 visitors a day.
3. File downloads: Each visitor downloads a 5 MB file.
4. Daily calculation :
   • Page load data = 2 MB * 1,000 visitors = 2,000 MB (or 2 GB)
   • Data for file downloads = 5 MB * 1,000 visitors = 5,000 MB (or 5 GB)
   • Total daily bandwidth = 2 GB + 5 GB = 7 GB

So, for this site, the bandwidth used each day would be 7 GB. Over a month (30 days), this would represent 210 GB of bandwidth.

Why reduce bandwidth consumption?

Reducing bandwidth consumption has two major advantages:

• Lower costs: less bandwidth used means potentially lower hosting costs.
• Improved site performance: An optimized site with low bandwidth consumption loads faster, offering a better user experience.

It's important to understand this principle so that you can optimize your site and avoid unexpected costs.

Methods for reducing bandwidth consumption

To optimize your Webflow site's bandwidth consumption, it's important to implement various strategies that reduce the volume of data transferred between your site and its visitors. Here are a few concrete ways to achieve this:

Image optimisation

Choosing the right image format

Images often account for a large proportion of the data transferred to a website. Using the right format can make a big difference:

• JPEG: Ideal for photographs and images with lots of color.
• PNG: Used for images requiring transparency.
• WebP: A modern format offering superior compression while retaining good image quality.
• SVG: For vector illustrations, no loss of quality with minimum weight.

In 90% of cases, we recommend converting your images to WebP format for optimum performance.

Image compression

Compressing images without sacrificing quality is crucial:

• Use tools like Squoosh or Webflow's native compression functionality to compress your images.
• Avoid using images with a higher resolution than necessary for display on the site.

Using lazy loading

Lazy loading allows images to be loaded only when the user scrolls to them:

• Enable lazy loading in Webflow to avoid loading all images at once, which reduces initial bandwidth.

Please note that if you set background images, they will consume more bandwidth.

Minifying CSS and JavaScript files

What is minification?

Minification consists in removing all unnecessary characters from CSS and JavaScript files without affecting their functionality (such as spaces, comments, etc.).

How to minimize CSS and JavaScript files in Webflow

Webflow offers an integrated option for minifying your CSS and JavaScript files. Make sure this option is enabled in your project settings.

Using efficient web fonts

Limit the number of fonts and variations

Excessive use of different fonts and their variations can increase bandwidth consumption:

• Limit yourself to a few font styles for your entire site.
• Use web fonts wisely and avoid loading unused font styles.

Choosing the right font format

Like the Webp format for images, the WOFF2 format for fonts enables font compression for improved performance.

Reduce redirects

Why are redirects problematic?

Redirects add extra HTTP requests, increasing bandwidth consumption and loading times.

How to minimize redirects

• Check your site regularly to identify and eliminate unnecessary redirects.
• Use tools like Google PageSpeed Insights to detect redirects and get recommendations for minimizing them.

Other quick wins

Here is a list of other things you can do to reduce bandwidth usage in Webflow :

• Reduce the use of video backgrounds
• Delete unused styles
• Delete unused interactions
• Delete files you no longer use from your assets

For further tips, you can also read our article onimproving your web page loading times.

Webflow bandwidth FAQ

What is the average bandwidth usage on a showcase site, and how can you anticipate it?

Average bandwidth usage on a showcase site depends on a number of factors, such as the number of visitors, multimedia content (images, videos), and interactions on the site. In general, a well-optimized showcase site can consume between 1 and 5 Gb of bandwidth per month for moderate traffic.

To anticipate this consumption :

• Estimate your expected monthly traffic and multiply it by an estimate of the average weight of your pages per visitor to determine your bandwidth requirements.
• Continuously optimize images, videos and other multimedia content to reduce bandwidth consumption.

By following these steps, you can better plan and manage the bandwidth needed for your Webflow showcase site.

For example, the Digidop site, with over 1000 pages and an estimated monthly traffic of 10K per month, consumes 60Gb of bandwidth. There's plenty of room up to the 100Gb limit of our plan.

How do I know how much bandwidth I'm using on my Webflow project?

To find out how much bandwidth your Webflow project uses, follow these steps:

• Log in to your Webflow account.
• Access your project dashboard.
• Consult the statistics or analysis section to see the bandwidth data used over a given period.

How can I identify what is taking up the most bandwidth on my Webflow site?

To identify what consumes the most bandwidth on your Webflow site, use the following integrated or third-party tools:

• Webflow analysis tools: Check your site statistics in Webflow to see which pages or content types are using the most bandwidth.
• Google Analytics: Use Google Analytics to obtain detailed information on your site's traffic and bandwidth consumption.
• Performance testing tools: Use tools such as GTmetrix, Pingdom or PageSpeed Insights to identify specific aspects of your site that could be optimized to reduce bandwidth consumption.

What happens if I exceed my plan's bandwidth consumption?

First of all, if you exceed your plan's bandwidth consumption, Webflow will notify you by e-mail. They will not shut down your site.

Then, if you really exceed the bandwidth consumption allocated by your Webflow plan, several scenarios can occur:

• Additional charges: You may be billed for excess bandwidth usage.
• Temporary restrictions: Webflow may temporarily restrict the availability of your site until bandwidth consumption returns to expected limits.
• Plan upgrades: You may need to upgrade to a higher bandwidth plan to avoid service interruptions.

How can I increase my bandwidth limit on my project?

To increase the bandwidth consumption of your Webflow project, consider the following options:

• Plan upgrade: Upgrade to a higher bandwidth plan.
• Using add-ons: Explore the add-ons available to specifically increase bandwidth or other resources such as CMS items on the Business plan.

Conclusion

In short, understanding and effectively managing bandwidth is crucial to optimizing the performance of your Webflow site while avoiding unexpected costs.

At Digidop, our specialized Webflow agency can help you reduce your bandwidth consumption, improving performance while minimizing costs. Contact us today to find out how we can help you get the most out of your Webflow site.