This is a really low hanging fruit when doing performance optimization. A simple way of lazy loading YouTube videos, or any iframe embedded content, with just a single line of code. Chrome 76 comes with a native image and iframe lazy-loading. This requires just adding a loading attribute.
This is where this technique comes really handy, RTE video content on blog articles and product pages.
All your article pages will have native lazyloaded iframes.
Basically all the iframes in your article content, by using a simple Liquid string replace, will have the attribute
loading="lazy". Where supported, the browser will start to load the
<iframe> when a user has scrolled the element into view.
Lazyload browser support
This is a new feature with as of the time this article is written has limited support. However there is reason not to use it in production as more vendors will adopt it in near future. Microsoft Edge has a similar but non standardized API, the
What about native images lazyoad
Sure, this works also for images but for this to work, the lazyloaded element needs to have width assigned. Can be a percentage or fix value but needs to be there. This can be trough CSS or width attribute.
Why use native lazyoad?
- Big savings. An embedded YouTube video will load approx 600Kb.
- Easy to implement.