Speeding up the site with JavaScript loading optimizations

Lesson Details:

Video Transcription: Now I want to show you how to improve your site load speed by speeding up your JavaScript calls this video is brought to you by Appy Pie’s Academy. so we're not getting into the JavaScript code itself we're just getting into the calls of the JavaScript which is way easier much easier because you don't have to change any actual JavaScript code or know any code and what we're only going to do is we're going to change the order of when this code gets loaded remember javascript is a render blocking entity which means that as long as your pages have to go and fetch javascript code or do something the rest of your page rendering is stuck it's waiting for the JavaScript to complete so sometimes the JavaScript has an immediate visual impact on your page and in those cases you want to leave that because obviously your page is gonna change in how it looks but some things like analytics or things that run in the background or Google add pixels those don't need to get shown immediately those can be the last things to load so there is a tag you can add to your script it's the async tag and what that really does is whenever you call your JavaScript you have an async tag you can use and I put it here as you can see this is just for our test and before I had this tag what was happening is these calls were preventing my page load speeds and I'm gonna show you the before and afters of how it affected the site load speed this is the before you see reduce render blocking script was offending you know what was a an offender I guess we're calling this the offending pages or it was slowing down my page load by 1.4 second and the they were specifically complaining about these two okay so it's not all the scripts in my case I comment I put the async in all the scripts just to be safe and sure but here they're just complaining about two of these so you really just have to play with those two now let's see what happens when I took them out I took out these guys and I'm just May I didn't take out the code I just made them asynchronous which really meant that it's okay for the page to wait - for loading those JavaScript until all the visual elements have been loaded and then those elements can get fetched okay so it's just the order of the JavaScript that gets to you know you're just telling it you can you can load the JavaScript later that's all you're telling it so here I'm gonna show you the results of that now our performance score is 50 now our page load speed the first meaningful paint is even faster it's getting to be really good I mean remember this is testing on a 3G connection this is not even testing it on a good connection and now also there's the problem of reducing render blocking scripts is nowhere to be found the only problem is reduce render blocking stylesheets but we've also reduced that already we can reduce it further but we happen to need these like these are things we are currently using we can remove them further that's fine if we remove them further but we actually need these style sheets and one-second delay is okay as you know if your page loads within a second that's amazing so you see how very quickly in almost no work I mean you could do this in under an hour and you can really speed up your pages and once you really understand the problems with one page on your second third fourth page the problems are nearly identical because most sites have most pages that are done in a very similar way so as soon as you find a problem that repeats that problem you can fix it everywhere for example if this image when we reduce will be compressed its size well if this image is pulled up on your other pages it's going to immediately speed up your other pages without even touching those pages because this same image is now reduced in size not so now your your whole site is faster wherever it's using this image so you see very quickly we're able to just go one by one by one by one and make everything faster.