Improve performance with one attribute

Use the loading="lazy" attribute on images and iframes to improve your sites performance

#shorts

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

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 YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[PascalHorn]

Actually it is recommended to not use it on images that are visible from the get go. So the image after the H1 shouldn't have the attribute.

[markboots_]

If you know the aspect ratio of an image, set the aspect-ratio (and maybe a light grey background) in css too, it prevents jumping content when it takes longer to load an image

[nomadshiba]

damn thats epic, adding this to my image component really quick
i like how everything about coding for web is becoming, cleaner and cleaner

[TheCocoaDaddy]

YouTube needs a "love" button because "Like" just doesn't cut it, in this case. THANK YOU for this awesome nugget of goodness!!!!

[punkerts]

First time I hear that lazy can be a good thing.

[shaunhallier]

I can't believe I didn't know about this, but I'm implementing this in the project I'm working on today and trying it out 👍

[window.location]

lazy loading + srcset + sizes = 👌
but lots of work 😞

[easifier]

it is very nice that you keep it short and informative :) thank you for that

[hinab]

Thanks, ive actually been looking for this since the javascript tutorials that ive seen didnt really work on my site for some reason

[NoName-gffj]

I love your videos, really instructive and helpful ✨

[kemal]

First YouTube channel I've ever seen that has shorts that have as good quality content as its videos.

[ShantoDey]

this is the best thing i saw in THIS month

[qdrawli]

To the point.

Brilliant as always.

[TomGrubbe]

Wow, I didn't know about this. I've been using javascript libraries to do this. Thanks Kevin.

[gamergreen]

Hi i love ur vids ur da best i learned so many things from you thank you

[lecarbonator]

Very interesting. Does this only apply to images? Or if you have a bunch of embedded GIFS/Videos, would this work too?

[sharpfang]

One of more loathsome inventions of recent times. Open a link in new tab, keep browsing while the page loads in the background and you look for more. witch tabs a minute later. Nothing is actually loaded, only now the page starts loading while you wait uselessly.

[mervinmarias]

You can save even more effort by assigning that attribute to the img tag via css

[camar]

Unfortunately it messes up the y positioning when images are lazy loaded while the Browser scrolls to an href anchor further down the page. The Browser stops at the wrong location when images have been loaded and their height has been added to the layout. Haven‘t found an elegant way to fix this 😔

[pradyumnahebbar]

very very useful topic i appriciate your content