how to add lazy load image to shopify theme

hey everybody,i'm sam webb and this is shopify dev,tips today,i want to talk about lazy loading so,let's get started,in my shopify theme build series we,built this featured product section,and i'll link that if you want to go,take a look but basically what we did,was,we created these different product tiles,that we can reuse across the site right,these are going to these are being used,on the collection page as well and,they're going to be used for any other,type of featured product section and,they have the ability to have two images,right,the image that you see here and then a,hover image so if i hover over,the black girlfriend material crop,sweatshirt you'll see that it hovers and,shows it or when i hover it shows a,different image,and it does the same for some of the,other ones now for this section alone,that's potentially eight images that,have to load on the page,and if i have a really big collection,page with,uh with you know let's say 20 different,products on there that's 40 images that,have to load on the page,and when it comes to site speed images,are usually,one of the biggest offenders that you'll,run into right images are just large by,default,in terms of their size compared to other,things right text is just naturally,smaller than an image,in terms of file size and you know one,of the big things about site speed,is how big are the things that you're,downloading,and also when are you downloading those,things,what lazy loading does is it takes it,takes on half of that problem right it,doesn't change the size of the images,that you're loading,but it changes when they're loading so,instead of loading,before everything else on the page or,just everything that comes,after them on the page they don't load,until either,after everything else on the page has,loaded or after or,until they're actually needed to be,displayed on the page,and the main thing that that does is it,improves your initial load time,right google has a statistic about you,know for every second,that it takes your page to load there's,some drop in customers,i don't know the exact statistics so,you'd have to go look that up but the,idea behind it is that,the slower your site loads people think,something's wrong,and they'll be much more likely to just,leave and go somewhere else,so again the idea behind lazy loading is,to,to figure out what images don't need to,load,initially and then load them at some,later time,and so this isn't something that that's,accomplished simply with html and css,this is something that you would need,javascript for and today,we're going to use a library called,vanilla lazy load,and if you look at the description on,the side it's just a lightweight,flexible,way to lazy load images and videos and,things,so let's start using this scroll down,here you'll find this getting started,i actually want to go down a little bit,to this local install where we can,actually use,npm or yarn to install this and so this,is what we need to do,we need to install it and then wherever,we're going to use it we need to,import it into that file so i'm going to,run yarn,add vanilla lazy load,then rerun yarn start then we're going,to go into our javascript,and create a component called lazy load,and i'm going to say const,and export that hop in the theme,then we say import,and down here we're going to run lazy,little,now i'm going to look at the the console,here,and refresh the page and we see that we,have this lazy little thing now it's not,doing anything yet this is just a bunch,of,uh boilerplate javascript so from here,we need to import it,import lazy load from vanilla lazy load,and then we need to initialize,an object from it so let's say const,lazy instance,equals new lazy,so the next thing we need to do is tell,it which images that we actually want to,lazy load so we have this,image here and then we also have this,uh this background image so let's start,with,this image first and i'm going to start,by changing this to,data source so if i go back to this and,i just add the class,lazy if i inspect this,we'll see that we have the data source,here and then,if we come all the way down here we,actually have a source on here,so this is what happens right once once,the library realizes that,this image is needed then it loads it in,in the source so now we want to do,the same thing with the background image,and so in this case i will copy,the actual image code and then delete,the background image and style from this,all right and save that,we come back here and we start hovering,over these we see that it just goes away,there's no background image,but if i say data,bg so let's give it the class lazy,and now when i hover over it we've got,that added so that's how you add lazy,loading to your images you can add this,to,all of your images you can add to your,videos as well so just make sure you,take a look at the documentation,i will link it in the description below,so hopefully that video was helpful if,it was make sure you like comment,subscribe and hit that notification bell,and i'll see you next time,you

Congratulation! You bave finally finished reading how to add lazy load image to shopify theme and believe you bave enougb understending how to add lazy load image to shopify theme

Come on and read the rest of the article!