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

  • Overview
  • Transcript

1.3 Overview of What We’ll Be Making

In this course we want to make absolutely sure we’re working with techniques that will create load times as fast or faster than AMP. For that reason, we’re going to recreate the same site we built in our course Up and Running With AMP, directly replacing each AMP-based element with code you’ll set up yourself. In this lesson, we’ll take a quick look at how we’ll go about this.

Related Links

1.3 Overview of What We’ll Be Making

Hey, welcome back to Optimize your Website without AMP. In this lesson, we're gonna go through and have a look at what we're gonna making in this course. So I wanted to make sure that the techniques that we're gonna go through in this course compare to AMP on a one to one level. And I think to establish that a set of optimization techniques can step against AMP, which is very good at optimization. The best way to do that is to take a site that's already been built in AMP. And then rebuild it without AMP with all the same types of content included. And see if it can be made to load as fast or maybe even a little bit faster than the AMP site. So this here that you're seeing right now, is the site that we built in another course called Up and Running with AMP. So it comprises of this cover section here. We have a big background image filling this cover section. We've got some icons, then below here we have a YouTube video. We have a CodePen embedded to show how working with iFrames works. And then we have a gallery. And if you click on the gallery items, you get a lightbox. And then finally at the bottom, we have three embedded tweets. And those tweets are turned into a carousel. And that's all using the different AMP custom elements. So that is our original AMP site, this is the same site rebuilt but optimized without amp. So, once again, we've got the same background image, the same icons and pretty much the same text here. We've got our YouTube video, our embedded Pen, our gallery, again, with a lightbox. And then down at the bottom, we have our tweets in a carousel. So now, the real test is how does the load speed compare? We're gonna test that using Chrome DevTools. So what we're gonna do is just right-click on the refresh button and choose Empty Cache and Hard Reload. And we can watch the speed that the content finishes loading at. So here we've got 2.97 seconds for the app page. And we'll do the same thing for the pages optimized with our app. Right-click, Empty Cache and Hard Reload And for this one it's loaded in 1.43 seconds. So that's what we're trying to achieve. We want it to load just as fast or a little bit faster. Se we just repeat the test to be sure. 2.81 seconds for the AMP version 1.78 seconds for the version optimised without amp. We'll just do one more quick test. Right now we are not throttling. So we'll just simulate somebody on a mobile connection, we'll say, with fast 3G. We'll switch that over, on the version without amp as well Let's do another test, this is gonna take a little longer. All right so that's 11.38 seconds for the amp version. For the non amp version. We got 8.51 seconds. So, both With and without throttling a version that we've optimized without using Amp is still giving us slightly better results than we have when working with an Amp website. But the type of site that we have here, whether it's built with Amp or without Amp, those are still reasonably good times to achieve. We just wanna make sure that if we're gonna be doing it ourself that we're at least getting as good results or a little bit better. So what is it that's actually powering this? Let's close down the dev tools here. So there's a few things that we're gonna be going through. We have fonts here, actually now I will show you in the non-AMP version. So we have a font here that has to be custom loaded and for this text here as well. So we need to make sure that that's being loaded efficiently. We have images in the background here we have one. And then we also have the other images down the bottom. We need to make sure that each of these is lazy loaded, so that means it doesn't get loaded until it's really needed. We're also lazy loading our I frame. So our code pen and our YouTube video. We're using a little custom JavaScript for the gallery and for the carousel. So we're making sure we're doing that as efficiently as possible. And overall we're making sure that our CSS is written in a very efficient and optimized way and it's also loaded in an efficient and optimized way. So that's what we're gonna be going through you're going to take this original AMP site that we built in another cross. And you're gonna convert it into this site without AMP. So in the next lesson, we're gonna go through exactly what it is that we need do in order to achieve the loading space that we have in outside that's optimized without AMP. Now a lot of these optimization techniques have come directly from AMP's information that they have posted publically. We are just taking those techniques and we are implementing them in our own way. So what we need to make sure to get everything as optimized as possible is a checklist of everything that needs to be done in a site development process. So the next lesson we are gonna go through what the items are in that checklist and we will just have a little bit of an overview on why they are necessary as part of your optimization process. So I will see you in the next lesson.

Back to the top