Lazy Loading iframes

So it's now possible to easily ensure your Hype iframes don't hinder your web page rendering and performance, particularly for embeds that are further down the page.

https://web.dev/iframe-lazy-loading/

You simply need to add:

loading="lazy"

In your iframe properties. Chrome, Edge and Firefox support this and Safari will probably catch up... eventually (image lazy loading is there but not enabled yet, so it's a start).

4 Likes

Good tip! Note that the HTML Widget itself is an iframe, so if you are using that directly then you can also add this as an Additional HTML Attribute in the Identity Inspector.

3 Likes

Can I use this not only for iframes but also in the vimeo API for example?

var config = {videoId: '...'};

var sceneElm = document.querySelector('#'+hypeDocument.documentId()+' > .HYPE_scene[style*="block"]');
var videoPlayerElm = sceneElm.querySelector ('.video1');

var options = {
	id: config.videoId,  // get video id
	width: hypeDocument.getElementProperty(videoPlayerElm, 'width'), // get video width
	background:false
	
};

hypeDocument.customData.backgroundVideoPlayer = new Vimeo.Player(videoPlayerElm.id, options); // create video player
hypeDocument.customData.backgroundVideoPlayer.setLoop(false);
hypeDocument.customData.backgroundVideoPlayer.play();

Yes this technique also works for Vimeo iframes, but I still found Vimeo embeds affecting Lighthouse performance results quite hard (about 30% on mobile).

There are a couple of reasons for this: Their player.js and the vimeo iframe itself, loads yet more scripts and css that delays the page rendering.

I've got a couple of little tricks to fix this.

  1. Vimeo uses their own player.js. You can load this once instead and force it to defer or async the script and remove it from any embed pastes.

  2. Vimeo added a defer technique for their iframe scripts and CSS you can enable.

It is well documented for javascript embeds, but not for iframes — however I tested the code it output and found that adding the following attribute to your vimeo iframe attribute enables the same defer feature in iframe embeds.

data-vimeo-defer

Here is an example:

<iframe loading="lazy" data-vimeo-defer src="https://player.vimeo.com/video/148751763?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="You'll never guess what this video is!" ></iframe>

With this added, everything Vimeo does is deferred or asynchronous and no longer blocks page rendering. I've got my mobile and desktop scores to 96% and 100% after fixing Vimeo.

5 Likes