"i only speak liquid" #6: Native Lazy Loading vs Lazy Libraries

Hey all 👋!

Welcome to 'i_only_speak_liquid', where active Shopify developers like me (Anthony) share learnings we face daily. This is my first edit of 'i_only_speak_liquid', and there will be more in the coming weeks, excited to be here & contribute! 

PS: I'm an expert on Storetasker and work with some pretty great clients on the platform, alongside some external clients in Australia. Storetasker allows me the freedom to scale up and down my workload to suit my business. Whether you're after a full-time workload, or a part-time gig. Apply here if you want in.

What I’ve been thinking about:

I had a client recently ask me if their premium Shopify theme had lazy loading implemented as they couldn't see a lazysizes.js file. Great question - I knew it did, but it still triggered some further digging on my end.

What is lazy loading?

Lazy loading defers the loading of certain areas of the webpage, especially images below the fold, until they are needed. This can help speed up page load times.

There's a couple of simple ways to implement lazy loading - using native browser-level lazy loading, and/or using a js library like lazysizes.js

Native Browser Lazy Loading (AKA - HTML attributes)

You can now use the attribute loading="lazy" within your img element to defer loading of the resource. This is supported by most modern browsers.

Eg.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

You can do this easily in liquid using image_tag (which has replaced the deprecated img_tag)

Eg.

image_tag: class: 'custom-class', loading: 'lazy'

Pros

• Liquid outputs the loading attribute, the img srcset, and alt tags for you

• Doesn't require js, so users that block js won't be affected

• Doesn't need an additional library

Cons

• You have to ensure you don't use loading="lazy" on content that appears above the fold

• Might require a js library to polyfill older browsers anyway

Lazy Loading Library

lazysizes is hugely popular and quite simple to implement. You add the file to your assets folder, and include it in theme.liquid. You then apply the lazyload class to your images. It can also calculate the sizes attribute responsively, using data-sizes="auto" and an appropriate data-srcset.

eg.

<img data-sizes="auto" data-srcset="responsive-image1.jpg 300w, responsive-image2.jpg 600w, responsive-image3.jpg 900w" class="lazyload" />

Pros

• Simple to set up and implement

• Relatively lightweight and can reduce the amount of liquid logic required to build the responsive <img> element.

• Calculates sizes automatically when using appropriate srcset.

Cons

• An additional library to add and load.

How to check your theme for lazysizes.js

Sometimes theme developers include lazysizes or an alternate library as part of their vendor.js file. This was the reason my client couldn't spot an additional lazysizes.js file in network - so be sure to check thoroughly before implementing anything new!

3 links you can’t miss:

• Regex101: Regex has never come naturally to me - I'm not sure why. Regex101 lets you enter a set of strings, and has a handy lookup to help you build out your regular expressions.

• Dummy Image Generator: Sick of the 'What size does this image need to be?' question from clients? Quickly create dummy images with a size displayed on them to pop in as temp content for your clients as you build.

• Starter Story: I love entrepreneur stories and the DTC world in general. This is a little newsletter I've been subbed to since it launched. It has interviews with founders/business owners at all scales, and industries.

One app I like:

Accentuate Custom Fields by Accentuate 

Even with the leaps and bounds Shopify has made with metafields recently, an app like Accentuate Custom Fields still has its use case.

ACF gives you the power to extend metafield functionality with an amazing UI (for your clients), and features like repeatable fields.

I've used it to create custom product forms for a few different clients. The repeatable fields feature allows me to set up a UI for the client that helps them create each step in their custom product form - whether they need to put together different steps for customisable jewellery products, or for different steps in a customisable cake.

Accentuate gives the client a simple UI to create each unique step for each product - while storing all of the data in metafields. You can then loop through the metafields and render out your custom form in liquid and JS.

One learning as a freelancer:

Track your hours, adjust your future estimates, and ensure you're billing for all of your time.

I still struggle with this - usually I err on the side of underquoting because I've failed to account for the unknowns. This usually crops up when I'm working on tasks that I haven't done before. As long as you're doing great work, there will always be tasks you haven't done before, so you always need to take this into account when quoting.

Once I started tracking my time more thoroughly, it became a lot easier for me to review hours billed as a whole - and then adjust padding or contingency in my quotes accordingly.

Hope you enjoyed this edition - please feel free to reach out if you have any suggestions or feedback,

AV