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.1 Optimization Checklist

When rolling our own optimization as an alternative to AMP, we want our sites to load just as fast as they would with AMP, if not faster. In order to make that happen, there is an optimization checklist we’re going to make sure we follow. Let’s go over what’s on that checklist in this lesson.

Related Links

2.1 Optimization Checklist

Hey, welcome back to Optimize Your Website without Amp. In this lesson, we're gonna go through a checklist of everything that we're gonna need to include in our site development process in order to optimize our site as well as, we could if we were using Amp. This checklist is part tasks that we need to complete. It's part principles that we need to follow, and it's also part goals that we wanna achieve. So the first thing on our list is a goal, and that is, we want our site to load as fast or faster than the amp version of the same site. You saw in the last video that we have already established that our end result is, gonna be as fast or faster than the amp version. And it's a good idea to keep checking on your load time as you go along with your your development process, so that's what we're going to be doing as we work through everything, and then the next item on our checklist, we still need to get into the technical things that we need to do. The first consideration is, that we want to get any web fonts that we will be using loaded as fast as possible. Web fonts are often relatively large files, and you can't show your content properly Until those web fonts are loaded. So, we're going to make sure that we get those web fonts loading very early in the picture, probably as the first thing that starts loading. The next thing that we're going to do is, we gonna make sure that our CSS is very efficient and very small in size. Sometimes you can be tempted to take a shortcut, and include a massive library of CSS into our sites to help speed up the development process even if most of that CSS is not necessary. So throwing in a massive CSS file, might help speed up your development but it's probably going to slow down your website and it's probably going to diminish the performance of your sites in your search engines. I say that because, load speed is now a ranking factor. So it's important for your CSS to be as small and efficient as possible. You're also going to take that CSS and we're going to load inline into the head section of the site. This is a technique that Amp uses and it is an excellent optimization technique. So that is one that we definitely are going to be holding onto, with our own optimization process. But even though, our CSS is going to be inline in the head section we still want to work on our CSS in separate files. Trying to write CSS directly into the head section of an HTML file, is really not very practical. So we're gonna get everything set up, so that we can work on our CSS files externally, then have them in-line their HTML files later, so we get the best of both worlds. The next thing that we're gonna do is, make sure that to the greatest degree possible any JavaScript that we're using is combined and unified. I mentioned one of the down sides of working with amp is, you have multiple JavaScript files you have to bring in, and each one of them has to come in separately. But to the greatest extent possible, we're gonna take our JavaScript and we're gonna combine it to a single file, so that we have the absolute minimum number of browser requests, and to make both of those things happen, working on CSS externally and combining defining Javascript. We're going to set up a build process, that will make both of these things happen automatically. So we're gonna be using Gulp to do that. That means that, you are going to have to have node installed on your system, and your also going to have to double a little bit in, using a terminal, but i'll step you through what to do so even if you haven't worked with a terminal, you should be just fine. Next up when it comes to JavaScript, we're only going to be using async JavaScript, so asynchronous JavaScript, so in a nutshell what this means is, the way we're gonna load our JavaScript is not gonna prevent anything else in the page from loading at the same time. And then another thing that we will be doing with our JavaScript is, we're gonna be deferring it. So that means, that we're going to push our JavaScript right to the end of the rendering process. We're gonna make sure everything else in our site is fully loaded before we do anything with JavaScript at all. We're also going to make sure that every bit of JavaScript we use, is Vanilla JavaScript and we're doing this to make sure that we don't have dependencies. If we use say a lightbox that depends on jQuery, now we have to draw jQuery into our site and that's more far size and more processing for the browser to handle. It's often not necessary to use multiple JavaScript libraries. You can often achieve the functionality that you want, just as well with Vanilla JavaScript. We're also going to prefer simple JavaScript. So we're going to try to keep the amount of file size that our JavaScript takes up down to an absolute minimum. We don't want lots of bells and whistles, we want to keep everything as tight and efficient as possible. And the last point on JavaScript is, that we wanna make sure that to the best degree we can, we cater to people who have JavaScript turned off. Now, I just want to show you something quickly with the amp version and the non amp version of the site that we're gonna be creating. So this is the AMP version of our page. If we turn off JavaScript, you can see that we don't have much content to look at. There's a little more that we could do with this site to make it a little bit more fallback friendly. But for the most part, AMP does really fully depend on JavaScript in order, to give you any type of content at all. With our non-amp version, we've still got our background image showing just fine, and we're actually also inserting some fallback for the front icons here as well, because often people who block JavaScript block fonts as well. We have a message letting people know why the YouTube video can't appear, and the same thing down here where our code pen would be, we have a message letting people know why they are not seeing anything. And our gallery still shows up just the same, and then down at the bottom, we just have the text version of our Tweet showing as a fallback in case there's no JavaScript. That's a quick look at our JavaScript fallbacks, we are also gonna make sure we use lazy loading on both images and iFrames. So what that does is, if you have a site that is quite long, the person is gonna typically gonna look at what's at the top of that website first, and then they'll scroll down and have a look at the rest of the content. But you don't want to make them wait for the rest of that content to load before they can start looking at what's at the top of the content. So, with Lazy Loading, you only load what's at the top first, and then you gradually load the rest of the content as the person scrolls down. And then, finally, we're also going to make sure that we prevent Reflow. Something that you'll often see, especially on mobile, is that as slower elements load in, like images for example, the rest of the page layout has to readjust itself around the newly loaded image. And this is bad for a couple of reasons. One, it's just really annoying for a user. They'll be looking in one place, and then the whole layout changes, and they lose the piece of text they were reading, they have to refind it again. Then it reflows again, and the whole experience is just very bad. The second reason that we want to avoid reflow is, that one of the most expensive things that a browser has to do is calculate layout. And you wanna make sure that the browser only has to calculate layout once, so even before your images have loaded, you wanna make sure that you've allocated the correct space for those images. So the first layout that loads is the correct layout. So that's our optimization checklist. We're gonna check off each of these items as we go through, and prepare our site that's optimized with that end. In the next lesson, we're gonna get started on the actual development process. And we're gonna begin by just getting the basics of our project in place. I mention that we're going to be using Gulp, by way of node to handle our build process, so we're gonna get that set up. We're gonna get our folder structure set up, and we're gonna get the Gulp plugins that we need installed, and our Gulp file up and running. So we're gonna get that development ball rolling, in the next lesson. I'll see you there.

Back to the top