Lazy Loading Debut Theme

Brittany_Witt
Explorer
49 0 15

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
1669 143 428

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 (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
AlexEffron
Shopify Partner
2682 387 1047

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


Brittany_Witt
Explorer
49 0 15

@AlexEffron 

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

Brittany Witt
AlexEffron
Shopify Partner
2682 387 1047

@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>
Brittany_Witt
Explorer
49 0 15

@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
Brittany_Witt
Explorer
49 0 15

@AlexEffron 

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
JoesIdeas
Shopify Expert
1669 143 428

@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 (automation app to save you and your team time on admin tasks)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
PeteSGWorld
New Member
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?