Lazy-load your iFrames
Lazy-loading yields priority to other resources that your user may need first. It postpones loading of all other iFrames until they are about to come into browser’s viewport.
iFrames in general are great for security of your site. But your page’s
onload event is delayed until all iFrames load. If you have various scripts that wait for body to load, iFrames loading may add up and have significant drag on your site’s performance, perceived or actual, and particularly for mobile users.
Our async iFrames fix it. iFrame loads empty and fires
onload in a snap, yields rendering priority to your page, and then loads media in the background.
That 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.
If your site has multiple 3rd party add-on scripts such as ad networks or analytics, lazy-loading of rich media may give priority to those secondary 3rd party scripts and so make your primary content appear with a little delay. If that’s your case, we recommend to limit lazy-loading to players only.
How it works
Responsive players will be lazy-loaded with thumbnail image as placeholder first. When iFrame if about to come into viewport, it will be seamlessly replaced with an actual player when it’s ready.
Step 1 — embed ready:
How to activate lazy-loading
There are two ways to activate lazy-loading:
Via Player settings: select “Lazy-load” and it will only apply to players.
Via query-string parameter for all media: add
&lazy=1&iframe=1to your our API request.
Heads up: lazy-loading will not turn on when Iframely returns native publisher’s code. It only works with our own iFrames. Add &iframe=1 if need be.
What you get
The lazy-loaded Iframely iFrame will use this approach:
<div style="..."> <iframe data-iframely-url="//iframe.ly/NdU7I4" data-img ...></iframe> </div> <script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>
Our iFrame will have no
src attribute initially. Embed.js script renders such 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 yourself, use & omit_script.
Set a custom loading indicator for players
Iframely will not place a loading indicator for players by default. It’s because a number of auto-playing videos will have their own spinner.
But there’s a simple way to have your own custom loading indicator, all via CSS, if you do want one:
It relies on a single
div element with the class
iframely-loader that our script always places on top of the image placeholder while video loads. Your team can add CSS for that loader class. Any one-element loader will work. You can inspire, for example, from this great collection of examples.