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 assist local users learning Framer who have struggled with a lack of Korean resources by translating the official blog contents into Korean and adding practical information. We hope it offers you some help in using Framer.
Why You Need to Optimize Your Site
Framer automatically applies various optimizations to maintain site speed. However, you can take additional measures to enhance performance. If your site isn't as fast as you'd like, consider trying the extra steps suggested below.
Image Optimization
Framer automatically optimizes most images, so users don't need to convert to WebP or resize separately. For more details, check out this article on how images are optimized in Framer.
General Images: Simply upload images and set the resolution to
Auto. Framer will handle WebP conversion and resizing for you.SVG Images: After creating a frame, drag and drop the image to upload it.
Font Optimization
Fonts significantly impact site loading speed and readability. While Framer automatically optimizes font loading, following certain principles can offer a more stable and faster experience. Refer to the article on optimizing fonts in Framer for more information.
Use font weights from Light to Extra Bold:
This ensures that text won’t disappear when fonts are loading, asfont-display: swapallows a substitute font to show first and smoothly transition.Use Google Fonts:
Google Fonts download only the necessary characters, reducing unnecessary load size and speeding up loading.If you uploaded custom fonts prior to November 2023, re-upload them:
This process converts them to the WOFF2 format, reducing file size and improving performance.
Video Optimization
Videos can enhance site quality but also slow it down. It’s beneficial to remember certain principles. For more details, refer to the guide on optimizing videos in Framer.
Use YouTube or Vimeo:
Unlike Framer, which provides videos at their original resolution, these platforms adjust video quality according to network speed and screen size, accessible through theInsertmenu.Avoid Auto Play:
Auto play can consume unnecessary bandwidth, potentially slowing the loading speed of other sites.
If using videos as a background, mute them (
Muted), set to loop (Loop), and remove control buttons. This approach ensures the video loads only when visible, conserving bandwidth.
Checking Optimization Status
Framer provides functionality to verify if your site is correctly optimized.
Go to Site Settings → Versions in the top menu to check if the latest version is marked as Optimized. If Optimization Error is displayed, there’s an issue; recheck and republish.
Managing Custom Code
Framer allows adding custom code directly to <head> or <body>. However, excessive use can degrade performance.
Add only essential code:
For instance, if a MailChimp script is needed, ensure it's set to load only on the relevant page.Use appropriate code per script:
Manage site-wide code inProject settings → Custom code, and page-specific code inPage settings → Custom code.Be mindful of script placement:
It is generally recommended to place<script>tags at the end of the<body>with thedeferattribute.
Use async if the code needs to execute as quickly as possible, but be cautious as immediate insertion without any attributes can slow the site down.
When scripts need to be loaded swiftly, use async instead, and avoid using both concurrently—they can slow site speed. Inline scripts are optimized with defertype="module".
Managing Animation Effects
Animations can enhance user experience, but for optimal performance, use them judiciously.
Use the Appear Effect for important elements at the top of the page. This effect runs before JavaScript loads, offering a smoother user experience. However, avoid applying Scroll Animation effects to the same elements as it can reduce initial loading performance.
Shadows and Blur Effects
Shadows and blur offer depth to design but may impact browser performance, potentially slowing down animations or scroll speeds.
Use them sparingly and keep the blur values under 10 to maintain performance.
External Embeds and iFrames
Loading external content can also affect performance. Elements like HubSpot Forms or Spline 3D Illustrations are processed with lazy-load by Framer, but additional code can still make the site heavier.
In such cases, try duplicating the site and removing the embed to compare speed changes. Even this check can reveal performance improvements.
If these steps haven't resolved your issues, seek assistance on the Support Page.
This article is translated and adapted from Framer's official blog post, ‘Optimizing your site for speed and performance’.
