How Lazyload works
Lazy load delays loading iframes on your website until the user reach them..If your site’s visitors never scroll down to the video/iFrame, the page is smaller in size, and they won’t have to waste resources.
This is beneficial for users who use mobile devices with limited processing power and are often on slower internet connections.
How it works in NitroPack
NitroPack will scan and look for iframe tags in the page’s source code.
The nitro-lazy-src attribute will be added to the iframe, along with the lazyloaded attribute.
📍Keep in mind that NitroPack will only lazy load images and iframes below the fold.
How to check if Lazy load is working
We can identify whether iframes have been lazy loaded successfully by checking if there are any markup changes made by NitroPack.
To do so, open your browser and visit a page that has an iframe below the viewport.
You will need to open the browser’s Developers Tools to see the element. For example, using Chrome, the path to open the DevTools is clicking on the three dots in the upper-right corner, then “More Tools”, and then “Developer Tools”.
This will open the Developer Tools console and lead you to the “Elements” tab.
Now, to find the exact element there, click on the “item selector” and then hover over the iframe.
This should lead you to the iframe element within the DOM tree (you may need to scroll up a bit to target the exact element).
Within the iframe element, you should see the lazyloaded attribute that will be added by NitroPack, similar to this: