Improve performance with one attribute

Подписаться 939 тыс.

Просмотров 156 тыс.

50% 1

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
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowel...
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowel...
👕 Buy a shirt: teespring.com/...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstu...
---
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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

8 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 144

@PascalHorn 2 года назад

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.

@KevinPowell 2 года назад

Good point! Pinning this so hopefully some people see it!

@Ethan-bn2pu 2 года назад

@@KevinPowell i did see it

@aayush_karna 2 года назад

@@Ethan-bn2pu so did i

@D7460N 2 года назад

Saw it.

@Kraffcho 2 года назад

Saw what, where?

@markboots_ 2 года назад

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

@KevinPowell 2 года назад

Thank for the idea for a future short! 😊

@NorthernChimp 2 года назад

Yeah that's very annoying.

@Zeegoner 2 года назад

Holy sh*t are you *the* Mark Boots?

@markboots_ 2 года назад

@@Zeegoner There are more. Don't know if i am the one you are referring too as "THE" Mark Boots

@mattwindle3998 2 года назад

Would this have any improvements to the CLS score in Lighthouse? Or does a lazy loading image not have any negative affect anyway.

@TheCocoaDaddy 2 года назад

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

@T25de Год назад

They have a habit of doing it wrong. Like Getting rid of the dislike counts

@nomadshiba 2 года назад

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

@nomadshiba 2 года назад

@@pedrogalhardo yeah gonna make it active by default but make it disable with an option

@punkerts7711 2 года назад

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

@shaunhallier5035 2 года назад

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 👍

@albertoa.r.5995 2 года назад

The problem with this is that anyone using an iPhone not actualized with the last safari will handle this, and thats a lot of people!

@window.location 2 года назад

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

@hinab Год назад

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

@D7460N 2 года назад

This is perfect. Thank you!

@easifier 2 года назад

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

@NoName-gf3fj Год назад

I love your videos, really instructive and helpful ✨

@josephlivengood4508 Год назад

Thank you so much.

@bkr_418 2 года назад

Thank you, that just blew my mind

@qdrawli 2 года назад

To the point. Brilliant as always.

@TomGrubbe 2 года назад

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

@lecarbonator 2 года назад

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

@jonathan3488 2 года назад

Wow! Useful

@gamergreen2769 2 года назад

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

@ShantoDey4672 Год назад

this is the best thing i saw in THIS month

@kemal6039 Год назад

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

@hopzinga2790 2 года назад

Thanks for the tip!

@maad1670 2 года назад

wish i could save this to my playlist

@crepkey 2 года назад

This is exactly what I need

@threeone6012 2 года назад

53 seconds of gold!

@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.

@pradyumnahebbar138 2 года назад

very very useful topic i appriciate your content

@mervinmarias9283 Год назад

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

@Sangram-Kishor Год назад

I really love CSS very much & love to write as less as JavaScript with the help of CSS. Thanks to modern CSS and you 👍

@camar078 2 года назад

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 😔

@claudiu7555 2 года назад

You can set a width and height attribute on the img tags, it should reserve the space inside the document, but I'm not 100% sure. And use progressive JPG encoding, thus loading the entire image but at a lower resolution until it fully loads.

@deemon710 2 года назад

Hells yeah. That's nice.

@therealsuper5828 2 года назад

Damn that's kinda cool

@johnconnor9787 2 года назад

Awesome

@nasharcadia Год назад

Beautiful

@Smbrine Год назад

I literally hate that thing. I used to stay in the hotel with an extremely slow wi-fi and I would definitely preferred to fully load the whole page and scroll it afterwards instead of loading pictures step by step

@kingsleyetukudo3587 2 года назад

New features learn Thanks sir

@vaibhavsarode6637 2 года назад

Osm explanation, thank you

@michaeloosthuizen2383 2 года назад

Nice tip, thanks!

@lolo-wz2ng 2 года назад

wow thx youtube algo i was just thinking how to do it and here i am

@RobertWrightArt 2 года назад

I love your channel

@bobdinitto 2 года назад

Nice new feature!

@mahendranath2504 2 года назад

Great 👍 thank you 🎉😊

@LowPolyPizza 2 года назад

Question: why doesn't lazy loading become a natural attribute of the img? I feel like it would be more often used than not. Meaning shouldn't the extra work going into making images load lazy be more effeciently used on images you don't want to lazy load?

@krishgarg2806 2 года назад

Damn, that makes it so much easier.

@jamesschein 2 года назад

Sweet!

@CuddlyOrpheus00 Год назад

Damn that's useful

@2bitsbyab 2 года назад

awesome tip

@akshay6504 2 года назад

Awesome 😎 👍

@pschultzypi Год назад

Sweet

@emmanikenna 2 года назад

How on earth! this feature is available and am not aware of it.

@ashkanahmadi 2 года назад

Sounds great. Is there any way to set any margin? For example, start loading if the image is 500px away from coming into the viewport similar to IntersectionObserver?

@igorigor806 2 года назад

Thanks!

@KevinPowell 2 года назад

Thank you so much!

@8ack2Lobby 2 года назад

But it may backfire incase someone have very bad internet.

@rahulr9539 2 года назад

how do we do the same for div background-image

@RazahLP 2 года назад

What about background-images? Is there a way to apply that to those, too?

@RaWMajkeL 2 года назад

Unfortunately still no support for s from firefox / safari, which basically forces to (still) use 3rd party libraries.

@CodekGaming 2 года назад

Is there a similar pattern for lazy unloading of images? Where you can unload images from the browser once the user has scrolled way past them

@dylanclarke9497 2 года назад

Huh? What’s the use case for that?

@CodekGaming 2 года назад

@@dylanclarke9497 I'm thinking maybe it'd help with performance if they're no longer held in memory? Imagine if you've got a Twitter-like timeline of images, at some point you'd probably want to unload the ones you've been past or the session would get slower and slower

@ciberman 2 года назад

You said "It used to be hard to do...we had to use intersection observers". And I was "Wait, I think Intersection Observers were the EASY way, before you needed to detect the intersection by yourself with a bunch of JavaScript without intersection observers" But it seems now there is this fully automatic way of doing it. It's amazing to see how fast the web standards progress.

@guy_cod 2 года назад

Nice video, I had issues using this for dynamic images( images I fetched from an API ). Please do you know how to go about lazy loading images in this scenario?

@KevinPowell 2 года назад

In that case, you might have to use an observation observer and do more of a classic lazy load with that. That way, you could watch where the page is, and fetch the images as needed.

@guy_cod 2 года назад

@@KevinPowell okay, thank you

@TheNewton 2 года назад

It's still wild to me that "lazy" was chosen as the verbiage/value for this.

@akmalkrmv 2 года назад

Great, now I have to constantly scroll down to read the content, while images above keep pushing down the content after downloading

@Axeiaa 2 года назад

If you stick to setting the height and width attributes on images you do not have this problem. The browser reserves the space in advance as you have given it the dimensions already it knows the space it should take up - this prevents the layout from jumping. (That's been a best practice since the dawn of HTML, especially the early days where telephone modems would load things in very slowly)

@stillready6405 2 года назад

Is it possible toI change the offset of the lazy loading?

@KevinPowell 2 года назад

No, the browser will handle that on it's own, based on connection speeds and the other magic stuff it does 😅

@stillready6405 2 года назад

@@KevinPowell oh OK, thank you for the answer :)

@yashguma Год назад

Intersection observers sounds horrid

@ilanmazuz 2 года назад

Anyway of doing it for background image as well?

@justChuka 2 года назад

I prefer this to girls on TikTok

@manoranjanpanigrahi3677 2 года назад

cn this be done using css?

@JohnBortins 2 года назад

How about ===> loading="auto" ?

@josephlivengood4508 Год назад

Can this done with css or js?

@ari_archer Год назад

IE too ?

@peenoise363 2 года назад

So this is a plain attribute no adding JS?

@KevinPowell 2 года назад

Correct!

@Zeegoner 2 года назад

@@KevinPowell Congratulations you responded to "Peenoise"

@peenoise363 2 года назад

Wow thank you for sharing...been struggling with JS especially if dyanamic approach.

@anonymousBl1 2 года назад

You still need JavaScript if you need to support IE 11

@lohannasarah152 Год назад

😲😲😲

@AmitSingh-zj5we 2 года назад

Hi Kevin, Ellipsis is not working with textarea This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property. .overflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } Expected Output : This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.This is an example text showingnothing .....

@KevinPowell 2 года назад

the text-overflow: ellipsis; only works if you have a single line of text with white-space: nowrap as well, and even then, I don't know if it would work with a textarea

@oromolloy 2 года назад

display: block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; -moz-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; ths work for multiple lines -webkit-line-clamp: 3; control number of lines!

@AmitSingh-zj5we 2 года назад

@@oromolloy I will try .. Thank you

@AmitSingh-zj5we 2 года назад

@@oromolloy It's working.... thank you :)

@AmitSingh-zj5we 2 года назад

Is any possibility to make input tag to make multiline like textarea ???

@Daleon1 Год назад

Is that via HTML5 update...?

@johnpatrickjuni945 2 года назад

Do I have to add it in every img? Or is there an alternative so wont have to.

@nextentrepreneur9288 2 года назад

If you use a frontend framework you can wrap the img tag in a component and add some logic to bring the "loading" attribute only when the image isn't in the viewport when the page loads

@dr_birb 2 года назад

Does it work with text/elements?

@Hohen 2 года назад

Can i add this with javascript on all images ?

@claudiu7555 2 года назад

javascript loads after the entire DOM is loaded, already loading the images and thus making the attribute pointless.

@stillready6405 2 года назад

@@claudiu7555 So but it would be possible if I added the images dynamically to the DOM with JS, that would be the only way right?

@ZipplyZane 2 года назад

@@claudiu7555 This is not true. JavaScript loads as soon as the tag is parsed. That's why, if you don't put your script tags at the end, you have to use DOMContentLoaded to make sure everything has been loaded. Furthermore, browsers have a limit to how many files they will try to download at once. And, finally, you can always cancel the loading of the image by changing its src attribute and then changing it back after you've added the appropriate attribute.