How to natively lazy-load videos or images?

Lazy loading images

By default, Framer’s infrastructure will automatically lazy load most of the images below the fold without you having to do anything.

As of July 2024, the only exception to this rule is for images inside components and the CMS formatted text field. However, this update is already on our performance engineering team’s roadmap, so it’s a feature that will be released in a future update.

Unfortunately, the only way to lazy load images in these scenarios where we don’t currently offer it out-of-the-box is to use a code component or override.

If you don’t know how to create code components or overrides, consider searching our free community to see if anyone has already done it or writing a post in the developers’ space, where other developers will be able to assist you.

Lazy loading videos

First, we strongly recommend using the YouTube or Vimeo embed and discourage the direct upload of videos to Framer. To learn why, read this article on how we optimise videos.

Among the various reasons why we suggest using these integrations, there’s also the fact that videos using those will be automatically lazy loaded, thus automatically improving performance without any work on your end.

If, for any reason, you wanted to upload videos directly to Framer (again, we don’t recommend you do), here’s how you can lazy load them:

1. Create a component with two variants: one where you hide the video and only show the thumbnail, and one where you hide the thumbnail and only show the video.

2. Add a “scroll variant” animation to the component and make it only show the video when the component is in view.

Conclusion

Lazy loading images and videos will have a positive impact on load speed. While Framer does most of the work for you, there are still some scenarios where you can use a couple of tricks to ensure your website is as fast as it can get.