Lazy Loading (Smart Load)
Delay iFrame loading until the embed enters the visitor's viewport in Elementor and Gutenberg using the Custom iFrame WordPress plugin.
Overview
Custom iFrame Lazy Loading delays the loading of any embedded iFrame until the visitor scrolls close to it. The browser skips loading offscreen embeds on page load, which reduces initial page weight and improves Core Web Vitals scores.
Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.
Lazy Loading is a free feature. No Pro plan required.
Requirements
- Custom iFrame plugin installed and active
- WordPress with Elementor or the Gutenberg block editor
Why Use Lazy Loading
Every iFrame on a page adds to the initial page load time. A page with three embeds from YouTube, Google Maps, and a form loads all three at once by default. With Lazy Loading enabled:
- Embeds below the fold do not load until needed
- Initial page load is faster
- Google PageSpeed and Lighthouse scores improve
- Visitors on slow connections get a faster experience
How to Enable Lazy Loading
In Elementor
Open your page in Elementor
Go to the page with the Custom iFrame widget. Click Edit with Elementor.
Select the Custom iFrame widget
Click the widget to open its settings.
Enable Lazy Load
In the Content tab, find the Lazy Load toggle. Set it to Yes. The iFrame loads only when the visitor scrolls near it.
Publish
Click Update or Publish. Lazy Loading is now active on the live page.
In Gutenberg
Open your page in the block editor
Go to the page with the Custom iFrame block. Click Edit.
Select the Custom iFrame block
Click the block to open its settings in the right panel.
Enable Smart Load
In the block settings panel, find the Smart Load toggle and turn it on. The iFrame loads only when it enters the visitor's viewport.
Publish
Click Update or Publish. Lazy Loading is now active on the live page.
Lazy Loading is active. The iFrame loads only when the visitor scrolls to it.
Pair Lazy Loading with a Placeholder Image. While the iFrame waits to load, visitors see a meaningful image instead of a blank space. See Placeholder Image.
FAQ
No. Search engines do not index iFrame content. Lazy Loading only affects when the browser requests the embed. It does not change how the embedded content is crawled.
Yes. When both are active, the iFrame loads once it enters the viewport, then starts refreshing at the set interval.
They are the same feature. Elementor uses the label Lazy Load. Gutenberg uses the label Smart Load. Both delay iFrame loading until the embed enters the visitor's viewport.
No. Lazy Loading loads the iFrame once and keeps it loaded. If the embed disappears on scroll, check for a very low Refresh Interval or a CSS visibility issue unrelated to lazy loading.
Related Guides
Last updated 1 day ago
Built with Documentation.AI