Framer site speed best practices
Framer automatically applies multiple optimizations to keep sites fast – but it can’t figure out everything. If your website is not loading as fast as you want it to, check the suggestions below.
Images
You don’t have to worry about converting images to WebP or AVIF manually. Nor do you have to worry about manually resizing them. Just upload them as-is, and Framer will optimize them automatically.
Most images: Upload them as-is and keep "Fill" → "Image" → "Resolution" set to Auto. You don't need to worry about converting images to WebP or resizing them; Framer will optimize them automatically.
SVG images: Upload them as image fills (draw a frame → "Fill" → "Image").
If you notice poor image compression, please post on our community channel – our engineers would love to learn about what we can improve.
For technical details on how Framer optimizes images, see How images are optimized in Framer.
Fonts
When using web fonts, pick font weights between Light and Extra Bold. This way, the text won’t be hidden while the font loads. (Under the hood, we use
font-display: swap
to achieve that.)When picking web fonts, prefer fonts from Google Fonts. These fonts load faster because they’re split into multiple subfonts per alphabet – so if your site uses only English, the browser can completely skip downloading Cyrillic or Hebrew characters. (The technical term for this is “subsetting”.)
If you uploaded a custom font before Nov 2023, re-upload it. This will make it smaller by converting it to the WOFF2 format.
For technical details on how Framer optimizes fonts, see How fonts are optimized in Framer.
Videos
See our article How videos are optimized in Framer. Here's a quick overview:
Prefer YouTube or Vimeo videos over uploading videos straight to Framer. YouTube and Vimeo adjust the video quality based on the user’s screen or network speed; Framer doesn’t do that. This means e.g. that if you upload a 4K video to Framer, we’ll serve it in 4K even for mobile users with small screens.
You can find YouTube and Vimeo components in the Insert menu:
When uploading videos straight to Framer, avoid setting them to auto-play. Auto-playing videos have to load and start playing as soon as the page loads; this makes them compete for traffic with images, fonts, and scripts.
When using auto-playing videos, keep them muted and without controls. Every muted looped video without controls (basically, a video that works like a GIF) will lazy-load and only play when it becomes visible. This means your images and fonts will get more network bandwidth to load!
Optimization
Check that the site is optimized. (Sometimes, if you use some third-party or write your own code components, optimization might fail.) Go to Menu → Site Settings → Versions and confirm the latest version has “Optimized” next to it:
Custom Code
Framer allows to add Custom code to the start or end of your head tag or the start or end of your body tag.
Only add custom code on relevant pages. For instance, if you only use the MailChimp widget on one page, you should only add the MailChimp script on that page.
The custom code you add in the Project settings → Custom code will run on every page of your site. Whereas the code added through Page settings → Custom code will only run on that page.
If you’re adding a <script> tag, place it in the “End of <body> tag” field. Or, alternatively, add a defer attribute to it:
(If your script needs to run as soon as possible, use async
instead of defer
.)
When omitting defer
(or async
), the script will keep the page invisible until it loads. This hurts both the performance of the site and the user experience.
If the <script>
tag already has an async
or type="module"
attribute, or if the script is inline (doesn’t have the src="..."
part), you can ignore this recommendation. These scripts are performant already, and adding defer
on them won’t do anything.
Effects
Appear effects run before JavaScript loads, but Scroll Animation effects don’t. If you use Scroll Animation effects to animate some critical elements in the top part of the site, switch to Appear effects instead.
Shadows and Blurs
Blurs and shadows should be used carefully because they are expensive operations for computers. This is because, to draw a single pixel, they suddenly need to average all the pixels around it (depending on your blur radius). To draw 100 pixels with a 10px blur, it has to calculate 100 × (10 + 10) × (10 × 10) = 40,000 pixels (instead of 100). While they won’t make the page load slower, large blurs and shadows can affect animations and scrolling performance. It's recommended to use blurs and shadows in places where it's necessary and use a value of less than 10 for better performance.
External Embeds and Iframes
Embedding external content, such as HubSpot forms or Spline 3D illustrations or embedding a website can make the performance score worse. Framer lazy loads embeds, but the embeds can still run a lot of code and slow down the site. Try removing the embeds (on a copy of your site) and seeing how that affects performance.
In case you’re still facing issues, feel free to share your concerns in our community channel.