7 days of unlimited WordPress themes, plugins & graphics - for free! Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 1.7 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.5 Set Up the JavaScript

When you work with AMP, you can’t use any of your own JavaScript. When optimizing without AMP, you can use any JavaScript you like, but if you want fast sites you’ll still need to optimize that JavaScript in a similar way. We’ll go through how to do that in this lesson.

2.5 Set Up the JavaScript

Hey, welcome back to optimize your website without AMP. So far, we have almost everything to set up in our build process. We've got our HTML, and our CSS, all being handled and optimized, and we've got a nice live reload server going. The last thing that we need to do is set up our JavaScript. In this case, we don't need to create a folder inside our source folder because we're not gonna be writing any custom JavaScript for this project. Instead, what we're gonna be doing is working with some of the JavaScript that we have already installed up here in our node_modules folder. So what we're gonna do is pull the JavaScript that we need out of this node_modules folder, combine it, minify it and then output it as an optimized file into a root directory here. So for that, we're just gonna need to add one more gulp task. We'll do that with this code. So once again here, we're setting up our gulp task and naming it JS for JavaScript. And in this case, we're gonna be using a few different source files. So far, we've just been using one source file for each of our tasks, but when we need multiple source files, we can just put them all in an array. And that's what these square brackets here signify. They signify an array. We're gonna be using three different bits of JavaScript here. We're gonna be using lazy sizes to handle our lazy loading. We're gonna be using baguettebox to help our gallery in lightbox and we're gonna be using siema to create the carousel of tweets at the bottom of the page. So this bit of code pulls in all of those three files from their respective locations inside our node_modules folder. And then this line here concatenates or combines all of those files into a single file that's gonna be named index.min.js. And then we're running the plugin uglify on that file to remove any white space there and compress the file down as small as possible. We'll say the destination for our new file to be our root folder, and we're telling browser sync to refresh our page whenever this task is executed. So we'll Save that, and now let's give it a try. So back in our root folder, and now we can just run gulp.js That succeeded and there's our new index.min.js file. If we have a look inside it, you can see that all we have is one big long line of code. That's because it's taken all that JavaScript and removed all the white space, so we've just got this one really well optimized file that we're gonna be working with. And if we check out the file size, you can see that we have it down to only 25 kilobytes. So we're gonna get that functionality in with a small file size, and only one browser request. And there's one more thing that we're gonna do and that is in our page content, we're gonna get that index.min.js file loading in. All of the code of our page is going to go above the location that we load in this file. Because the functionality that we use in JavaScript 4 here, is not gonna need to be used right away. Because we wanna allow all of our HTML and CSS to load first. Then, we'll load in our JavaScript. So down at the bottom, we're gonna add a script tag, and then we're gonna add the source, which is, index.min.js. Now, also we're going to include async here. What asynchronous means is basically multiple things happening at the same time. So when you use async inside the script tag, you're letting the browser know that it can carry on doing other things, it doesn't have to stop and wait until this JavaScript is fully loaded. It can keep on doing whatever it has to do. And this is one of the really good optimization techniques that comes from AMP. In AMP, every single JavaScript file that they load externally uses async, so you wanna do the same thing when you're doing your own optimization. Now the thing to be aware of here is that because you're loading this JavaScript asynchronously, you have to call the functions that are inside it at the right time. Because otherwise you might be trying to run JavaScript before the page is actually ready for you to be running it. So we're just gonna set things up so that when we start to wanna use that JavaScript it's gonna be set off at the right time. So we're gonna add in some script tags and then in here, we're gonna add window.onload. We're gonna set that to equal a function, And then we just close out that line. And then all of the JavaScript that we're gonna run is gonna be done inside this function. So window onload is an event that fires after the page is fully loaded. So we gonna wait for this onload event, and only then are we gonna run our JavaScript. And another reason that you use this onload function, one is to make sure that you're not running JavaScript before it's ready, but two, to make sure that you're not overly prioritizing your JavaScript. You don't want to make your visitor sit and wait for an extra few seconds for the page to load because your JavaScript is running a little bit too early in the picture. Right, so that's our whole build system set up and all of the essentials for our project are in place. Now we're ready to start adding in the site specific content. So in the next lesson, we're gonna get the basics of our HTML in place. We're not gonna be coding every line from scratch, we're just gonna keep the focus on the optimization-specific elements of the content that we're adding in. For that reason, we're also just going to pretty much copy and paste in a whole chunk of CSS, so that the general styling for the page is taken care of. So you can just concentrate on the optimization specific elements of the CSS code. And then when we have some content on the page, we have some images and some iframes, we're gonna start implementing error optimization methods. And the first thing we're gonna add is our lazy loading. We talked earlier about how if somebody is trying to read the content at the top of your page, you don't need to make them wait for the content at the bottom of your page to load first. So lazy loading prioritizes the content that the viewer is trying to look at right now and then loads the other content later. So we're gonna be setting all of that up in the next lesson. I'll see you there.

Back to the top