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

3.1 Add Lazy Loading Images and iFrames

One of the key ways AMP optimizes page speed is by using “lazy loading”, whereby content loading is staggered, especially in the case of images. Instead of using AMP’s amp-img and other custom elements to achieve this, we’ll set up our own lazy loading in this lesson.

Related Links

3.1 Add Lazy Loading Images and iFrames

Hey welcome back to Optimize Your Website with our AMP. So far we've gotten though all of the basic setup steps. So we've got ourselves a nice build system that's handling a lot of the optimizations that we need to do automatically. Now we're ready to start actually adding in some code. I want to save the trouble of having to type out all the HTML by hand and all the CSS. We're not trying to make this a course that's about HTML and CSS. We're just trying to keep the focus on optimization. So in your source files that you received as part of this course and inside this data files folder, you should see another couple of folders, one named CSS and another named HTML. In the HTML folder, you'll find the index.pug file that we already went over earlier, but you'll also find a page content, the HTML file, and that's going to give you all of the pros that you see on screen here. This is basically the unoptimized version of our site, we're going to go through and optimize it in subsequent lessons. You're also going to get in the CSS folder in the same area, all the basics of the CSS that you need just for page styling and then also so no script content. If you make sure that Gulp is running to give you your local height preview, this is what the code that you have so far should look like. So we've got our cover section here with some fun awesome icons down here. Got a YouTube video coming in. A pin from code pin imbedded by an iframe, some images and this sections blank we're gonna fill this in a little bit later. So that is what you should have so far. The first thing that we're gonna do is we're gonna take these images in iframes and we're gonna make sure that they are being lazyloaded. But before we get into that I just wanna quickly take through a couple of points related to this starter code. So first I am gonna view a quick look at the AMP version of this that we are building. Couple of key points, so for example, here you can see that these are all the individual scripts that are being loaded when you want to work with AMP. We're only going to be loading in two scripts. We're going to be loading in our index.min that we created earlier and we're also going to need a JavaScript file from Twitter, a little bit later on. And this is all the inline CSS from the AMP version. We're gonna be using a lot of this code in just the same way with a little bit of tweaking. The rules that AMP gives you for working with CSS are actually very good. And I would recommend sticking with those rules whether you're using AMP or not. So just to show you a couple of these solid principles in the CSS that we have in our startup file. You could see the very first thing that we're doing here is setting up our at font face styles so we can start pulling in our Font Awesome fonts. So remember whenever you're using web fonts you wanna get them coming in as early as possible. Like here this is a little different to working with AMP. In AMP it handles all of the responsive functionality for you with images, but we're going to be handling that ourselves, so we're including this little snippet of code to make sure that our images will always shrink if there's not enough space for them to appear at their full size. Another point here that's taken from AMPs way of optimizing CSS is that we're not using the star selector anywhere. It's a pretty common trick to use, to put a star selector at the start of your CSS and set box-sizing the border-box so that it covers everything in your entire site. But the star selector is more computationally expensive than just setting box sizing as in when you need to so that's what we're doing here. And then if you have a look at this code here, this is the code that we're using to set up our cover image. So if you look at this image that we have in the background here, typically when we create a cover image that we want to have showing up at the start of a site like this, we'll set it as a background image. But in this case, we're using it as a regular image. I'll just show you. As you can see in the code here in our pagecontent.html, that we are using this source to position that image behind our other content so it looks like a background image and the reason we are doing that is so we will then be able to target this image for lazyloading. If it was a background image we wouldn't be able to set it up for lazyloading. And then others that CSS is just for general purpose styling and responsiveness. You'll also notice that when you're working in AMP, this is where you'll need all of these custom elements. So we've got AMP image there, AMP YouTube, for placing a YouTube video, AMP iframes, so everything is all of these AMPs specific custom elements, whereas in our own code, we're just using regular old HTML. And then the last thing that I want to show you before we get into setting up our lazyloading is that we also have some no script fallback for our front icons. Now, obviously you don't need JavaScript to view Front Icons, but the reason that this is here is one of the most common reasons a person might not have JavaScript running is that they could be using the no script extension. If they are, than it's also very likely that that extension is gonna be blocking custom web fonts for them. So if we detect that there is no JavaScript running on a page, then we're also gonna give these fall backs for our font icons. So if we turn off JavaScript, then we just a text based version of each of out links here instead. All right, so now let's go ahead and get our lazyloading set up. Now you remember before that we already set up our JavaScript file to load in, and now lazyloading script is part of that JavaScript file so that's all ready for us to use. All we need to do to make it work is that the class lazyload to any image or iframe that we want the script to apply to. And then instead of using the source property,we're gonna use data-source. So, let's start working on that. So here we've got our background image. So we just copy it, paste it, add the class lazyload and change this source to data source. So that's it, that's all we have to do to set up lazyloading for this image. And the reason I left this tag up here Is you're going to turn this into our new JavaScript fall back so we're just going to add in no script. And wrap that element around our duel image. Now we can do the exact same thing for our iframes, all we have to do is add the class lazyload, or add it to both at once. Class = lazyload, and then we're also gonna change source to read data source. And because JavaScript does need to be active for this data source property to work we're also gonna add in a no script fall back for each one. Which in this case is just gonna be a message cuz that JavaScript to YouTube video can't play anyway. So we're just putting in a little message, Sorry this YouTube video can't be loaded unless you have JavaScript enabled. And we're gonna do the same thing for our little code pin sample here. So now if we have no JavaScript here, we can see our message and our message here. Up here, this image still works just fine without JavaScript. But if our lazyloading is on, now the image is being loaded via the lazyloading script, which means that if somebody is down here when they load up the page, then that background image up at the top isn't going to load until it's needed. Now we wanna do the same thing for all of our images here in our gallery. So for each one, we wanna copy the existing image element and paste it. Add the class lazyload, Change source to datasource and throughout the original image in no script tag. We go ahead and do that for the remaining seven images. I won't make you sit here and watch me type all that, so let's just skip forward til I have done that. All right, so there's all our images with the lazyload code added in and a no script fallback for each one. Let's check out our gallery as we scroll down, and by the way there you can see our code pin is loading in and as we needed it. And there are all of lazyloaded images. Now there's just one more thing that we need to do to finish implementing our lazyloading. And that is that when we have no java script running, that's going to mean that our lazyloading script isn't active. So in that case, we wanna hide the version of our images that's using that lazyload class. So that we can instead just have the images that we have wrapped node script tester instead. And the way that we're gonna handle that is through a function that's built into our lazylearning script, and that is, it will go through and it will remove any instance of the class node .js that it finds. So we've put the Node.js class here, on the wrapper that goes around our gallery. When JavaScript is active, then our lazyloading script will find this class and will remove it, and when JavaScript isn't active, that class is going to be there. So that means that in our no node script CSS, we can target that class to create a foldback. So we're going to add in, no-js as a class, we're going to target images with the class lazyload. I'm going to set them to display, none. So now, if we deactivate JavaScript, you can see that there's absolutely no change to our image gallery here, and that's because the versions of our images that would be being lazyloaded are now hidden, and our full backs that are in those no-script tags are being shown, instead. So now that all the lazyloading is fully implemented, it is a fairly straightforward process. And I should also mention you don't have to use the lazyloading script that I selected for this project, you can use any script you like. If you find that there's another script that works better for your project, then definitely use it. And the same thing goes for the other two scripts we're gonna be using a little later. All right, so in the next lesson, we're gonna do a little bit more work on our iframes here and here because at the moment these iframes are not responsive. So if we open up dev tools, you can see that even as we close down the width of our are here this is not changing along with it. An important part of optimizing your designs is setting up responsive functionality that's going to make a space for content before it's loaded in and have that space be the right size so the browser only has to figure out the layout once. So when we add a little code to ensure that these can resize themselves and keep their correct aspect ratio, what we're doing is making sure that first time the page layout is calculated, no matter what the size of the viewport that this site is being viewed through, then we're ensuring that we are allowing that one time only page lay out calculation. An with AMP, the way that that's done we just skip down to an iframe here. It's done by adding the parameter layout responsive. And the JavaScript looks at the set width and height that's been given to the iframe. And then it calculates the correct layout by some of those numbers. We're gonna go with an approach that's a little simpler. We're gonna achieve pretty much the same result. But we're gonna do it by adding one div and a little bit of CSS. I'm gonna show you how you can achieve that in the next lesson. I'll see you there.

Back to the top