How to natively lazy-load images and videos

Lazy loading images and videos below the fold improves your site’s initial load speed. Framer handles most of this automatically, but there are a few scenarios where you can take extra steps to optimize performance.

Lazy loading images

Framer automatically lazy-loads most images that appear below the fold. In most cases, no setup is required.

Current exceptions

Lazy loading does not yet apply to the following cases:

• Images inside code components.

• Images inside smart components when visible or layout properties are controlled by variables.

• Images inside CMS formatted text fields.

These cases are actively being addressed by Framer’s performance engineering team. Until then, you can enable lazy loading by using a code component or an override.

Lazy loading videos

For best performance, use YouTube or Vimeo embeds instead of uploading videos directly to Framer. These embeds lazy-load automatically and require no additional configuration. Learn more in the video optimization article.

If you upload videos directly (not recommended)

If you need to upload videos directly, you can simulate lazy loading using variants:

1. Create a component with two variants.

   • Variant 1 shows a thumbnail and hides the video.

   • Variant 2 shows the video and hides the thumbnail.

2. Add a scroll variant animation so the video only appears when the component enters the viewport.

This approach delays video loading until it is needed, reducing the impact on initial page load.

Lazy loading reduces the amount of content loaded upfront, which leads to faster page loads and a smoother experience for visitors. While Framer manages this automatically in most cases, these techniques help you optimize advanced or unsupported scenarios.

Still have questions? Contact our support team through our contact page for further assistance.