How to Implement Native Lazy Loading on Iframes in Webflow

Iframes (YouTube videos, Google Maps, embedded forms) are among the heaviest assets on a web page. Without lazy loading, they all load on the initial page load, even if the user never sees them. Sandro, cofounder of the Gemeos Webflow agency, shows you how to fix that.

Why iframes hurt your performance

By default, a YouTube iframe loads several hundred KB of scripts, styles, and assets as soon as the page opens. On a page with 2 or 3 embedded YouTube videos, that often means 1 to 3 MB of resources loaded for nothing for users who never scroll down to those elements. The impact on LCP (Largest Contentful Paint) and TBT (Total Blocking Time) is direct.

1. Turn on native lazy loading on a Webflow iframe

In Webflow, native iframes (the Video element) don’t let you add the loading attribute directly in the interface. Use an "HTML Embed" element instead and add loading="lazy" manually.

2. Use the placeholder technique for YouTube

Native lazy loading delays the load, but it still loads the full iframe as soon as the user gets close. The YouTube placeholder technique is even more effective: it replaces the iframe with a static image (the YouTube thumbnail) and only loads the player on click.

Replace VOTRE_ID with the YouTube video ID (the part after "watch?v=" in the YouTube URL). Also check out our dedicated guide: reduce the weight of the YouTube video player.

Conclusion

Lazy loading on iframes is one of the fastest performance optimizations to implement. On a page with several videos, the LCP gain can be significant.

• Use case 1: homepage with a presentation video above the fold replaced by a placeholder
• Use case 2: testimonials page with several client videos loaded lazily
• Use case 3: blog posts with YouTube videos embedded in Rich Text