> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# 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](/getting-started/installation)
- 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

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page with the Custom iFrame widget. Click **Edit with Elementor**.
  </Step>
  <Step title="Select the Custom iFrame widget" icon="mouse-pointer" title-type="p">
    Click the widget to open its settings.
  </Step>
  <Step title="Enable Lazy Load" icon="zap" title-type="p">
    In the **Content** tab, find the **Lazy Load** toggle. Set it to **Yes**. The iFrame loads only when the visitor scrolls near it.
  </Step>
  <Step title="Publish" icon="check" title-type="p">
    Click **Update** or **Publish**. Lazy Loading is now active on the live page.
  </Step>
</Steps>

### In Gutenberg

<Steps>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page with the Custom iFrame block. Click **Edit**.
  </Step>
  <Step title="Select the Custom iFrame block" icon="mouse-pointer" title-type="p">
    Click the block to open its settings in the right panel.
  </Step>
  <Step title="Enable Smart Load" icon="zap" title-type="p">
    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.
  </Step>
  <Step title="Publish" icon="check" title-type="p">
    Click **Update** or **Publish**. Lazy Loading is now active on the live page.
  </Step>
</Steps>

<Callout kind="success">
  Lazy Loading is active. The iFrame loads only when the visitor scrolls to it.
</Callout>

<Callout kind="tip">
  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](/features/placeholder-image).
</Callout>

## FAQ

<ExpandableGroup>
  <Expandable title="Does Lazy Loading affect SEO?" default-open="false">
    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.
  </Expandable>
  <Expandable title="Can Lazy Loading be used with Auto-Refresh?" default-open="false">
    Yes. When both are active, the iFrame loads once it enters the viewport, then starts refreshing at the set interval.
  </Expandable>
  <Expandable title="What is the difference between Lazy Load and Smart Load?" default-open="false">
    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.
  </Expandable>
  <Expandable title="My embed disappears when I scroll back to it. Is that Lazy Loading?" default-open="false">
    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.
  </Expandable>
</ExpandableGroup>

---

## Related Guides

- [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup)
- [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup)
- [Placeholder Image](/features/placeholder-image)
- [Auto-Refresh iFrame](/features/auto-refresh)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)