Need Help Implementing Lazysizes/Lazyload

Highlighted
Tourist
18 0 3

Hi I am Using one of the free themes, the Debut theme, and I was trying to add the lazysizes.min.js  ( https://github.com/aFarkas/lazysizes ) to my website so I can speed up the loading time as google suggested to me from their speed test tool https://developers.google.com/speed/pagespeed/insights/

 

I am following the directions from https://speedboostr.com/shopify-lazy-loading/

 

Based on what they are saying my speed is incredibly slow for mobile and google gave me some recommendations on how to fix this (check the screen shot)

 

Untitled1.png

Untitled2.png

 

 

But when I go into the code to add the lazysizes.min.js for my store and go to the Assets folder, I see that there's already lazysizes.js in that folder and also on some of the pages, like for example product-template.liquid  there are already lazyload attributes in there, I am guessing that these aren't the type of lazyload  I need for my site so it can actually get faster

 

 

According to speedboostr.com/shopify-lazy-loading/  there are 2 types of lazyload  (screenshot)

 

Untitled3.png

 

They say all the src need to be replaced with data-src

 

So I am guessing that right now I have the "Place holder lazyload" right now BUT I need the "TRUE lazyload"

I've been doing more research than I ever wanted to do about lazyloads hahaha

 

Good lord....

 

So I need to know what do I need to do to actually get TRUE lazyload??

I have tried to follow the steps from https://speedboostr.com/shopify-lazy-loading/  but they aren't working, I'm sure because there is some other existing code in there messing it up from working correctly.

 

Also please don't tell me that I have lazyload on my site already, because I don't, I don't have TRUE lazyload, I have speed results from 5+ websites and they all give the same horrible score and same recommendations

 

So what existing code do I need to get rid of to make this lazysizes.min.js code work correctly?

 

Any recommendations or ideas??

 

 

 

D.H.C
0 Likes

Hello @Damany_Cruicksh ,
Only implementing lazy-load for your images can not resolve your site speed issue.

speed.jpg

You can see that defer offscreen images do not having that much issue on your site its render blocking and third party app they are taking making your site slower.
Hire an expert who can help you to get resolve with these issues.
I can help you on this to get resolved , you can Email me or Skype me.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes