How to install lazysizes dummy

Highlighted
New Member
9 0 0

Hi All,

 

After running a pagespeed test I found that I can speed up the loading time by implementing lazysizes in my theme code. Before just pasting in extra code I want to know if this is no problem. It sounds to simple; to just enter some code and ta-da.

 

Well, as you recognize I'm still a dummy when it comes to coding, I want to learn how to do it tho. So I would like to have some advice on what to do here.

 

Thanks in advance for any replies!

0 Likes
Astronaut
1011 131 240

It sounds easy because that's how it was developed. There's lots of different lazy loaders. Lazysizes and Lozad are just two off the top of my head that are good options because they're both lightweight and efficient. All you should have to do is add the javascript as an asset, put it in your theme.liquid as an asset url and stylesheet tag, find all the images on your site you want lazy loaded and change the "src" attribute to "data-src", and add the class lazyload to the image tag. So instead of:

 

<img src="/url-for-your-image.jpg">

It would be:

<img data-src="/url-for-your-image.jpg" class="lazyload">

The javascript you added will look for all elements with the class lazyload, and wait for the browser window to intersect with them. When that happens, they know they need to be visible so they will take the url from the data-src, and add it to the actual src making the image populate only when the user would be able to see the image.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
9 0 0

Thanks for the reply, but I still can't make any of it... I am probably not skilled enough at the moment.

0 Likes