Scratched metal 3d model rocket rendering

Optimize Shopify videos with native lazy loading

A simple and effective performance optimization you can do today.

One line string replace that can save you hundreds of kilobytes.

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. 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 trough RTE is unoptimized and most likely not added by developers.

This is where this technique comes really 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.
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 no reason not to use in production as more vendors will adopt it in near future. Microsoft Edge has a similar but non standardized API, the lazyload attribute.

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.
  • This works on browsers that do not have JavaScript enabled.
  • Will gain more support and you can fallblack to JavaScript.
  • Easy to implement.

Written by Mircea Piturca, Sat, Aug 24, 19