SEO
Insights
Oct 6, 2025
How to Optimize Speed and Performance on Framer Sites
By optimizing your Framer site, you can improve speed and performance. Optimize images, fonts, and videos, and manage custom code to reduce loading times and enhance user experience.
Uploaded by
Translated by
Contents
Table of Contents
This document aims to help domestic users learning Framer who are experiencing difficulties due to a lack of Korean resources. It includes an official blog translation into Korean, along with practical information. We hope it provides assistance to all using Framer.
Why Site Optimization is Necessary
Framer automatically applies various optimizations to maintain site speed. However, you can take additional measures to enhance performance. If your site is not as fast as desired, consider trying the additional actions suggested below.
Image Optimization
Since Framer automatically optimizes most images, users don't need to convert to WebP or resize separately. For more details on how images are optimized in Framer, please refer to this article.
For standard images: Upload the image as is, and set the resolution to
Auto. Framer will handle WebP conversion and resizing for you.For SVG images: Create a frame and drag the image into it to upload.
Font Optimization
Fonts significantly impact loading speed and readability of a site. While Framer automatically optimizes font loading, adhering to several principles can ensure a more stable and faster experience. See the article on optimizing fonts in Framer for more information.
Using font weights from Light to Extra Bold:
This ensures that texts do not disappear when fonts load, thanks tofont-display: swap, which displays a fallback font first, then smoothly switches.Using Google Fonts:
Google Fonts downloads only the necessary characters, reducing unnecessary size and accelerating loading.If you have custom fonts uploaded before November 2023, re-upload them:
This converts them to WOFF2 format, reducing file size and enhancing performance.
Video Optimization
While videos can enhance a site's quality, they may also slow it down. It's good to remember several principles. For more intricate details, refer to how to optimize videos in Framer.
Using YouTube or Vimeo:
Unlike Framer, which provides videos in their original resolution, these platforms adjust video quality based on network speed and screen size. You can use YouTube and Vimeo elements from theInsertmenu.Avoiding Auto Play:
Auto play consumes unnecessary bandwidth and can slow down the loading speed of other sites.
If using a video as background, mute it (
Muted), set it to loop (Loop), and remove control buttons. This ensures the video loads only when visible, saving bandwidth.
Checking Optimization Status
Framer provides a feature to verify if your site is properly optimized.
In the top menu, go to Site Settings → Versions and check if the latest version is marked as Optimized. If Optimization Error appears, it indicates an issue, so recheck and republish.
Managing Custom Code
Framer allows the addition of custom code directly to the <head> or <body>. But indiscriminate use of this feature can degrade performance.
Add only necessary code:
For instance, if a page requires a MailChimp script, ensure it's loaded only on that page.Use appropriate code per script:
Manage site-wide code inProject settings → Custom code, and code needed for specific pages inPage settings → Custom code.Be mindful of script placement:
Generally, it's recommended to place<script>at the end of the<body>tag with thedeferattribute.
If the code needs to execute as quickly as possible, you can use async. However, inserting without any attribute can actually slow down the site, so exercise caution.
If scripts need to load as quickly as possible, opt for using async, but do not use both; it can slow down the site. Inline scripts are optimized with defertype="module".
Managing Animation Effects
Animations can enhance user experience but should be used judiciously for optimal performance.
Use the Appear Effect for important elements at the top of the page. This effect runs before JavaScript loads, resulting in a smoother user experience. However, applying Scroll Animation to the same element can degrade initial loading performance, so it's best avoided.
Shadows and Blur
While shadows and blur can add depth to designs, they can adversely affect browser performance. Although they may not affect loading time, they can slow down animation or scroll speed.
Use them sparingly if possible, and keep blur values under 10 to maintain performance.
External Embeds and iFrame
Loading external content can also impact performance. External elements like HubSpot forms or Spline 3D illustrations are handled by default in a Lazy-load manner by Framer, yet additional code execution may still slow the site.
In such cases, clone the site, remove the embed, and compare speed changes. This check alone can confirm performance improvements.
If problems persist after following these steps, get assistance from the support page.
This article is a translated and adapted content of the Framer official blog’s ‘Optimizing your site for speed and performance’.
