Back
How to reduce site Bandwidth in Framer
Nabeel
Founder @ SegmentUI
Framer sites can become heavy over time, especially when you rely on high-res images, videos, and gifs. Reducing bandwidth keeps your site fast and ensures you don’t exceed hosting limits. Here’s a clear breakdown of how to do it effectively.
Check Your Usage Dashboard
Start by visiting the Usage Dashboard under your Framer site settings. This view shows exactly how much bandwidth your site uses daily and which assets are responsible. Look for large items like videos or high-resolution images that occupy most of the space. Knowing where the problem lies helps you focus your optimization efforts effectively. If theres anything to take away from this post, it's this. This covers 95% of the issue.
Replace Native Videos with Hosted Ones
Videos are usually the single biggest cause of excessive bandwidth. Framer serves uploaded videos at their full resolution, even if users view them on smaller screens. Instead of uploading directly, use video hosting platforms that handle compression and adaptive streaming automatically. Good options include YouTube, Vimeo, Mux, and Cloudflare Stream.
Embed the video in Framer using the YouTube or Vimeo component instead of adding it as a native file. This way, streaming platforms take care of playback quality and buffering, while Framer only handles the lightweight embed. Also, avoid autoplay, use static thumbnail posters, and keep loops short.
Use Vector Graphics Wherever Possible
Replace raster-based assets like PNG or JPG icons with SVGs. Vector files are crisp, small, and resolution-independent. You can drag SVGs directly into Framer to replace icons, logos, or illustrations. They typically weigh just a few kilobytes and look perfect on every screen size. Only use raster images when absolutely necessary, such as for photos or texture backgrounds. This includes backgrounds. Use fills, angles and blurs to create backgrounds rather than images.
Reduce Noise and Textural Effects
Noisy or grainy backgrounds look stylish but come at a cost. They do not compress well and increase image size significantly. Replace them with clean gradients, flat fills, or subtle lighting effects. A simple gradient background often loads 80 percent faster than a textured one. Clean visuals not only improve performance but also enhance clarity in your design.
Use Simpler and Lighter Images
Highly detailed or picturesque photographs require more data to display. Whenever possible, choose minimal or abstract visuals that are easier to compress. If you must use photos, optimize them before uploading. Tools like TinyPNG, Squoosh, and CompressJPEG can cut image size dramatically without visible quality loss. Framer already compresses images but this could add another layer of compression. Consider slightly lossy resolutions if your usecase allows for it.
For even better performance, host your images externally through Cloudinary, ImageKit.io, or Uploadcare. These platforms automatically compress and deliver optimized images via global CDNs. You can then reference them through Framer’s external image URL field instead of uploading large files directly.
Set Images to Lower Resolution
Framer allows you to control image delivery resolution. In the image settings panel, switch to Small/Medium for larger images. You can also use auto for the smaller images. This ensures that Framer only serves device-appropriate versions. A mobile user will get a smaller file, while desktop users will receive a sharper one. Avoid using full resolution unless the image must display at maximum clarity. This small adjustment can save several megabytes per page.
Implement Lazy Loading
Well technically its not lazy loading but you can load elements only when you scroll to them. This method prevents downloading media that is not immediately visible. In Framer, this can be simulated through scroll-based triggers or appear animations that reveal components only when needed. Lazy loading improves both first-load performance and total bandwidth efficiency.
Optimize Font Usage
This isn't a big value add but fonts can silently contribute to data loads. Each weight or style adds an additional file. Limit yourself to one or two typefaces with minimal weights. Whenever possible, use Google Fonts, which are already CDN-optimized and cached. If using custom fonts, upload them in WOFF2 format. This format is more compressed and supported by all modern browsers.
Simplify Components and Embeds
Some Framer components include large hidden images or embedded libraries. Review each component carefully and remove unnecessary layers or scripts. Avoid heavy third-party embeds such as live social feeds or full maps on every page. Use screenshots or static placeholders where possible. Keeping components lean ensures that every page only loads what is absolutely necessary.
Use Lottie Animations Instead of GIFs
GIFs look simple but consume far more bandwidth than modern animation formats. Replace them with Lottie animations, which are vector-based and extremely lightweight. Lottie files are often 80 to 90 percent smaller than GIFs and remain sharp on any screen. You can import them into Framer with the Lottie plugin.
