New
New
New
Guide
- Optimize
- Site speed
Guide
- Optimize
- Site speed
Guide
- Optimize
- Site speed
How to Optimize Your Framer Sites
In this blog, I’ll be showing you some of the best practices to optimize your Framer site. Framer helps us by doing a bunch of work in the background to make sure our sites run smoothly, but these few things are worth looking at to really guarantee a great experience for our visitors.
Posted by
Nandi
Table of contents
Optimize your images
One of the biggest culprits behind slow websites? Large image files. If you have images that are too big, your site will take longer to load, which can frustrate visitors and affect your SEO.
Check image sizes
Start by checking your image file sizes. If an image is over 1MB, that’s a red flag. Ideally, your images should be under 500KB, and in many cases, even smaller.
Framer helps by automatically converting your images to the best-performing format, so you don’t need to worry about that. But one thing you do need to control is the resolution.
Resize images before uploading
A common mistake is uploading images that are much larger than they need to be. Let’s say you upload an image that’s 4000px wide, but on your site, it only displays at 1000px. That’s a waste of bandwidth!
Here’s how to resize images properly:
Determine the display size – Check how big the image will actually appear on your website.
Resize before uploading – Use an image editor or an online tool to reduce the dimensions.
Recommended max width – Keep images under 2500px wide unless necessary.
Tools for resizing
Mac users: Use Raycast to quickly resize images.
Optimize your images
One of the biggest culprits behind slow websites? Large image files. If you have images that are too big, your site will take longer to load, which can frustrate visitors and affect your SEO.
Check image sizes
Start by checking your image file sizes. If an image is over 1MB, that’s a red flag. Ideally, your images should be under 500KB, and in many cases, even smaller.
Framer helps by automatically converting your images to the best-performing format, so you don’t need to worry about that. But one thing you do need to control is the resolution.
Resize images before uploading
A common mistake is uploading images that are much larger than they need to be. Let’s say you upload an image that’s 4000px wide, but on your site, it only displays at 1000px. That’s a waste of bandwidth!
Here’s how to resize images properly:
Determine the display size – Check how big the image will actually appear on your website.
Resize before uploading – Use an image editor or an online tool to reduce the dimensions.
Recommended max width – Keep images under 2500px wide unless necessary.
Tools for resizing
Mac users: Use Raycast to quickly resize images.
Optimize your images
One of the biggest culprits behind slow websites? Large image files. If you have images that are too big, your site will take longer to load, which can frustrate visitors and affect your SEO.
Check image sizes
Start by checking your image file sizes. If an image is over 1MB, that’s a red flag. Ideally, your images should be under 500KB, and in many cases, even smaller.
Framer helps by automatically converting your images to the best-performing format, so you don’t need to worry about that. But one thing you do need to control is the resolution.
Resize images before uploading
A common mistake is uploading images that are much larger than they need to be. Let’s say you upload an image that’s 4000px wide, but on your site, it only displays at 1000px. That’s a waste of bandwidth!
Here’s how to resize images properly:
Determine the display size – Check how big the image will actually appear on your website.
Resize before uploading – Use an image editor or an online tool to reduce the dimensions.
Recommended max width – Keep images under 2500px wide unless necessary.
Tools for resizing
Mac users: Use Raycast to quickly resize images.
Resizing image with Raycast.
Resizing image with Raycast.
Resizing image with Raycast.
Online tools: Search for "resize image online," and you’ll find plenty of free options.
Photoshop or any editing software: Manually export your images in the right size.
Once uploaded, make sure you go to the right panel in Framer and set the resolution to Auto. This ensures Framer also optimizes the image for you for best results.
Optimize your videos
Videos are trickier than images because Framer doesn’t automatically optimize them. If you upload a massive video file, it will slow down your site.
Keep video files small
If you’re adding a video, check its file size. A one-minute video that’s 50MB or more is way too big. Ideally, videos should be under 5MB when possible.
How to reduce video size
Here are two simple ways to compress videos:
Use FreeConvert
Online tools: Search for "resize image online," and you’ll find plenty of free options.
Photoshop or any editing software: Manually export your images in the right size.
Once uploaded, make sure you go to the right panel in Framer and set the resolution to Auto. This ensures Framer also optimizes the image for you for best results.
Optimize your videos
Videos are trickier than images because Framer doesn’t automatically optimize them. If you upload a massive video file, it will slow down your site.
Keep video files small
If you’re adding a video, check its file size. A one-minute video that’s 50MB or more is way too big. Ideally, videos should be under 5MB when possible.
How to reduce video size
Here are two simple ways to compress videos:
Use FreeConvert
Online tools: Search for "resize image online," and you’ll find plenty of free options.
Photoshop or any editing software: Manually export your images in the right size.
Once uploaded, make sure you go to the right panel in Framer and set the resolution to Auto. This ensures Framer also optimizes the image for you for best results.
Optimize your videos
Videos are trickier than images because Framer doesn’t automatically optimize them. If you upload a massive video file, it will slow down your site.
Keep video files small
If you’re adding a video, check its file size. A one-minute video that’s 50MB or more is way too big. Ideally, videos should be under 5MB when possible.
How to reduce video size
Here are two simple ways to compress videos:
Use FreeConvert
Saving 40% size with FreeConvert.
Saving 40% size with FreeConvert.
Saving 40% size with FreeConvert.
Upload your video to freeconvert.com
Compress it to a smaller file size.
Download and upload the optimized version to Framer.
Use CloudConvert
Upload your video to freeconvert.com
Compress it to a smaller file size.
Download and upload the optimized version to Framer.
Use CloudConvert
Upload your video to freeconvert.com
Compress it to a smaller file size.
Download and upload the optimized version to Framer.
Use CloudConvert
MP4 to MP4 convert.
MP4 to MP4 convert.
MP4 to MP4 convert.
Convert MP4 to MP4 but adjust the resolution and quality.
Lower the resolution to 1080p or even 720p if needed.
Reduce the frame rate to 24fps if your video is 60fps.
Convert MP4 to MP4 but adjust the resolution and quality.
Lower the resolution to 1080p or even 720p if needed.
Reduce the frame rate to 24fps if your video is 60fps.
Convert MP4 to MP4 but adjust the resolution and quality.
Lower the resolution to 1080p or even 720p if needed.
Reduce the frame rate to 24fps if your video is 60fps.
MP4 settings for a smaller size video.
MP4 settings for a smaller size video.
MP4 settings for a smaller size video.
Another great way to cut down the file size is by trimming the video. If there are unnecessary parts, remove them before uploading.
Embed instead of uploading
If you need a high-quality or long video, don’t upload it directly. Instead, use YouTube or Vimeo:
Press I on your keyboard in Framer.
Search for "YouTube" or "Vimeo" components.
Drag and drop the component.
Paste your video link.
This way, the video is streamed from YouTube or Vimeo, keeping your site lightweight.
Use SVGs for graphics
If you’re using icons or simple graphics, SVGs are your best friend. They are:
Super lightweight – Unlike PNGs or JPEGs, SVGs use vectors so they scale up or down without losing quality.
Perfect for logos, icons, and illustrations.
Whenever possible, opt for SVGs instead of PNGs or JPGs for icons and graphics.
Another great way to cut down the file size is by trimming the video. If there are unnecessary parts, remove them before uploading.
Embed instead of uploading
If you need a high-quality or long video, don’t upload it directly. Instead, use YouTube or Vimeo:
Press I on your keyboard in Framer.
Search for "YouTube" or "Vimeo" components.
Drag and drop the component.
Paste your video link.
This way, the video is streamed from YouTube or Vimeo, keeping your site lightweight.
Use SVGs for graphics
If you’re using icons or simple graphics, SVGs are your best friend. They are:
Super lightweight – Unlike PNGs or JPEGs, SVGs use vectors so they scale up or down without losing quality.
Perfect for logos, icons, and illustrations.
Whenever possible, opt for SVGs instead of PNGs or JPGs for icons and graphics.
Another great way to cut down the file size is by trimming the video. If there are unnecessary parts, remove them before uploading.
Embed instead of uploading
If you need a high-quality or long video, don’t upload it directly. Instead, use YouTube or Vimeo:
Press I on your keyboard in Framer.
Search for "YouTube" or "Vimeo" components.
Drag and drop the component.
Paste your video link.
This way, the video is streamed from YouTube or Vimeo, keeping your site lightweight.
Use SVGs for graphics
If you’re using icons or simple graphics, SVGs are your best friend. They are:
Super lightweight – Unlike PNGs or JPEGs, SVGs use vectors so they scale up or down without losing quality.
Perfect for logos, icons, and illustrations.
Whenever possible, opt for SVGs instead of PNGs or JPGs for icons and graphics.
SVG vs JPG.
SVG vs JPG.
SVG vs JPG.
Watch your blur
If you’re using heavy blur effects (like a shadow with a high blur value 100 or more)
It can slow down your site, especially if multiple elements have the same effect. Blur is computationally expensive, so instead of applying it directly, a better approach is to export the blurred element as an image.
Watch your blur
If you’re using heavy blur effects (like a shadow with a high blur value 100 or more)
It can slow down your site, especially if multiple elements have the same effect. Blur is computationally expensive, so instead of applying it directly, a better approach is to export the blurred element as an image.
Watch your blur
If you’re using heavy blur effects (like a shadow with a high blur value 100 or more)
It can slow down your site, especially if multiple elements have the same effect. Blur is computationally expensive, so instead of applying it directly, a better approach is to export the blurred element as an image.
Blurred Framer element.
Blurred Framer element.
Blurred Framer element.
Here’s how:
Wrap the blurred element inside a frame.
Ensure the frame isn’t pinned and make it slightly larger to capture the full blur effect.
Export the frame as a PNG (consider using 2x or 3x resolution to maintain quality).
Replace the original blurred element with the exported image.
This trick keeps the blur effect while improving performance, ensuring smooth animations and a fast-loading website.
Minimize unnecessary animations
Animations can make your site feel dynamic, but too many can impact performance. If you notice lag or choppy interactions, consider simplifying your animations.
Optimize animations
Limit the number of complex effects – Keep animations smooth and subtle.
Test on different devices – Make sure animations run smoothly on mobile.
Wrapping up
Optimizing your Framer website doesn’t have to be complicated. By resizing images, compressing videos, using SVGs, and minimizing fonts and animations, you’ll keep your site fast and user-friendly.
If you want to dive deeper into site optimization, I recommend watching my full video on this topic.
Laters. ;)
Here’s how:
Wrap the blurred element inside a frame.
Ensure the frame isn’t pinned and make it slightly larger to capture the full blur effect.
Export the frame as a PNG (consider using 2x or 3x resolution to maintain quality).
Replace the original blurred element with the exported image.
This trick keeps the blur effect while improving performance, ensuring smooth animations and a fast-loading website.
Minimize unnecessary animations
Animations can make your site feel dynamic, but too many can impact performance. If you notice lag or choppy interactions, consider simplifying your animations.
Optimize animations
Limit the number of complex effects – Keep animations smooth and subtle.
Test on different devices – Make sure animations run smoothly on mobile.
Wrapping up
Optimizing your Framer website doesn’t have to be complicated. By resizing images, compressing videos, using SVGs, and minimizing fonts and animations, you’ll keep your site fast and user-friendly.
If you want to dive deeper into site optimization, I recommend watching my full video on this topic.
Laters. ;)
Here’s how:
Wrap the blurred element inside a frame.
Ensure the frame isn’t pinned and make it slightly larger to capture the full blur effect.
Export the frame as a PNG (consider using 2x or 3x resolution to maintain quality).
Replace the original blurred element with the exported image.
This trick keeps the blur effect while improving performance, ensuring smooth animations and a fast-loading website.
Minimize unnecessary animations
Animations can make your site feel dynamic, but too many can impact performance. If you notice lag or choppy interactions, consider simplifying your animations.
Optimize animations
Limit the number of complex effects – Keep animations smooth and subtle.
Test on different devices – Make sure animations run smoothly on mobile.
Wrapping up
Optimizing your Framer website doesn’t have to be complicated. By resizing images, compressing videos, using SVGs, and minimizing fonts and animations, you’ll keep your site fast and user-friendly.
If you want to dive deeper into site optimization, I recommend watching my full video on this topic.
Laters. ;)
