how to compress javascript for site speed shopify

hey guys dylan here the ecom lion and,today we are going over that thing you,already know what it is,that nasty online store speed you may,look at your score and go how do i have,16 you may have jumped on facebook even,and seen people going it's not real,shopify just wants more money off you,spoil it it is real everything about it,is real it's actually a google product,it's not shopify shopify don't want more,money off you this way but today in,today's video we're going to teach you,how to understand what the speed score,actually is we're going to assess the,damage and then fix it everything is,free there's no paid apps so let's go,how do we understand what the speed,score actually is so the first thing you,want to do,is click online store then under the old,theme box you're going to scroll down,and click view report you're then going,to click see how your score is,calculated this is going to pull three,different metrics so you have your home,page your product page or your most,popular product page i should say and,your most popular collection page,google is then testing those three,different pages by giving them a score,of them pulling the average of those,three numbers and giving your store a,total score which happens to in this,case be 16. now,um if you're like me and you're a drop,shipper and you have a one product store,the most important metric is actually,your product page if that's the page,that all your advertising is targeting,to it actually doesn't really matter,what your home page score is it really,doesn't matter what your collection page,score is it's your product page which is,the most important so you want to click,view insights and it's going to pull up,a report from here there's one thing you,have to check and that is to make sure,that it's actually pulling the product,which you are testing and advertising,right now so you need to make sure that,that is the page which is being analyzed,so the way you do that is you just grab,that url you chuck it into this box you,click analyze it's going to pull the,report so once you have the correct page,up here you'll get a total score now you,want to run it about three times and get,a rough idea of what the score actually,is the reason why you do that is because,any sort of page speed software anything,that analyzes,pages and websites,in terms of speed and optimization they,all are actually done from servers,there's not someone sitting there going,oh,user3269,wants me to look up my website and they,type it in and they you know it's not,it's not it's not what's happening we,all know that right so it's a it's a,server which is actually pulling your,speed it's testing your site and the,problem with servers are servers aren't,real users so of course servers,can have issues in different scenarios,servers can have errors they can be,overloaded there could be heaps of,people trying to test their websites,right now this is why i say analyze it,three times the next thing you want to,do is pull up gtmetrix.com the links for,this are down below all you have to do,is once you open it up checking your,your url click test your site it's going,to pull up a report like this and you,may look at this and you may go ah,i've got a score of 91 and a why so,score of of c that's pretty good why why,does google see on my website so slow,it's lying,everything looks good here,yeah not really what you actually want,to look at is this here it's your fully,loaded time and this is telling you,roughly hey it's taking 11 seconds to,load this particular page that's that's,not good 11 seconds is a long time i,would sit here with you for 11 seconds,right now to show you how long it is but,so that was just six seconds and that,was already awkward so imagine 11.,people are going to ditch that page,before they even let it load okay so,what you want to do here is retest click,it again same as before you're going to,test it three times to get a rough idea,of how long your website actually takes,to load so i've gone and ran three,different tests i've ran them on google,i've pulled my mobile scores which were,20 16 and 15 for an average of about 17,and i've ran my gt metrics and i've gone,okay it's taken 10.9 seconds 11.7 the,third one was 6.7 which just shows how,much servers change um for an average of,about 8.5 seconds so from here we're,going hey it takes about 8.5 seconds to,load and the average score of my product,page is 17. we're going to increase both,of those today,the green zone the sweet spot is,anywhere around six seconds for gt,matrix if you can get your three scores,around six seconds,you're sweet you've optimized that,things are looking good there's probably,not too much more you can do,um and then our scores we're going to,try and increase it increase it to,anywhere anything over 30 is good we are,not going to get near 100 it's just not,possible,but anywhere over 30 you will instantly,see google and shopify will say hey your,speed is actually similar to other,websites which is what you want now that,brings us to our last point and that is,how do we fix the damage how do i do it,dylan great question so i've come up,with six different steps which are going,to help us increase your scores today,and we're going to do it completely for,free so the first one is to be very wary,of speed optimization apps if you go on,the app store and you type and fix my,site speed up my site you install an app,your scores don't change the reason for,that and it is actually written in the,fine print of all of the apps and that,is but how these optimization apps work,are through second click so,what that means is when you go on a,website and you hover over retest what,the app is doing is it's starting to,pre-load that second page anticipating,for you to click on this link but that,doesn't help us because 90 of our users,are going on our website for one page,they're there to see your product and,they're probably going to bounce and,never leave they if they go to the cart,that's fine the cart page loads quickly,anyway there's not much data on there so,what the app actually does is it,actually slows down your site further,because then you're putting more,javascript into your website,and it's just creating,worse speeds for everyone and as well,worst scorers for you so be very wary of,them don't stress you don't need it it,doesn't really help that much which,brings us to our next point and that is,to ditch the apps you have to be very,brutal on yourself here,go on to your app page have a look see,what's there now this website here that,i'm using as a demonstration it,currently uses debutify,which i'm not promoting in any way i,actually don't i'm not a huge fan of it,personally but um this was a test store,that i was doing to test out debutify,and,i've already combed through most of,what's here but you look at your apps,and you go what do i actually need,what's actually helping convert are the,pop-ups which are popping up and saying,dylan from,wisconsin or new zealand bought this,product is that actually helping your,conversion rate or is it actually,looking a bit scammy is the countdown,timer or the shaking add to cart button,is that making my site look better or is,it making it look more scammy you have,to weigh up things and go what is,actually helping my website and what is,helping them convert because that is the,goal at the end of the day that's it,is this particular app helping me,convert if it's not ditch it get rid of,it so as we go through these apps here,instantly the first thing you would want,to do if you do use a theme that's why,i'm using this as an example if you use,debuff use turbo whatever they typically,have apps installed into their theme so,you then have to go into the debutify,theme app or whatever your theme is and,then start removing the additional,add-ons um which is what they may call,them but then you come back to your main,apps and you go okay what can i get rid,of here the first thing is live chat,ask yourself are people actually,reaching out am i getting hundreds of,messages a day on live chat are people,are so many people actually using this,function to get in touch with me that i,should keep it or if i remove it are,people still going to find another way,to get in touch if they need to,i love teddy or live chat don't get me,wrong but,as soon as i removed it i saved about,one to two seconds and pure speed just,because of how long it took to load,it's really this simple you just have to,go through the apps and decide what you,need and what you don't need so now i go,okay page speed optimizer this is what,we were talking about just before we,know we don't need this anymore i'm,going to delete it,everything else here is actually okay,clayvio email marketing that's not going,to slow down actual conversions actually,it helps conversions through retargeting,campaigns so yes i should keep it,printful print on demand if i was doing,a print on demand store yes of course i,need this app if i'm not doing it or,only have one product or an old product,that they use this particular app and i,no longer need it ditch it get rid of it,which brings us back to our third point,and that is to assess the waterfalls now,jump back into your waterfall which you,can find on gt metrics you scroll down,you click waterfall and as you scroll,down,it's going to show you what's actually,causing your site to load slowly so from,this,particular page the first thing i notice,is is this gif here so i would if i was,trying to optimize this site the first,thing i'll do is get rid of this gif you,have to again ask yourself is this gif,actually helping people convert,especially at 2.29 seconds,that gift takes almost,three seconds to load is that is it,really worth a three second wait time,for this one particular gif is actually,helping them convert i would argue no i,would then download that gif i'd make it,into a video and upload it as a youtube,video suddenly um if i had a headline,saying how to use this product and then,you have a youtube video below with,essentially what the gif is inside that,video,suddenly it looks a lot more credible,something looks a lot more genuine and,it doesn't affect your page speed so,yeah ditch the gif get rid of it you're,then going to click javascript and it's,going to show you all the javascript,which is slowing down your page,every single app you download is going,to use some form of javascript and,instantly from this i'm going okay,so i've got a clevio here which is,slowing down a little bit here,i've got a shopify product customizer,which is the printful app we were,talking about before,and to be honest i'm pretty sure tidio,live chat is in here somewhere,i've already removed it which oh there,it is there to your live chat again so,if i remove just those apps which we,were talking about before suddenly all,of this load time disappears and my site,will finish loading here instead of,finishing loading here,again this will increase your score this,will increase your page speed and will,also give you more conversions,that's really what it comes down to,now you may go hey dylan but i've i've,deleted the apps um,and,nothing's really changed what you have,to do is really dive into your code and,this is where apps get a little bit,naughty and they actually get away with,this and i actually don't think it,should be allowed on shopify i think,apps should have to remove their own,code but,they don't so what you have to do is if,i delete teddy or live chat i then,actually have to go online store i have,to go into my themes and i have to go,and edit that code and it is a manual,process so every single app you've ever,added in the past if you haven't,actually gone and manually removed the,code from the app even after you've,deleted the app um it will still be,slowing down your website so what you,want to do is you want to come,especially to this theme.liquid file and,you just want to scroll through and,actually see if there's anything that,stands out as something which is slowing,down your website in terms of an older,app so you know i've got luke's reviews,here for instance if i'm not using looks,reviews anymore say i deleted it which,actually i did it wasn't on my app page,i need to go through and i need to,remove luke's so i would come down here,and i'll delete luke's from here and,i'll go ctrl f and i'll type in luke's,and anywhere i could find luke's i would,remove it instantly that's going to,remove that javascript from the page and,it's going to speed things up,and again this is what you want to do,for every single app that you've added,in the past if you've added heaps,as you come through this page you'll,probably notice quite a few in there,what i would recommend doing though is,either to take a copy of this page,before you start editing it or to just,do one at a time just do it very slowly,because you don't want to delete too,much if you're not familiar with this,just do it slow just remove the code,which isn't related to your website,anymore,and just be methodical about it if you,do make a mistake just remember you can,click older versions and then you can go,back to an older version of your theme,file it just means you will have to,start that deleting process again so the,way i like to do it is i like to remove,one at a time click save go and test my,site just make sure everything's still,working perfectly,another place you can find,these sort of files are in your header,header.liquid if you scroll through your,header.liquid you may just find it's not,typically in here but every now and then,you may find something in here which has,been injected from one of your apps,as well as your footer.liquid sometimes,they inject it at the bottom of the,footer um,just to have the app,firing on those pages the last page you,want to check is your product template,page now no matter depending on what,theme you're using,you'll have different options but i'll,go through your product pages,if you get this i found this happening,quite a bit on shopify recently where,you click on a a piece of code to edit,like a page and you get this just blank,page the way you fix it is you just,refresh it's annoying,i don't know why it does it but it's how,you fix it,so here's our product page again i'll,just again scroll through just make sure,there's nothing there um everything to,be honest is looking pretty good the,first thing that i noticed is luke's,reviews though so again if i was getting,rid of luke's reviews i would ditch it,from here,so again just be methodical go through,your pages just make sure all of your,old apps which you have deleted are gone,and instantly instantly that is going to,increase your speed the next thing you,want to do is what is called defer,javascript this isn't um it's not as,scary as it sounds it's really easy,essentially what it means,is when you first load your page uh or,your website,how it works is your computer is trying,to interpret every single line of code,so when it comes across a javascript,file that's then loading the javascript,script file in the order that everything,is loaded but maybe for instance maybe,your live chat or maybe if you have font,awesome icons for instance which i think,i do,here yep,maybe i go actually i don't need the,icons to load straight away because i,actually want the people to load the,page as quickly as possible i want them,to see the content i want them to see,the photos first the icons can load,later so the way you do that and the way,you defer it or put it near the end is,as it's done here,you literally just go defer equals defer,the other way you can do it is you just,find a javascript file so say you find,an app whether it's the teddy or live,chat app or maybe it's an app that,you've added on find the javascript for,it so i'm going to do it for the font,awesome icons here and you just come to,the end of the code and you literally,just write defer,that's that's it,it's really,as easy as that,or you can go defer equals defer,both work both do the trick um and what,that means is instead of this particular,icon or the font awesome icons library,loading at the side of the page and,start of i'm really struggling to,describe this instead of it loading at,the beginning of the website it's now,going to load at the end,which doesn't affect anything because,your user's not going to go into go,where's the icon,i mean we're talking three to four,seconds here if you just load it at the,end it loads your content a lot quicker,which is what you want so once you've,deferred javascript once you've ditched,all the apps you've deleted the ones,that you don't use anymore you've gone,through and removed all that code which,was left over,the last couple of things you want to do,is number one if you do use font awesome,icons the only thing i would recommend,is potentially look into that what i,have found personally from personal,experience is,i love the icons but,if i use the free plan how the free plan,works is it actually downloads every,single icon into a javascript file in,case you do use it whereas i think the,paid plans how it works is it actually,only pulls the icons that you are using,which is going to save a lot of time,because you can imagine how long a,javascript file takes to load if it has,tens of thousands of icons to to,download opposed to,three or four,the last thing though and it sort of,actually is similar to that is image,compression,this is very very important this is the,one scenario where i would say yeah you,should get an app for this because,there are plenty out there and what it,does is it goes and takes all of your,images which you've uploaded they then,compress those images make them as small,as possible without reducing the quality,and they re-upload them for you,automatically it just saves a lot of,time if you do want the free method the,free methods just to go through,pull all your images down from your,website you can just google compressed,images online if you don't have,photoshop you literally just come onto a,website like this compress jpeg.com this,was just one i've quickly googled,i've never actually used it but you just,upload the images again download the,compressed versions re-upload them to,shopify and instantly your website will,load quicker if you do need any help at,all leave a comment below reach out to,me give me a yell give me a shout i'm,happy to help you out um subscribe like,if you don't it's,i was about to say it's all gucci but,that would be the worst thing to i don't,know even though where they came from,it's so good if you don't subscribe i,get it um but you know if you do want,some help just reach out below and until,next time see you later go hustle eh,you

Congratulation! You bave finally finished reading how to compress javascript for site speed shopify and believe you bave enougb understending how to compress javascript for site speed shopify

Come on and read the rest of the article!