.avif)
July 1, 2025
Yes, you read that right. One of my Webflow projects was consuming 2.3 terabytes of bandwidth every month. That’s 2,300 gigabytes.
After some smart tweaks and best practices, I reduced that number to just 200 MB without removing any key content or features.
In this post, I’ll walk you through:
Problem: Hidden Performance Killers
The client’s site looked great on the surface—clean layout, optimized fonts, and everything “seemed” to be working as it should. But under the hood, there were serious problems
I did a full audit using tools like Google PageSpeed Insights, GTmetrix, and Webflow’s own Asset Manager, and what I found was shocking.
Here’s what was secretly eating up all that bandwidth:
Main images and background photos were 4–10 MB each
Images were uploaded at 3000 pixels wide and served uncompressed
Lots of .png files were used when .jpg or .webp would be much smaller
2.Autoplaying background videos
3 separate sections had autoplaying HD videos as backgrounds
No lazy loading or fallback loading
Videos were looping and loading even on mobile
3.No lazy loading
Every image and video on the page was loading at once, even if they were far below the fold
4.Unchecked external embeds
Embeds from YouTube and Vimeo were automatically loaded heavy players (even if they weren’t used)
5.Excessive Lottie usage and interaction
Lottie animations were uncompressed .json files ranging from 3MB to 10MB
I used TinyPNG and Squoosh to compress all images and re-export them in .webp or compressed .jpg format.
Reduced image sizes from 5MB+ to under 200KB
Resized images based on their display size in Webflow (e.g. no 3000px wide images in a 500px frame)
Result: ~90% size savings per image
Video backgrounds replaced with poster images
For non-critical sections:
Removed auto-playing background videos
Replaced with compressed poster images that load instantly
Where video had to be used:
Videos converted to .webm format (lightweight and browser-friendly)
Lazy loading only when they entered the viewport
Result: 700MB+ saved per session
Webflow now supports native loading="lazy" on images. I manually applied this to:
All <img> elements
All Lottie animations
All custom <iframe> embed
Result: Media is loaded only when needed, reducing the initial payload
Instead of loading the entire YouTube player, I:
Used a thumbnail (via https://img.youtube.com)
Added a “play” button
Only loaded the actual iframe on click
Result: 1.2 MB reduction per embed on initial load
Lottie is powerful, but too many animations without optimization can drain bandwidth.
Compressed and simplified Lottie files in LottieFiles
Replaced decorative animations with subtle Webflow interactions where possible
Lazily loaded interactive Lotties
Result: Reduced ~5MB+ of animation data from page load
By setting width and height for each image in Webflow:
Browsers allocated space before loading images
Improved CLS (Cumulative Layout Shift) performance
Images rendered more efficiently
Result: Visual stability + performance improvement
Webflow automatically generates multiple image sizes. I selectively disabled responsive image generation where it wasn't needed (e.g. logos, icons).
Result: No loading of unused image variants
After implementing all of the above, here’s what changed:
Performance isn’t just about SEO or tech scores it’s about real people accessing your site on slow mobile connections, rural internet, or data-limited plans. Reducing your bandwidth can mean:
If your Webflow site is slow or using too much data, chances are you’re just a few smart optimizations away from a massive improvement.