LazyLoad for iframes and videos

This article covers information about the LazyLoad for iframes and videos option in the Media tab.

What it does

LazyLoad delays the loading of iframes on your website until the user scrolls down the page, reaches the section where the iframes are placed, and actually needs to see their content.

If your site’s visitors don’t scroll down all the page, the page size is less, and users won’t have to pay for mobile data they didn’t consume.

This will especially impact mobile devices which have more limited processing power and are often on slower internet connections.

This feature can help you solve the Reduce unused JavaScript PageSpeed audit related to the scripts of the iframes in the viewport.

Note: WP Rocket can only lazyload videos embedded using iframe. Videos added using the video tag won't be processed.

How it works

In general terms, this is the process:

WP Rocket will scan and look for iframe tags in the page’s source code.
The loading="lazy" attribute will be added to the iframe.
When the visitor reaches the viewport, the iframe scripts are loaded and the data-ll-status="loaded" is added to the iframe tag.

How to check if LazyLoad is working

Markup changes

Open your browser and visit the page where there’s an iframe below the viewport.
Open the Developer tools.
- In Chrome: Chrome Menu in the upper-right-hand corner of the browser window → select More Tools > Developer Tools → Elements.
- In Firefox: Firefox Menu in the upper-right-hand corner of the browser window → Web Development → Inspector.
- In Safari: Develop → Connect Web Inspector → Elements.
Click on the “Select an element in the page to inspect” icon and select the iframe:
- data-loading="lazy", data-rocket-lazyload and data-lazy-src attributes will be added to the iframes.
- The lazyloaded class is added to the iframe too.
- <noscript> tag added after the iframe.

Iframe scripts loading until reached

Open your browser and visit the page where there’s an iframe below the viewport.
Open the Developer tools.
Click on the Network tab.
Filter by JavaScript.
The iframe related scripts will load only when the user scrolls down to where the viewport reaches the iframe, as seen below:

Replace YouTube iframe with preview image

This feature will replace the YouTube video iframe with the thumbnail set by YouTube, and it's aimed to fix the Lazy load third-party resources with facades audit.

You can also choose the YouTube preview image resolution.

Most markups are compatible with this feature, this includes the one provided directly by YouTube’s share option. However, for more information, please check the following article:

How to Check if Replace YouTube Iframe with Preview Image Feature is Working

Troubleshoot

Sometimes, an iframe can break when using LazyLoad for iframes and videos on them, in such cases, you’d need to exclude the affected iframe or page with one of the options shown here.

If using the Replace YouTube iframe with preview image feature adds extra white space above or below the YouTube iframe, please see more information here.