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

4.1 Checking Off the Checklist

You just completed “Optimize Your Website Without AMP”. Nice job! Let’s quickly go through and check off the items on our checklist as we summarize everything we’ve covered.

4.1 Checking Off the Checklist

Hey, welcome to the final video in our optimizer website without course. You remember in one of the first lessons we've been through check list of older things that we would be doing in order to make sure that our site would be really optimized to a degree that it puts it on the same level as app. So, now, let's go through those list of items, and we'll check them off one at a time, and we'll just quickly summarize what we did to achieve each one of these points. So, first off, we said that this site would have to load as fast, or faster than an app version of the same site. We achieved that, we're typically around a second faster, give, or take. We're going to check that one off. The next thing we said, we would have web fonts loading as early as possible, so that they would come in fast. We did that by making sure that our Google fonts were the first thing happening in our code, letting those in. And that the first thing that was happening in our CSS was our font files coming in. So, we can check off that item, too. Next thing that we wanted to do was write efficient, small size CSS that would be loaded inline in the head section. So, let's check out what file size we ended up with our CSS. The guideline for Amp is that you see it says, it should be no greater than 50 kilobytes and there's some really popular CSS frameworks that will come out at at least 250 kilobytes, no matter what type of site you're creating. So, let's have a look at our main style sheet, the mini file version, this came in at 6.9 kilobytes. So, still loads of room to move, if you're right CSS very efficiently, it doesn't need to be massively sized, and then we had our no script CSS, which came out at 482 bytes. So, we're well, well below the limit. So, we're gonna check off that item as well. We also said, that we were gonna write our CSS in external files, as we did. That we would combine and minify our JavaScript. So, we had three different scripts, one for lazy-loading, one for our Image lightbox, and one for a carousel, and we combine those together and unified them. We couldn't combine in the Twitter widget sometimes you have to make compromises, but as long as you do everything in the most efficient way that it can possibly be done, then you'll have a little wiggle room for things like that. So, we did that, we're going to check that one off. We set up a build process to make both of those things happen. So, check that off. We only used a synchronist Java Script. So, we loaded in only two Script and both of them was set to be Async. So, we will check off that as well, we make sure that our JavaScript was the third, it was loaded at the bottom of our code, and it was only run after everything else had loaded, so we didn't block anything from happening on our page, so we're gonna check that item off as well. Mention that we use only vanilla JavaScript, we didn't use anything that depending on jQuery, so we didn't have to load jQuery, we'll check that off. We went for simple JavaScript, so that it would be quite small. The eventual size of our JavaScript came out at 25 kilobytes, so that's really good. Check that one off as well. We created a whole bunch of non-JavaScript fallbacks. So, we gave people different options to view the content, where we could. And where we couldn't, we made sure that we at least included a message to communicate. We'll check that one off too. We want to use lazy loading on all our images and I frames, we want to do that with our lazy loading script. And we also want to prevent re flow events, so that we want to avoid any layout calculations. So, we do that by doing a little bit of CSS to control how the images are processed, and by adding in the aspect ratio CSS with our I frames to resize dynamically with the page size, but done in such a way that the first time the page that I was calculated was the last time. And it wouldn't need to be recalculated as content was loading in. So, we're gonna check that one off too. So, that's it, we have completed every single thing that we set out to do on our list. And what we've ended up with is a site that is quoted exactly the way that we wanted to. Obviously you can change anything that you like in the way that this is built. You can use different scripts, you can cut it up in different way, you can choose the different type of JavaScript fallback. You can do anything you like. And when you deploy this out that is built like this, you're gonna have complete control over everything that happens as part of its deployment. And then, most importantly of all was made sure that our load speed is as good as AMP if not a little better. So, everything that we've step through in each one of our lessons is designed to be pretty much an example of ways that you can implement a kind of principles that we included in this checklist. So, as long as you stick to those principles, you can do your coding however you like. It's those principles that are going to get your sites loading really well. And they're going to be at the crux of allowing you to optimize your websites without end. So, I hope, all that is going to be really helpful for you, and that you be getting some great results soon putting these top optimization techniques to work on your sites, and yielding some rewards from your enhanced levels of optimization. Thank you so much for taking this course, and I'll see you in the next one.

Back to the top