Lazy loading is too easy now
Рет қаралды 146,218
Күн бұрынThe first 1000 people who click the link will get 2 free months of Skillshare Premium: skl.sh/kevinpowell0820
Lazy loading can be handled by the browser now, rather than having to write our own scripts for it or relying on a 3rd party. This is awesome because, first of all, it's incredibly easy, and also because the browser will look at things like connection speeds and the user's device to decide exactly how to implement it, all without us having to worry about it. There really is no excuse not to take advantage of and get a nice performance boost for your sites.
/// Links
My video using Intersection Observers: • How to lazy load images
Chrome developers page - web.dev/native-lazy-loading/
Smashing Magazine - Setting Width and Height are important again: www.smashingmagazine.com/2020...
/// Timestamps
00:00 - Intro
02:45 - What is lazy loading
03:27 - simulating slower devices
05:38 - adding lazy loading
08:58 - preventing jumping content
13:28 - advantages of native browser lazy loading
14:54 - lazy loading with the picture element
This video was sponsored by Skillshare.
#html #lazyload
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZfaq channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
@KevinPowell 3 жыл бұрын
The first 1000 people who click the link will get 2 free months of Skillshare Premium: skl.sh/kevinpowell0820
@SALMANKHAN-zz4gi 3 жыл бұрын
thank you kevin ! i'll be most productive for the next 2 months now
@MrAndi1281 3 жыл бұрын
Hi @Kevin Powell would it make sense to use this together with web.dev/content-visibility/?
@KevinPowell 3 жыл бұрын
@@MrAndi1281 the only issue with content-visibility is the lack of support outside of Chrome. Wouldn't hurt though!
@MrAndi1281 3 жыл бұрын
@@KevinPowell i know, support is lacking a lot but the sooner people know about it, the better right?
@Vaeshkar 3 жыл бұрын
Damn 33,000 clicks to late.
@bobdinitto 2 жыл бұрын
I'm really glad you mentioned that developers generally have more powerful devices than average users and should account for that in design and testing, as I think this is often overlooked.
@emmaaberg3566 2 жыл бұрын
Conclusin: Add loading="lazy" to all and that users need to scroll down to see. Add a fixed width & height to remove any problems. This will speed up your website.
@BlackxesWasTaken 8 ай бұрын
You are a hero Kevin. I was yesterday JUST about to start learning how codesplitting in vite and lazy loading works because of my project getting bigger and more complex.. I stopped yesterday and pushed it to today since I was tired already and boom.. KZfaq suggests me this work of art.. thank you!
@IconicProps 3 жыл бұрын
It is a nice format that you explain what you want to talk about, before putting in a intro animation no one really wants to sit through. Not to mention greate information. As a developer its nice to listen along to things I think I already know, and then out of nowhere learn something new.
@CarAudioInc 3 жыл бұрын
I have page on my website with thumbnails, modals that have a slide show of images in them. It's a pretty hefty page to load all at once. I did lazy loading to the slide show pictures. What a difference! Thanks man, love learning little tips like this.
@joerho 3 жыл бұрын
The developer tool throttling tip saved me future headaches... my website was so slow on mobile devices. Thank you so much for that tip.
@JohnSmith-rn3vl 3 жыл бұрын
I used the intersection observer technique based on your previous video (customised a bit for our use) and doubled our page speed in some pages. Great for google ranking. Thanks.
@KevinPowell 3 жыл бұрын
That's awesome!
@sethrandall9263 3 жыл бұрын
Awesome video! This is exactly what I was looking for when getting started with native lazy-loading.
@samkeen 3 жыл бұрын
Wow, love the different loading distance based on connection speed!
@ThomasIkemann 3 жыл бұрын
Just KZfaq'd for lazy loading and thought I need a degree to implement it. Never considered it would be THAT easy! Thank you alot!!
@iamtharunraj 2 ай бұрын
Wow, thank you for this video, Kevin. I'm surprised how easy it is to implement but I didn't know about it. This video has helped me so much!
@daveskye 3 жыл бұрын
Great tip! - Will be using this one, nothing to lose!
@TrixyJ 3 жыл бұрын
Amazing tip. Especially on lazing loading for big images.
@bF93712 3 жыл бұрын
Great to see Timestamps! Nice tutorial!
@nielslytzdk 3 жыл бұрын
Very nice, much easier than doing intersection observers. Thanks Kevin :)
@joakimjohansson7729 3 жыл бұрын
Just found your channel, so much great content, thank you!
@stewartw.9151 3 жыл бұрын
A great tip which I did not know about - thank you Kevin!
@chiky22lp 11 ай бұрын
Hey! Thanks for the 2 months of Skillshare, still working. Great tutorial 🙌
@aram5642 3 жыл бұрын
Yeah, you just made me realize I should refresh myself on the picture and figure elements...
@sammygitongar9262 Жыл бұрын
Great job, Kevin.
@shaderone07 3 жыл бұрын
This is really an amazing tip...Thank you very much kevin
@bluecafe509 3 жыл бұрын
You sir are a gentleman and a scholar.
@soviut303 3 жыл бұрын
You can middle mouse drag down through multiple lines to create a vertical multi-cursor as well.
@s.a6668 3 жыл бұрын
Another great tip!
@adrianfiedler3520 3 жыл бұрын
That moment you use intersection observers for lazy loading and then Kevin tells you there is a "loading=lazy" attribute on images ...
@ne9835 3 жыл бұрын
Lolll!!! 🤣
@Rhidayah 3 жыл бұрын
observers js utility: "I'll handle that" loading=lazy attribute: "i'm about to end this man's whole career"
@J90JAM 3 жыл бұрын
@@Rhidayah Intersection Observer is more versatile still.
@thulo5204 3 жыл бұрын
literally burst into tears
@elimcfly350 2 жыл бұрын
this just changed my life haha
@xcoda 3 жыл бұрын
A great tip Kevin. I owe you this knowledge
@xcoda 3 жыл бұрын
I've been studying front end for long time now. I've always felt unready to start making some income from the skills and when I do want to start, I don't know where to start from. How to get myself out there. Any advise please. I really need it
@justinoneill2837 3 жыл бұрын
_loading="lazy"_ _mind="💥"_
@freekieh9235 3 жыл бұрын
Hotel=“trivago”
@justinoneill2837 3 жыл бұрын
@@freekieh9235 I know... I look like the trivago guy
@freekieh9235 3 жыл бұрын
@@justinoneill2837 lmao
@vildanmorina2499 3 жыл бұрын
kzfaq.info/love/QW4cq2UBJKb4GWhzposDTg Subscrie the Channel please. I am going to upload Video Content about Web Development
@mario7501 3 жыл бұрын
This is amazing. Had no clue this feature existed
@vikasnigam9646 3 жыл бұрын
Very well excellently explained
@namakudamono 3 жыл бұрын
Thanks for the video Kevin. I’m using the lazysizes JS for this purpose, however it’s great to see similar functionality being implemented in the browser natively. You touched on it a little here, but may I ask if you would consider doing a video on CLS in the future, please? This will be a Google Pagespeed metric in the near future, so I’m trying to work on my employer’s website to reduce layout shift as much as possible. Any tips would be greatly appreciated. Keep up the great work!
@codearabawy 2 жыл бұрын
Loved it!
@davidaragon7741 3 жыл бұрын
I'm so glad I watched this video else I'd still be using some JS for this, heres your Like good man!
@mohamadhelaly4979 3 жыл бұрын
Thanx alot as always you are awesome 👌
@MrJahchap 2 жыл бұрын
Great one Kevin as always. Please how do you do same for background images?
@castlemoyle 3 жыл бұрын
I use a lot of your lazy loading using JS for a site I support that has an enormous number of scanned advertisements (from the teens-40s). Either the images are small to load quickly or they are large so you can actually read them. Your earlier lazy loading makes the pages load way faster. Now I'll have to play with this and see if it's as easy as you say it is. (Grin)
@diblui 3 жыл бұрын
You're better than netflix to me ❤️
@Framework-kg6gt 3 жыл бұрын
Thanks m8. Big help.
@_timestamp 2 жыл бұрын
Thank you!
@MroMroMarc 3 жыл бұрын
You're the best!
@joulesgarcia400 3 жыл бұрын
Thank you for this maaaaaaaaaaaaaaaaaan!!!!!!
@GiancarloCarccamo 2 жыл бұрын
great video
@birdofhermes6152 3 жыл бұрын
Thank you a lot.
@romuloalves9349 3 жыл бұрын
Ótimo vídeo parabéns ✌.
@psinke 3 жыл бұрын
Nice. Hadn't seen this feature yet. Thanks. Will the lazy loading also work in combination with the 'srcset' attribute of the img tag for multiple image sizes?
@andrewcourtney3480 3 жыл бұрын
Great video Kevin! Could you maybe do a roundup of lazy loading image content - whether it's block-level images or background images? I've tried various JS plugins which have been hit and miss for this type of thing.
@ryansandigan7184 3 жыл бұрын
Oh wow, native lazy loading but I am more amazed at your css img { max-width: 100%; height: auto; } That's what I need! Because I am doing lazy loading in a hard way >_
@Smackindaface 3 жыл бұрын
Hey Kevin, could you do a video on google pagespeed insights? Specifically Largest Contentful Paint
@SahraClayton 3 жыл бұрын
Good video
@CastleShield 3 жыл бұрын
thanks
@TylerThomas Жыл бұрын
What size do you recommend a standard blog image be in megabytes? 3MB sounded reasonable but I guess not! Love your content, thank you for sharing your knowledge.
@wats-on-Internet 2 жыл бұрын
Hi Kevin Thanks I think I have watched almost all your videos and am doing the 21 days Great work!! I am looking at a website for photos. I have in effect 4 cols on a big screen and this reduces to 1 col on smaller screens. You say in the video “don’t us lazy load where the photos are above the fold”. So I have 12 photos above the fold on a big screen and only 1 on a small screen, where lazyload is likely to even more important. How do I deal with this for the 4 - 11 photos that need lazy load dependent on screen size? As this comes in the HTMl not in the CSS. Will lazyload on images that are sometimes on the screen at load cause a problem, or did you say that just because it is not needed?
@NimbleWands 2 жыл бұрын
Thanks!
@KevinPowell 2 жыл бұрын
So sorry for the late reply on this one, YT doesn't do anything to notify us of the super thanks... but thank you so much!
@3asel455 3 жыл бұрын
Gotta love having a 6mb download and a .3mb upload :D
@safintheship 3 жыл бұрын
Thanks
@Holy_Frijole 2 жыл бұрын
Question. I want to redo my portfolio site and have lots of images in a lazy loading grid/masonry. [6:30] in this video you demonstrated that a wall of text stops more lazy loading batches of images. Sooooo, what's the best practice to load batches of no more than X number of images at a time? Will I need JS?
@unleashthedog 3 жыл бұрын
My problems with lazy loading are definitely the jumping issue described, but also the content end up not being searchable with the browser find function. And I've often seen this used in page displaying lists [that you naturally want to search, and being text wouldn't be heavy to load]
@KevinPowell 3 жыл бұрын
This is only for images and s, so I don't see how it would effect a list? For that type of issue, it's where JS is at play and hiding content.
@robertlinder8464 3 жыл бұрын
There will be no layout shift if you specify the (intrinsic) width and height of the images, just as he did in the video.
@unleashthedog 3 жыл бұрын
@@KevinPowell I'm not sure how it has been implemented, I assumed JS like you say. But if you apply this method to a for example, wouldn't that create the problem I mentioned?
@equintar 3 жыл бұрын
Thank you for this trick. I want to know your opinion about a responsive carousel and this lazy loading feature. Could it replace third party JS coding?
@michaelunderwood433 3 жыл бұрын
Great video, but I compared js lazyloading with this native method and would have got an advantage only if it were possible to alter (and reduce) the vertical distance between the viewport and image where the native load image is triggered.
@mattvega 3 жыл бұрын
A UX consideration: A placeholder background would be great
@v0xl 3 жыл бұрын
with moving line (pseudo-element with box-shadow)
@jamesc86808 3 жыл бұрын
blurred, low res version of the image is usually a good solution
@welikerosafloyd 3 жыл бұрын
Any example of these? I think I don't understand
@jamesc86808 3 жыл бұрын
@@welikerosafloyd Yeah -- On youtube, as you are scrolling down, before they load the video they load a simple placeholder widget that looks like the outline of the video/text before loading the videos. Tells user where to expect content and helps with preventing things from jumping around by "reserving" the space with the placeholder that has the same dimensions as the content.
@welikerosafloyd 3 жыл бұрын
@@jamesc86808 Great example man, I see what you're saying. Thank you!
@justinoneill2837 3 жыл бұрын
so freegin awesome
@FaisalMalik-fu5vn 2 жыл бұрын
Hey, Kevin great video! Can you please guide us on how to disable WordPress native lazy loading for the hero/featured image or largest contentful paint?
@mattwood8659 3 жыл бұрын
okay seems easy. But I have a question/concern. What about dynamic websites with the whole below and above the fold thing. Such as an e commerce shop and there will be products listed above the fold but also the fold is not set as it depends on whatever browser, so you don't really have control over which ones will be above or below the fold, it's either one or the other as you're using php to code only one product-card that then gets reused and repeated for each product. So you can't really have control over which will have lazy or not. If that makes sense. Also with browser support, how are supported it the aspect ratio thing, because if that isn't supported fully yet then do you end up with gaps on responsive sites?
@TheLucidway 3 жыл бұрын
Mr. Kevin, really good breakdown. I just have a question about setting height and width attributes on the img tags. We can set each attribute only once, but what if the user has a device or desktop that has a different size than the values that were set? Wouldn't that still create a content shift because of the different dimensions?
@tomcoop9750 2 жыл бұрын
I think when the image’s max-width is 100% and the height is auto, the computer can make this calculation and prevent the elements from shifting.
@rawhasan1180 3 жыл бұрын
Thanks for the nice tips about native lazy loading. Did not know lazy loading is that easy! I am going to look at your other videos about responsive images. Two recommendations for the channel: - Can you please put the camera further away from your face when you are talking in full-screen? It feels too close and annoying. - Also can you please speak a little slowly, specially in the intro section of the video when you are trying to grab attention? I am fluent in English, but still it sounds almost gibberish! Please take these as a constructive feedback to improve the channel. All the best for the channel!
@albertoesquivias6073 3 жыл бұрын
great vid, thanks! i dont css much but i like to keep up to date. sry if dumb Q incoming... when you placed those height and width attr on the img elements themselves, just curious where those numbers came from? would using auto here be an option? might have to place those imgs in a container with what the combined height and width for auto to work?
@KevinPowell 3 жыл бұрын
I'm using the actual pixel dimensions of the image 😊
@MikeKing710 2 жыл бұрын
Hi Kevin! Nice video. I've faced with one "bug" with my background image which takes whole height of website. When I scrolling up or down this image jitter with black lines on the top and bottom of viewport. I thought the problem is related with loading and I need to implement with lazy loading but it doesn't solve my problem. What is it can be? Thx
@nicolasmayer618 3 жыл бұрын
It would be great, if there would be a head request to receive the width and height for an image and set it to the img. Or is there a possibility?
@ourworldbeauty Жыл бұрын
So, can loading="lazy" be used for other elements like ?
@alpachino468 5 ай бұрын
Does this work with just images or any HTML elements? I have a list of article posts on a page, each one having a containing div Is it possible to lazy load these divs with the method shown in the vid?
@andrewrea2799 3 жыл бұрын
Kevin, if you’re using scrset with multiple sizes (1x, 2x, etc) or art direction, what size to I tell the browser for lazy load?
@KevinPowell 3 жыл бұрын
As long as you have it on the img as an attribute, you're good. It chooses which one it wants when it needs it from what I understand :)
@toma1610 3 жыл бұрын
Hey! First time I hear about this attribute of the image element. Is it almost new? Is your invention???
@aspsa6246 3 жыл бұрын
Thank you for the video. As you noted, the "loading" attribute is not yet fully supported on HTML image and tags (see: caniuse.com/?search=lazy%20loading). Can you recommend a fallback in JS?
@blackpurple9163 Жыл бұрын
Just to confirm, if I put width and height in the img tag itself and set width: 100% and height: auto with css, the browser will still retain the space of that image in the viewpoint on responsive websites as well right?
@deliriumcode 3 жыл бұрын
Thank you for this! One additional question: Is there any possibility to start load (showing in browser) images completed (as a size) in their frames juts blurred, and as browser loads them - they become more clearer? Cheers!
@senorzed6483 3 жыл бұрын
I have the same question! let me know if you find a solution please, thanks!
@mohamedruslicali5926 3 жыл бұрын
Same question.
@dattermenum6897 3 жыл бұрын
This is great. I would just add that I would probably still use JS and intersection observer to change loading="lazy" to loading="eager" before the user gets to that element so that there is a higher chance that the user will not notice the loading at all.
@vladimiranusic1988 3 жыл бұрын
I haven't watch all of the video You made Kevin, but You gave me a lot of knowledge that is hidden sometimes in this world. My question is, You never mentioned optimizing images JPG SVG or PNG cause We as developers often, are given images from various sites when JPG image is 10MB large.. and that CAN NOT come on server caues it will take time to download.. Ok we have better machines now but speeeeed is still important.. not everybody have dev machine as we have on job or home.. Some tools I use every day are guetzly, optipng, svgcelaner.. and when you test your site online it makes more speed and Google likes it more.. Thanks..
@KevinPowell 3 жыл бұрын
I have a series on this, where I look at webp and the picture element as well. I do need to look at automating it all though!
@waynehendricks1529 3 жыл бұрын
Its also useful to add a low res or blurred placeholder image to avoid the mass of white-space while the image is loading. Like this:
@mcvgs1780 3 жыл бұрын
Is the data-src attribute the one that will show the skeleton loading image? Is it this a built in attribute?
@samkeen 3 жыл бұрын
Marc Vegas15 no, and this example’s the wrong way round. The full sized image should be in data-src, which is a custom data attribute that the browser doesn’t understand, but can be manipulated with JS. You then put the small image in src to load first, then when your JS kicks in you can have it transfer the data-src info into src.
@stiviniii 3 жыл бұрын
I have a blog with many posts I cant go to each individual article and edit the img tag, how will I be able to add this the each tag using script or anything else please advise
@Tassaczek 2 жыл бұрын
How to make a "placeholder" with some color, for pictures? So it will not be white? Or some loader?
@travezripley 3 жыл бұрын
Lazies!
@KevinPowell 3 жыл бұрын
😂😂
@Sollace 3 жыл бұрын
me: Oh cool! also me: *remembered he uses background-image and not tags* Oh...
@mohithguptakorangi1766 3 жыл бұрын
he used tags...
@Sollace 3 жыл бұрын
@@mohithguptakorangi1766 Yes, and I used background-image. I had to convert all my stuff to image tags so I could use lazy loading.
@mohithguptakorangi1766 3 жыл бұрын
@@Sollace ohh i thought u were saying that he(Kevin) was using background img
@jarosk1977 3 жыл бұрын
I wonder Kevin, how would you lazy load CSS background images.
@isaactfa 3 жыл бұрын
You'll have to do it with the Intersection Observer API, but you can do it. Here's a handy article: imagekit.io/blog/lazy-loading-images-complete-guide/#lazy-loading-css-background-images
@bryphillips 3 жыл бұрын
WCAG accessibility calls you out for not setting image h/w because it causes pah=ge loading "jumping" around
@patrikhorny4989 3 жыл бұрын
Good to know that something like this exist, but it's still not compatible with Safari and IE Edge
@pdsnpsnldlqnop3330 3 жыл бұрын
The first 2k of the image is read in to get the dimensions, how does that work on server side?
@RicardoBuquet 3 жыл бұрын
Those jump you are talking about also affects google's ranking.
@shineymcshine 3 жыл бұрын
To stop WordPress 5.5+ from automatically adding a loading="lazy" tag to your first few, above-the-fold images, it seems you need to specify loading="eager"
@arthzdeceva484 3 жыл бұрын
WP 5.5+ does that? And yes, I'm too lazy to read the changelogs...
@guersomfalcon7544 3 жыл бұрын
10:20 Is html file order not followed when loading page elements?
@frankdrolet9439 3 жыл бұрын
Is there a way to integrate this in a page builder like Oxygen, Elementor, or Divi?
@ArchimedesTrajano 3 жыл бұрын
8:40 why bother removing loading="lazy", if it is in the view port the browser will load it as eager anyway that way you don't have to guess which ones should be lazily loaded.
@leonardodilena680 3 жыл бұрын
Very interesting, but as a user most of the time I have no problem to load all the images as the page load, I'll wait. It's annoying for me to wait while scrolling the page instead.
@icaras12x87 3 жыл бұрын
I love the simplicity of the native method, but I would love to load some kind of preview image before the actual image, is that possible ?
@KBael 3 жыл бұрын
As long as it's got a width and height, just add a placeholder image with CSS by setting a background-image.
@GP-yc2it 3 жыл бұрын
@@KBael yes, or just a background color... maybe a nice gradient.
@vishsingh7235 3 жыл бұрын
Hey Kevin - do you know how (or if) this would affect images in a Single Page Application built with something like React? My understanding is that the entire site is transferred over on initial load so the client just handles rendering resources. Does it obviate the need for lazy loading?
@ManInSombrero 3 жыл бұрын
A React app contains only links to images, not images themselves. SPA or not it doesn't matter here.
@vishsingh7235 3 жыл бұрын
@@ManInSombrero I've made React apps that include local images on the server as well as projects with images that are hosted elsewhere and included via a web address.
@notDYLANCOWLEY 3 жыл бұрын
Hey Kevin, what do you think of the layoffs hitting Mozilla and the MDN teams?
@KevinPowell 3 жыл бұрын
Sucks big time. Luckily the MDN should be safe since Microsoft, Apple, Samsung and more have contribute to it as well. Bit worried about where Firefox is going from here though.
@notDYLANCOWLEY 3 жыл бұрын
@@KevinPowell Yeah Im really curious as to what the future of Mozilla is going to look like now. Thanks for the reply, and the great content by the way. You are a gifted teacher when it comes to front end and explaining advanced concepts in a very simple way.
@ColinPittendrigh 2 жыл бұрын
Does native lazy loading built into the browser mean it is now OK to build very long pages with many images?
@MikeMcCollister 3 жыл бұрын
Nice video. I've added lazy loading to my page with very little effort. You noted around 13:06 using "max-width:100% and height:auto;" will keep the images proportional if the width and height are assigned as attributes. I've been doing this for a while but and it works fine on Chrome but I can't get this to work on Safari on iOS as it only does the width and the height is 0 until the image gets loaded. Is there a way to get that to work in Safari on iOS?
@KevinPowell 3 жыл бұрын
That's interesting. I'll have to look into it more. I wonder if it'll be fixed once Safari pulls this out from behind a flag. Really strange since Safari was the first of the browsers to implement aspect ratios for images based on the width + height attributes....
@MikeMcCollister 3 жыл бұрын
@@KevinPowell I enabled "Lazy Image Loading" on iOS Safari and did not see the lazy loading happen. Possibly my network speed is too fast and I can't tell. I looked around at some of other experimental Webkit features and did not find anything that might have to do with proportional images.
@amarg26 3 жыл бұрын
At 8:00 let's say we are loading first 4 images as non lazy but on devices like iPad and small laptops after 4th image on iPad will it be shown as empty block or will it load lazly? How to consider this lazy loading strategy for iPad devices on both portrait and landscape view?
@KevinPowell 3 жыл бұрын
If you put it on an image that's in the viewport when the page loads, you shouldn't have any issues.
@lemmelovu 3 жыл бұрын
Hey kevin , a question. At 6:35, why did all the images load when just a single image was in the viewport? If thats the normal behaviour, then whats the point of 8:07? My mind id bending.
@robertlinder8464 3 жыл бұрын
The browser will download images within 3x~ the viewport height, this is so that images have time to load before they're actually displayed to the user.
@yollopukki6998 2 жыл бұрын
It doesn't work if client has tracking filters on (like AdBlock). It's anti tracking matter (MDN says so).