How to natively lazy-load videos or images?
Lazy loading images and videos below the fold will positively impact your website’s initial loading speed. Here’s how Framer does the heavy lifting for you and what you can do if you want to go the extra mile.
Lazy loading images
Framer automatically lazy loads most images below the fold, requiring no action on your part.
Exceptions:
Images inside components.
Images in the CMS formatted text field.
These exceptions are being addressed in a future update by Framer’s performance engineering team. Until then, you can use a code component or override to enable lazy loading for these cases. If you need assistance, check the Framer community or post in the developers’ space for help.
Lazy loading videos
We recommend using YouTube or Vimeo embeds rather than directly uploading videos to Framer. These integrations automatically lazy load, optimizing performance without extra effort. Learn more in this video optimization article.
If you upload videos directly (not recommended):
Create a component with two variants:
Variant 1: Show a thumbnail and hide the video.
Variant 2: Show the video and hide the thumbnail.
Add a scroll variant animation to display the video only when the component is in view.
Conclusion
Lazy loading significantly improves your website’s load speed. While Framer handles most of the heavy lifting, you can use these strategies to optimize specific scenarios and maximize performance.
Still experiencing the issue after following the steps above? Create a support ticket in the Community.