Lazy loading is too easy now

Key Takeaways

a little while back i made a video about lazy loading where i used intersection observers to do it because it was more performant than using like a scroll listener or something like that pretty easy to implement and a really good use of intersection observer and i was really surprised because a lot of people seemed against the whole idea of lazy loading and i wasn't sure if it's because you had to bring in some extra javascript or because you're using third party sometimes to do it or you know there is that issue sometimes when you're scrolling down a page and the image comes in after and the content shifts and stuff like that there's a whole bunch of things that i guess people could be against but it's just a good idea to implement on your site if you want people sticking around on your website you need it loading really fast if you want google liking your site you need it loading really fast it's all about performance and speed these days you need these things going and lazy loading is a really easy way to add an extra performance boost and while i looked at intersection observers for it before there's a native way to do it in the browser now it's super easy to implement so we're gonna see in this video not only how easy it is to implement we don't even need any javascript it's literally like 15 characters something like that it's really short we're also going to see how we can you know i think a lot of people get annoyed with lazy loading because you seem to get it's more often you get those jumps in content you scroll your reading and then all of a sudden everything gets pushed down you have to re-scroll and nobody likes that so we're gonna see how you can prevent that from happening let's go and see how this works hi there and welcome to this video my name is kevin and here on my channel we learned how to make the web and how to make it look good with weekly tips tricks and tutorials just like this one but before we do dive into this tutorial i do want to let you know that this video is being brought to you by none other than skillshare skillshare is an online learning community with thousands of amazing classes including design video and of course front-end development i signed up for them at one point because i wanted some quick photoshop and illustrator tutorials and i loved what i went through but i also ended up diving into a whole bunch of other classes while i was there there was just tons of high quality content now when you sign up for skillshare you get unlimited access to thousands of classes plus a lot of them include hands-on projects you can work on and you can get feedback on the work that you do in those projects from their community of literally millions of people it's a really awesome platform with incredible content including getting started with css grid by none other than rachel andrew so if grid is something you wanted to learn you find it is a little bit confusing you're not sure where to get started with it there is probably no one else you'd want to start learning grid from than somebody like rachel andrew who helped spearhead the whole getting grid to be a thing so i mean you can't ask for better than that if this sounds interesting to you make sure you go and click the link down in the description below the first 1000 of my subscribers who click on that link you'll get a two month free trial of their premium membership thank you very much to skillshare for sponsoring this video now let's go talk about some lazy loading so we're gonna look at first is what is lazy loading and we talked a little bit about why you should care about it already it's all about performance but it's all about making images that the user hasn't scrolled down to yet they don't load because you know if a user hasn't scrolled there we don't need all these things loading in for nothing it's not only for images either it is for iframes as well and iframes are notorious for being really slow so for both of these things you can just help that first paint of your page come in much much faster and be fully loaded so here we are in vs code you can see i've brought in a whole bunch of images here and i've made this really long page and it's really just like a demo page a whole bunch of images that are all stacked on top and tons of filler text um and i'm bringing this in just to show you really how um you know the power of lazy loading so the first thing i'm gonna do is open up my console and we can see i'm already on my network tab here so if you're on inspector and i am in firefox but if you're in chrome it's exactly the same i'm sure safari has something like this as well and one of the nice things with this network tab is i'm going to disable cache so it's if somebody's the first time they're on their site or their cache has been cleared for some reason and you can simulate different types of connections that people are on so we always develop locally things load you could have like a five make image and it's gonna load instantly because you're local on your machine that's not realistic to the real world um we're also a lot of us developers we're on state-of-the-art devices all the time that's not realistic always to the real world you get bad connections for whatever reason even if it's a bad wi-fi connection um so let's go to a good 3g connection and i know everyone's like oh we're on 4g now 5g is coming not everyone in the world is on that you're on old devices there could be a number of reasons why things are slower so let's simulate what it is so by doing disable cache good 3g i'm going to refresh my page and you can see there's some stuff going on here we're not going to worry but you can actually see how the page took some time to load in there and what's happening with this network tab is you can actually see how long everything's taking to load in so you can see that it first took 96 milliseconds here you can see nothing was really taking too long oh i have type kit so that slowed things down slightly um it blocked the site from loading for 26 seconds and then it had to wait a little while before finally it got what it needed but where did things really slow down here we had some images that were coming in and then oh well look at this some of these images they took a long time to come in my goodness and they're not even big images like 49 kb 19 kb some of these ones that took a lot longer they're like 12 kb but it took a long time to receive this because it's a slower internet connection huh that's interesting right and so all these were coming in you can see it took a while for the page to finish coming all the way in to get to that last image so and again let's just hit refresh and see it takes a little while for that to come in and then obviously all this is everything is in there now but these images are tiny images right um but before we we look at what happens with bigger images i want to show you how easy this is now because as i said you could do this with javascript i'm just going to go there if you don't know about this in vs code you can place your cursor in multiple places at once so i'm just holding down alt while i do that because i am on windows i'm guessing it's option on a mac but i could be wrong on that one so what i'm right now is loading is equal to lazy nice and easy right and let's hit save and whoops i forgot let's uh i wanted to do that down here as well so let's come down here and do it on these ones as well could have done that all at once but that's all right loading is equal to lazy and we'll hit save now let's open that network tab back up again and you'll notice there's a lot less stuff in here where's the images they haven't loaded in there's been no network requests for those images that is interesting right and now uh i want to leave this up here let's just shrink this down a little bit on the side here um like that so we can see as i scroll here and before we get to the images or right as the images came in you can see boom all of those came in and but it's only stopped at image number seven because then i had that wall of text so now i'm gonna keep going and then as we approach we're going to get to some text in a second and then and then as i approach the rest of my images suddenly those ones all load in as well and then we get those other images that are right there cool right so we're only loading the images in as we need them and that's what lazy loading is so if you're on a slow internet connection you're on a mobile device it's websites loading slowly whether it's a bad wi-fi connection or you don't have great um you know you are on 3g for whatever reason this could save you a lot of data because if you're not scrolling you're just clicking to the next thing that's really cool or if you are scrolling it's only loading them in as they need them so right away there's a huge performance boost and as we saw from the very beginning the initial page load much much much faster because there's a lot less things that need to be loaded in for the page to be fully rendered so that's really really cool now one thing just really fast let's just say i'm going to go to my css here for one second i made this big top area where i did 100 vh because i wanted my images to be off screen at the beginning it is recommended that if the images are visible at the when the page loads that you don't actually put loading equals lazy on there we don't want this to load in lazily we want it to be there right when the page loads so i could come in on say the first four images here just because i want to be safe and you know you don't know screen sizes and stuff and i could leave it off on those ones and then i could leave it on for anything that would be lower down on the page and that would be completely fine uh another choice that you do have is you could actually come in and put eager on these um eager is the same behavior as if it wasn't there though um so eager saying no matter what even if this could be like an image all the way down at the bottom load it in even if i even if it's not close to being in the viewport um now we don't have to include this because it is the default behavior so if you just leave that off then you're not changing anything or not changing too much there so that is an option as well right there but we can include the lazy it's generally not something you'd want to do if it's something that is above the fold but if it's anything where a user would scroll to see it then you'd want to include your loading equals lazy now to show you i think one of the issues that people do have with it is these jumps that happen so i do want to show you what i'm talking about and i have these extra images that i have right here so let me just see if i can uncomment those and let's take these ones out because we're gonna have too many images if not we'll hit save and if i come down far enough we'll find some big images right here there's one and there's more but this one's loading in slowly oh boom there's another one and then come on slowly but surely these are big images they're each over a meg and we're on a slow internet connection and boom there's the next one and actually i had lazy loading on these already so let's just take that off and just to show you um it is an exaggeration what i'm doing in this case but i'm gonna come all the way up uh let's bring this guy over here um and when the page reloads you can see that big one is coming in and actually can we get that cascading the waterfall you can see we're sort of stuck right now actually it's taking so long for these images to come in it has actually caused a bit of a problem a bit of a backlog my image number three hasn't come in yet you can see the page is still going oh boom there we go big three has finally come in um this is really slowing my site down with these big images that one's three megs this one's one mag so this is like putting the brakes my page is still loading right now it's really putting the brakes on now don't use lazy loading to get around images like this please uh don't go oh i can now put a three megabyte image in my website that's not at all what i'm saying i just want to show you one of the problems that lazy loading can cause and the fix that you can use for it so that's why i brought these huge images in so here let's add the the lazy loading back in when i scroll down though what's going to happen is i'm going to get to some text and then boom oh it's gone my text okay it's okay let's start reading this da da del or mipsum concentor oh where'd my content go okay oh there it is again fugets in a dumb essay iran possum i can't read latin but oh my content just shifted again i'm sure you've been on a phone or something like that's happening it's usually ads that are the culprit here where as the ad loads in uh all of a sudden the content on your page is shifting around one really cool thing with lazy loading is you can also do this on iframes as well so that could be useful for ads um and another thing you can do with iframes as well as images is you can give them width and height attributes so i would strongly encourage doing that on any images you have um so i'm gonna speed this up just as i bring a width and a height on here okay so there we go you can see i now have my width and my height on all three of these images and so let's uh here come back up to the top and hit refresh and all our content should start coming in but the advantage now that i've given it a width and a height is when i get here you can see there's actually these big blank spaces so even though the images haven't finished loading in yet there's gonna be no jumping content when that image comes in there's a placeholder here now it's completely blank placeholder or it's holding that space because the browser knows that image is coming so by assigning the width and the height on here it's automatically just going to work and you're not going to get weird jumps in content this is the same for iframes as well um and another advantage and cool thing with this now actually is firefox was the first one to do this chrome has implemented it and safari is in the process of implementing um another feature that comes with your width and your height and what that is is if you assign a width and a height the aspect ratio of the image is automatically calculated by the browser so when we resize things with css because these are massive like do not have images that are this big in general on your site unless you have a really good reason but these are huge they're not that big on my screen right now because i'm using my max width and my height auto to resize them if i resize this my images are resizing with my browser window right here the viewport grows and shrinks they has to be resized and when images were resized it actually used to cause things to be repainted a little bit the browser had to recalculate everything if you have a width and a height assigned as attributes now it actually speeds everything up it makes everything a lot smoother uh when you have something like this that's on there now you do have to make sure you don't only have a max width because if your height is not set to auto they are going to stretch because it's going to keep the height attribute that you put on there so you will have to put max width 100 and your height of auto um to actually get everything to work and not to be broken but overall it can work really really well now there are more advantages to doing the lazy loading here with this as well now every browser technically can implement it a little bit differently but the google for example they actually show that if something's on a 4g network images will load in when they're 1250 pixels away from the viewport but if they're on a slower connection like a 3d can a 3g connection and just start loading them in when they're 2500 pixels away instead so with javascript it was always just based on intersection observers or scroll event listeners and as an image got closer it didn't know about the connection speeds and other things like that so the nice advantage here is the browser can figure that out it goes oh it's a slow connection i'm going to load it in earlier oh it's a really fast connection i can load it in just as soon as that image is coming into the viewport another really nice thing with lazy loading images like this is even it's right now the browser support is pretty good it's not perfect but it's coming along it's in firefox chrome and in safari it is behind a flag so it should be coming pretty soon but the nice thing with this is is if it doesn't work your image is still going to load right so it's not that big of a deal you could even if you wanted to rate some javascript so if it doesn't work then you could bring in uh your own implementation of it or something like that but you do not need to do that and another thing you can do as well let's go all the way up to the top here um just for one last image let's say you have a picture element and here we go so it's done let me just bring it out a little bit so you can see here i have a picture element that's bringing in a web p and the default is a regular image with my fallback pretty much here and so if i hit save on that it should load in my image at the top and if i go and take a look at that image itself so you can see it's right there let's go to my network again actually and uh you can see it has loaded in my webp image right there so actually if i turn off this one and we go take a look we shouldn't see a zero one anywhere except for the webp so even though i have loaded in my image with this this is the fallback it's going to use this source instead and using things like webp is another really nice way to optimize your websites if you haven't dove into the world of webp and other things like that i have a full series on optimizing images for the web that maybe you'd be interested in you should be able to click the link on there right now i want to say a really big thank you to skillshare for sponsoring this video if you are interested in checking out their deal for two free months go and click that link down in the description below a massive thank you to my patrons for helping support me every single month you guys are absolutely amazing and of course until next time don't forget to make your internet just a little bit more awesome