How to effectively implement lazy loading on Debut Theme?

Brittany_Witt
Explorer
52 0 17

Hello all!

I'm wanting to lazy load my Debut Theme, mostly focusing on my homepage first.

I see there are many configurations to implement this function so I'm a little lost.

I see I have a file called lazysizes.js in my Assets folder. I may have added this years ago, or maybe it came with this theme?

Lazy-Load (1).PNG

I also see I have two snippets of code in my theme.liquid 
- One on line 25 (within the <head>) which looks like this: <link rel="preload" href="{{ 'lazysizes.js' | asset_url }}" as="script">

Lazy-Load (2).PNG
- Another on line 153 (within the <head>) andit looks like tis: <script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>

Lazy-Load (3).PNG

I watched a YouTube video on how to implement lazy loading and they pointed me to this article which says to add tis code: <script src="lazysizes.min.js" async=""></script> to the <head> of my theme.liquid. 

I also installed a piece of code a while ago to show different-sized images for desktop and mobile. For example, on desktop, you see the desktop size version of my header image, but if you switch to mobile you'll see the mobile-sized version of that image, but I uploaded two separate images to my homepage editor. I have about 4 sections on my homepage displaying different images for both desktop and mobile but I guess all 8 images are loading slowing down my page speed. 

Second, my product images show the second product image when you mouse over it, so both images are loading at the same time. 

Here's my Google Page Speed showing the images that do not need to load:

Lazy-Load.png

My website is pinealvisionjewelry.com

Any help would be greatly appreciated!

Brittany Witt
Replies 8 (8)

JoesIdeas
Shopify Expert
2228 203 593

You're almost there, you just need to edit the image elements so they don't load the image on page load, but instead on scroll (the lazysizes library will look for these elements then load the image at scroll).

Usually you can just swap out the src attribute for data-src. Only do this for image below the fold.

You only need to load 1 lazysizes library, it looks like you're loading a bunch, which just means extra scripts and slower loading site. I would try deleting all the extra lazy sizes libraries so you just have 1 (do on a backup theme of course).

Those 2 things might take some experimenting but sounds like you mostly have it set up.

If you need a guide you can reference ours (created by team of Shopify optimization specialists) - https://speedboostr.com/shopify-lazy-loading

 

• Creator of Order Automator (automate tagging, fulfillment, Amazon, notifications + more)
• Shopify developer for 10+ years, store owner for 7 years
• I also make guides like Shopify Automation Tips and How to Deal with Fraud / Chargebacks
Brittany_Witt
Explorer
52 0 17

@JoesIdeas 

My apologies, I didn't see your reply before. 

When you say I'm loading a bunch of lazysizes libraries what do you mean? Should I delete the snippets of code from line 25 and line 153 in my theme.liquid, and only keep the lazysizes.js in my Assets folder?

Much appreciated.

Brittany Witt
JoesIdeas
Shopify Expert
2228 203 593

@Brittany_Witt it's hard to say, you'd have to experiment but from the screenshot it looks like there is duplicate code in the lazysizes.js file. I would follow that guide I shared and start with a fresh lazysizes library.

You need to keep the command in theme.liquid so that it loads the file.

• Creator of Order Automator (automate tagging, fulfillment, Amazon, notifications + more)
• Shopify developer for 10+ years, store owner for 7 years
• I also make guides like Shopify Automation Tips and How to Deal with Fraud / Chargebacks
PeteSGWorld
Visitor
2 0 0

Am i missing something? i need to turn lazy load off because its apprenty already on in my debut theme? any help in trying to turn it off? 

Hardik29418
Shopify Partner
2913 419 1081

@Brittany_Witt 
Hello,
Welcome to the Shopify Community.
I can easily solve your problem by implementing some code in img attribute.


- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
Brittany_Witt
Explorer
52 0 17

@Hardik29418 

Hello, thank you for your reply. What is the code?

Brittany Witt
Hardik29418
Shopify Partner
2913 419 1081

@Brittany_Witt 

{%- assign preview_image = product.featured_media.preview_image -%}
{%- assign img_url = preview_image  | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img 
              data-src="{{ img_url }}"
              data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{ preview_image.aspect_ratio }}"
              data-sizes="auto"
              data-image>

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
Brittany_Witt
Explorer
52 0 17

@Hardik29418 

Thank you for this snippet of code.

Now, considering all the lazysizes code I already have in my theme (see my original post), where should I include this piece of code you just shared with me? And should I remove any of the current lazysizes code I already have in my theme?

Thanks

Brittany Witt