How to track down high bandwidth usage

Understanding and reducing bandwidth usage in Framer starts with identifying which assets are being downloaded most by your site visitors. This guide will walk you through how to investigate and optimize your usage effectively.

How bandwidth works in Framer

The bandwidth number in your dashboard doesn’t reflect how much storage a file takes up—it shows how often it’s downloaded by visitors.

For example, if you have a 10 MB asset and 100 visitors load that file, it counts as 1,000 MB (1 GB) of bandwidth.

Investigating with browser DevTools

The fastest way to track down high-bandwidth assets is by using Chrome DevTools (or a similar tool in other browsers).To investigate, follow these steps:

1. Open Chrome DevTools → Network tab.

2. Perform a hard refresh (CMD/CTRL + Shift + R) to simulate a first-time visitor.

3. Look at the Size column to find the largest requests. Tip: Click Size to sort from largest to smallest.

4. Match large files with those listed in the Framer dashboard—file names will match, 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 often contribute significantly to bandwidth usage. This typically includes full-screen or auto-playing videos that haven’t been optimized for the web. High-resolution or uncompressed video files can dramatically increase load sizes for visitors.

• Lossless images or unoptimized formats can also be a factor. While Framer automatically optimizes most images, under certain 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.

• Optimize images by converting PNG screenshots to .png formats that Framer can automatically process. Avoid using lossless formats, and ensure your image resolution is set to “Auto” in the image settings panel to reduce load size.

• Manage custom code by auditing any code overrides or components you’ve added. Look for unnecessary scripts or embedded assets that could be removed. Keep in mind that <script> tags pulling assets from external 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.