How to Implement Lazy Loading for Images and Videos with Webflow?

Lazy loading is a performance technique where images and videos only load when a user is about to scroll to them — not when the page first loads. For a content-heavy site with many images, this can significantly reduce initial page load time.

The logic: if a user reads the first two paragraphs and bounces, there's no reason to have loaded 15 images they never saw. With lazy loading, those images don't load until the user scrolls down far enough to see them. Initial page load is faster, LCP score improves, and bandwidth is used only for what the user actually views.

Google actively recommends lazy loading for below-the-fold images and videos.

The exception: images above the fold. This is the most important rule in lazy loading. The hero image, or any image visible without scrolling, should not be lazy-loaded. If your LCP element is lazy-loaded, the browser waits for the user to "see" it before loading — which directly delays your LCP score.

In Webflow, every image has a loading setting in the Element Settings panel: Auto, Eager, or Lazy. Above-the-fold images should be set to Eager. Everything below the fold can be Auto or Lazy.

Videos and embeds. Webflow doesn't automatically lazy-load embedded videos. If you have YouTube embeds or other video iframes on your pages, add loading="lazy" to the iframe via custom attributes in the Designer. YouTube videos are often the heaviest elements on any page.

How to audit your current setup. Open Chrome DevTools on a page with multiple images. In the Network tab, filter for images. Reload the page without scrolling. Check which images loaded immediately. Any image that loaded but wasn't above the fold is loading eagerly when it shouldn't be. Update those to Lazy in Webflow's Element Settings.

Lazy loading is a 30-minute implementation that consistently improves LCP scores on image-heavy pages. It's one of the quickest Core Web Vitals wins on Webflow sites.