This is 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. It requires just adding a loading attribute.
This is where this technique comes in handy, RTE video content on blog articles and product pages.
All your article pages will have native lazyloaded iframes. 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 no reason not to use it in production as more vendors will adopt it in near future. Microsoft Edge has a similar but nonstandardized API, the lazyload attribute.
What about native images lazyoad
Sure, this works also for images but to work, the lazyloaded element needs to have width assigned. Can be a percentage or fixed value but needs to be there. This can be through CSS or width attribute.
Why use native lazyoad?
- Big savings. An embedded YouTube video will load approx 600Kb.
- Easy to implement.