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.
Most Shopify themes have JavaScript lazy loading, however, content added through the Rich Theme Editor (RTE) usually lacks any optimization due to its dynamic nature. As a developer, you have control over product, section, heroes images. Those are assets you know and you can optimize. Usually, content added through RTE is unoptimized and most likely not added by developers.
This is where this technique comes in handy, RTE video content on blog articles and product pages.
{{ article.content | replace: '<iframe ', '<iframe loading="lazy"' }}
That's it.
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.
- This works on browsers that do not have JavaScript enabled.
- Will gain more support and you can fallback to JavaScript.
- Easy to implement.