How To Lazy Load in Webflow (But the Right Way)

today we're going to be talking about lazy loading how to implement it in webflow and some considerations that you might want to think about when implementing it because it might not be the best [Music] choice [Music] lazy loading is exactly what it says on the team it's loading assets only when you need them so traditionally when you enter a website it would it would load every asset that it needs that you've included in your project lazy loading means that when a a user is scrolling down your website it's loading images specifically images um only when they're entering the viewport so how do we do this well so if you open up webflow here um i've dumped in some images um that i have taken and if we click on the cog icon here you can change different types of lazy different types of loads you can eagerly load auto or lazy and by default it's doing lazy loading so if you don't want lazy loading and we'll get into why that might not be the best choice for you um it will automatically do lazy loading so you might want to click auto or eager is essentially the same as auto but if you've got if you've got browser settings or if the user's got browser settings that mean that lazy load all images then it's going to respect that so but this is being more specific so when i when i sorry let's change it back to lazy so if you take a look at my website uh published and you take a look at the network tag you can get that by right-clicking inspect and then going to network or pressing f12 and then going to the network tab you'll see that the this will show all the assets that are being loaded i can uh i can look at all the assets i can look at just the javascript assets we're interested in image one so let's just use images for instance so you can see it's loaded up the webflow banner icon and and some text i don't know what that is but as we scroll down what you'll see is it will detect that those images are coming into into screen and it will load those images so taking a little look a little bit closer if we inspect the images what you'll see is that somewhere on here you'll see a tag an attribute that says loading lazy and we've always kind of had this which is kind of strange and this is kind of giving you a nice little interface but if we were to say have um that on there um if we go on to if we go into settings here all it is is a is an attribute here if you go loading and lazy it's exactly the same thing so i would have preferred if they you utilize some of these custom attributes and what you can start to do with them it kind of opens it up a little bit but that's just my personal preference so that's a little bit about lazy loading and what it's doing and what's happening under the hood and and so you can familiarize yourself with that and unfortunately there is a new actually i saw it recently when i was i was reviewing a website that i've built um on web.dev which is which tests the performance of your website you can also go into google insights as well and the two exactly the same tools essentially i went and reviewed um i went and did a performance check on one of the websites i was building and it um warned me about something called cls and that's q and that's cumulative layout shift and it's something that google is being mindful of that when um when your page loads and there are further assets that that load subsequently later down the line and it shifts the layout of your page it's actually going to penalize you for that kind of behavior and so unfortunately lazy loading is one of those things the native lazy loading because we've had lazy loading for a long time now probably a good few years we've had lazy loading and it was it's a great thing to have in the browser but it's really not necessarily the best idea especially when it comes to this cumulative layout shift thing that google is penalizing websites for so um absolutely use it but i honestly think one of the one of the better ways to do it is the traditional way and that's using javascript and it's really it's it's it's probably four lines of code maximum and we can go through that line of code now so i just googled um to check if there's an element is within the browser window um and what what i came across was this website and and it has a as a really simple helper function um here we have a function called is in viewport and it's a nice name function because it's it's a question it's it's um it's saying exactly what it does and it accepts an element and what it does it looks of that element and it gets the bounding client wrecked and the bounding client wrecked if we have a little look get bounding client wrecked and look on um mozilla's um documentation well actually let's just read the topic the element get uh client wrecked method returns the size of an element and its position relative in the viewport and how that looks if i scroll down here we go how that looks is we get an x position a y position a width a height a top a right a bottom and a left so this is the x uh position where it is you know this is obviously on the left hand side of the screen it's 50 pixels sorry it's at the top of the screen it's 50 pixels from the left the width is 440 the height is 240. the top is relative to the viewport now so with this is 50 pixels from the top of the viewport so um and then when it basically when it gets to zero that means it's hit the actual top of the viewport so we can going back to our little um utility function here um we get that we pass the element in and then we get the the position of that element and we're returning this is just returning a a statement that if all of these items you see these ands here if all of these items equal true um then it will return true otherwise false so the bounding top is greater than zero so it's it's greater than the top of the viewport wherever that is on the screen and the left is uh greater than zero so as if you've got a sideways scrolling uh page um then we'll take into account that it's not necessary if the bottom is less than the window height so if it's with it basically with between zero and the top and and then the bounding right is it less than the window in a width so it's sorry i'm going to reverse myself here um if if it's within the left hand side all the way to the right if it's basically within the window it's exactly what it is and this there's not really you know you can copy this function and that you can use that anywhere the way i would probably do this is i would probably use a very low quality very highly compressed maybe even blurred version of the of an image and i would set the source of that image as that blurred image that what that will do that will maintain the width and the height of that image especially if you've got some css applied to it with a width and height it will maintain that image so you've got a low quality image stored as the source i would then add what they're suggesting here is a data image attribute add a data image attribute and you know that we can do that through here and data image and then we can put a link to a a you know a higher quality version of the image one that's gonna that's gonna slow down the website sort of thing so if we add the url to that and you could you could do that within our assets and get this click on this image here and then copy the url there there's url pop that in the in the data image data image attribute so taking a look at how they've done this we're going to have to swap it a little bit but they've put they've used a figure um and then put the data image attribute on there we're just gonna we would just use a an image and we so the javascript here is we get that image if it's going to be multiple then you use query selector or but in this case we're just going to use one it makes it easier so we get the an element with the data image attribute on that element and when the window scrolls fire this function and test if the image is in the viewport if that function returns true which as we looked at earlier if all of these things equal true means it's in the viewport then this is the line that's going to be different right so they've had they've got a figure here and they're just adding in a html and they're just adding um they're just adding html within that figure because this is what i would suggest uh in webflow because this is going to be an image i would replace it with something like the following let's um let's update this and go to console i would probably replace this function with image dot source equals um image dot get attribute data image i would replace it with that so we're saying the source is equal to that that um data image um value and that will replace the source and it will load our fancy um nice quality image that's my suggestion you know um of course you can you it's much simpler to use the lazy load function but if we're gonna you know if we're gonna prevent google from complaining us from communicative layout shift um then this is the way to do it you can also do other fancy things like uh blurring it or or doing nice fades you know um you could add a class potentially to that that would change it from you know i don't know um to transition the color or to like i say to fade it or something like that there's a lot you can do basically within this function the bare minimum is to obviously replace the source but you can do whatever you want to manipulate that image so that's a little bit about lazy loading it's great that we have it inside of webflow natively but i think it's a very very very primitive version of lazy loading i wouldn't necessarily suggest it for for a lot of websites really because just because it pops in you know it pops into the website and it doesn't necessarily look it makes the website feel slow because it's popping in it looks as though it looks as though those images have taken all that time to load so it's not my preferred method of lazy loading but like i say it's great that it's there if you can i'll put this link in the description if you can implement the javascript for the lazy loading then please do so um and and have some fun basically to maybe fade or do certain things like that if you need some help let me know in the comments because i'm more than happy to jump into the comments and give people guidance on there that's a little bit about lazy loading and until next time happy no coding [Music] you

Channel: Samuel Gregory

Views: 1,803

Keywords: Webflow, HTML, CSS, JavaScript, Web, development, web, fundamentals, website, code, learn, coding, webflow, build, websites, nocode, no, codenocode, accessibility, seo, search, engine, optimisation, Basics, Learn, learning, html, web fundamentals, webflow masterclass

Id: 4lFAeWybZcg

Length: 12min 32sec (752 seconds)

Published: Mon Dec 14 2020