Understanding bandwidth usage
Learn what drives bandwidth usage, how to track it, and how to reduce it effectively.
Bandwidth is the total amount of data your site delivers to visitors. Every time someone loads your site, assets such as images, videos, fonts, and code are downloaded to their device. This guide explains how bandwidth works in Framer, how to monitor it, and how to optimize your project to stay within limits.
What drives bandwidth usage
In Framer, bandwidth usage depends on how much data is downloaded by your visitors, not the storage size of your files.
The main contributors are:
Images and media: Full-screen or autoplaying videos, uncompressed or lossless image formats, and high-resolution media are often the largest bandwidth consumers.
Visitors: The more people visit your site, the more your assets are downloaded, increasing total usage.
Fonts and scripts: These are also downloaded per visitor, though typically cached after the first load.
What are Site Modules?
Site Modules are core system-generated files required to run your Framer site. This includes JavaScript modules, HTML files, CMS data, custom code, and other essential dependencies. These count toward your monthly bandwidth usage.
What happens if you exceed your bandwidth limit?
Framer tracks bandwidth on a monthly cycle. If you exceed your plan's limit:
First month: You'll receive an email notification.
Second month: You'll be prompted to upgrade to a plan that supports your usage.
Ongoing overages: Your site may be automatically upgraded or charged an overage fee.
How to track high bandwidth usage
Use the Framer dashboard and browser developer tools to identify bandwidth-heavy assets.
Check the Framer dashboard, it lists top bandwidth contributors by file name.
Open Chrome DevTools → Network tab.
Perform a hard refresh (
CMD/CTRL + Shift + R) to simulate a first-time visit.Sort the Size column to identify large assets.
Match these with the dashboard listings (e.g.,
Cw4grH0hI3nRYQLiC53MUuRL0.mp4).
Common causes of high bandwidth usage
Understanding the typical culprits behind bandwidth spikes can help you narrow down your investigation more efficiently.
Framer-hosted videos, especially full-screen, autoplaying, or unoptimized ones.
Lossless images or unoptimized formats can also be a factor. While Framer automatically optimizes most images, under certain (uncommon) conditions we can still end up with too large images.
Custom code in your project—such as code overrides and code components—can load additional assets. These hidden resources can significantly increase your bandwidth usage if not managed carefully.
Best practices for reducing bandwidth usage
Once you’ve identified the causes, these practical tips can help lower your bandwidth usage and improve site performance.
Optimize videos by uploading a poster image so the video loads only when near the viewport. If you’re using long-form or high-resolution videos, it’s best to host them externally on platforms like YouTube or Vimeo. Try to keep background videos under 30 seconds, especially if they autoplay at full screen. You can find more guidance in this optimization article.
Image resolution set to “Auto”: Ensure your image resolution is set to “Auto” in the image settings panel to keep image sizes as low as possible. Avoid “Auto (Lossless)” unless you see artifacts in the image.
Manage custom code by auditing any code overrides or components you’ve added. Look for unnecessary scripts or embedded assets that could be removed. Worth noting,
<script>tags pulling assets from non-Framer domains do not contribute to your Framer bandwidth.Monitor progress after applying these changes. Bandwidth usage resets on the 1st of every calendar month, so you’ll have a clear window to evaluate whether your optimizations are working.
If you continue to experience high bandwidth usage after following these steps and believe something is wrong, feel free to contact Framer’s support team through our contact page.