lazysizes

Ask Me Anything Q&A Performance101
1

Deprecating lazysizes made theme code seriously more complex.

Also, when earlier you could make an image bigger with “Custom CSS” and autosizes would take care of the rest, now it’s much more complicated.

Have you done any measurements as to how much faster native lazy loading is compared to lazysizes for a real theme.

2

Hi Tim,

I was a huge, huge fan of Lazy Sizes for a long time. It did the job so perfectly, but these days we don’t need it for the majority of our lazy loading needs. I will admit, the autosizes feature is pretty nice. However, native lazy loading offers significant advantages over JavaScript-based solutions like lazysizes.

It eliminates the JavaScript parsing and execution overhead, it decreases bundle size by 10KB+ (minified), leverages browser-level optimizations, and future-proofs your site through automatic browser improvements. It also conserves battery life on mobile devices by reducing CPU usage, and avoids the negative impact lazysizes can have on Largest Contentful Paint (LCP) and overall latency, as JavaScript-based lazy loading can delay critical image rendering and introduce processing delays.

The downside is that you can’t tweak the viewport threshold like you could in Lazysizes, and setting sizes is a bit harder (as you say). I would offer a suggestion to look through the image_tag Liquid filter, with that you’re able to spit out everything you need and it can be more performant from a rendering standpoint than manually constructing your images. And if you need more control, also consider the picture element.

We’ve also written up a guide for high performing images on our performance blog.

Hope that helps.

3

I especially dig the preload parameter to image_tag, with it’s ability to produce imagesrcset and imagesizes and that it uses hints – should be massive help fighting LCP.

As for the autosizes – it’s dearly missed.

For example, https://community.shopify.com/post/3034641

It’s possible to set “Featured collection” to show 3 products per row, but sizes is hard-coded for 4-per-row: https://github.com/Shopify/dawn/blob/f2cc05acbbd5416b7f34d76c0b91622b422b5b48/snippets/card-product.liquid#L75 which is obviously a bug in Dawn even though there were multiple attempts to fix sizes…

4

It looks like that is an open issue. Sizes attribute for images in collection views assumes at least 4 products #532

No promises, but I can follow up on this and see if there’s any other movement on this.