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, try applying the suggestions below.

Images

Framer optimizes most images automatically, so you don’t need to resize or convert them to WebP manually.

  • Most images: Upload the images as they are and set the resolution to Auto in the “Fill” section under Image. Framer will handle WebP conversion and resizing automatically.

    The main panel shows a preview of an abstract, crystal-like 3D object with a gradient background transitioning from blue to pink. Below the preview are dropdown options for resolution, type, and position.


  • AVIF images: Ensure these aren’t too large since they are served as-is and not optimized. Alternatively, convert them to JPEG, PNG, or WebP before uploading.

  • SVG images: Upload them as image by drawing a frame and selecting the “Fill” option, then choosing Image.

If you notice poor image compression, please post on our community channel – our engineers would love to learn about what we can improve.

If you notice poor image compression, share feedback on our community channel. For technical details, visit How images are optimized in Framer.

Fonts

  • Use font weights between Light and Extra Bold: This prevents text from being hidden during font loading, thanks to font-display: swap.

  • Prefer Google Fonts: These load faster because they’re subsetted by alphabet, so unused characters aren’t downloaded.

  • Re-upload custom fonts uploaded before Nov 2023: This converts them to WOFF2, reducing their size.

For more information, see How fonts are optimized in Framer.

Videos

Refer to How videos are optimized in Framer. Here are some tips:

  • Prefer YouTube or Vimeo: These platforms adjust video quality based on network speed and screen size. In contrast, Framer serves videos at their original resolution, even on small screens.

    You can find YouTube and Vimeo components in the Insert menu:


    The main section shows media options categorized under 'Image' and 'Video,' including buttons for Image, GIF, Video, YouTube, and Vimeo, each represented by colorful icons.

  • Avoid auto-playing videos: Auto-play forces videos to compete for bandwidth with images, fonts, and scripts.

  • Use muted, looped videos without controls: These lazy-load and only play when visible, leaving more bandwidth for other assets.

Optimization

To confirm your site is optimized, go to Menu → Site Settings → Versions and check that the latest version is marked “Optimized.”

Version control interface displaying a list of versions with their statuses, update details, and actions. Each version has a unique identifier, with 'Latest' marked at the top. The statuses are shown as either 'Optimized' in green or 'Optimization Error' in red.

Custom Code

Framer allows you to add custom code in the head or body tags. Follow these best practices:

  • Add custom code only where necessary: For example, only load the MailChimp script on pages that use it. Use Project settings → Custom code for site-wide scripts and Page settings → Custom code for page-specific scripts.

  • Place <script> tags at the end of the <body> tag or add defer:


    <script defer src="https://my.analytics.library/library.js"></script>


Use async instead of defer if the script needs to load as quickly as possible. Avoid omitting defer or async, as it can delay page visibility and hurt performance. Inline scripts and those with type="module" are already optimized.

Effects

Use Appear effects for animating critical elements at the top of your site, as they run before JavaScript loads. Avoid using Scroll Animation effects for these elements.

Shadows and Blurs

Shadows and blurs are resource-intensive. For better performance, use them sparingly and keep blur values below 10. Excessive use can slow animations and scrolling performance, even if it doesn’t affect page loading times.

External Embeds and Iframes

Embedding content like HubSpot forms or Spline 3D illustrations can degrade performance scores. While Framer lazy-loads embeds, they still run additional code. Test removing embeds (on a duplicate of your site) to see how performance is affected.

Still experiencing the issue after following the steps above? Create a support ticket in the Community.