Lazy-load Your iFrames

iFrames are great for security of your site. But they are render-blocking. It may add up and have great drag on your site's performance, particularly for mobile users.

Our iFrames fix it. iFrame loads empty in a snap, yields rendering priority to your page, and then loads media in the background.

The approach makes wonders. But it still loads all media with no delay, even if it is way below the fold. This is because iFrames cannot discover whether they are visible or not on their own. They need some help from JavaSript on the parent page.

Lazy-loading gives priority to the resources that user needs first. It postpones the loading of all other iFrames until they are about to come into browser's viewport.

Example

Responsive players will be lazy-loaded with thumbnail as placeholder first. When iFrame if about to come into viewport, it will be seemlessly replaced with an actual player.

Example: Step 1 - embed ready

Activate lazy-loading

There are two ways to activate lazy-loading:

  • Via Player settings: select "Lazy-load" and will apply only for players when wrapped into iFrame.

  • Via query-string parameter for all media: add &lazy=1 to your our API request.

Heads up: lazy-loading is a feature of our smart iFrames. If you want it for all embeds, you also need to request iFrame via &iframe=1 or choose it in your API settings.

What you get

The lazy-loaded smart iFrames will use this approach:

    <div style="...">
    <iframe data-iframely-url="//iframe.ly/NdU7I4" ...></iframe>
    </div>
    <script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>

It's a smart iFrame with no src attribute. Embed.js script will render the iFrame when it's time. The iFrame sizes are already in the code to avoid screen flicks.

To omit embed.js script from API responses and add it to your page youself, use &omit_script.