DEV Community

loading...

Lazy Load Images in 2 seconds

geongeorge profile image Geon George Updated on ・1 min read

The Story

I have this internal tool for some purpose. Now, this has a page where it displays like 50+ images grid in smaller sizes.
The page always load very slow and I hated it.

So We can solve this by properly generating smaller thumbnails of the images and/or lazy loading the images.

This isn't really isn't used by anyone else other than me. So I decided to skip the thumbnail part and add 2 lines of js to lazy load the hack out of these stupid images.

Then I stumbled upon something I completely forgot that existed.

loading="lazy"

<img src="..." loading="lazy" />

That's pretty much everything you need to make your images lazy load.

Now this is an HTML5 Feature and probably might not be supported by every browser out there.
It might not bring fancy animations and fade transitions onto the table

But IT WORKS!!

The previous webpage is atleast 3 times as fast.

Read more here: MDN

TL;DR

Use the loading attribute in HTML

<img src="..." loading="lazy" />

Update

You definitely should not use it in anything important.
You need a polyfill to get it work on all browsers.
Read my story and see why I used it.

Discussion

pic
Editor guide
Collapse
iamschulz profile image
I am Schulz

You should keep in mind that the loading behaviour changes wildly from browser to browser.
Chrome loads images that are a long distance out of the viewport. Native lazy loading wouldn't even kick in here on short pages.
Firefox loads images only if they are in the viewport, leading to visible loading times for the user as she scrolls.
As of now, there's no way to control that behaviour.

Collapse
bernardbaker profile image
Bernard Baker

Good tip 🤸.

Collapse
sagar profile image
Sagar

Lazy loading attribute is supported in latest browser version so you may need to include polyfill to provide support for older browsers.

Collapse
geongeorge profile image
Geon George Author

Yeah, But if you read the story part you'll understand why it was perfect for me

Collapse
lucanerlich profile image
Luca Nerlich

"The previous webpage is atleast 3 times as fast."

Thats a bit of a stretch without actually providing any example.

Collapse
geongeorge profile image
Geon George Author

Yeah, I can understand that. But I'm just sharing how it felt like.
This isn't really a proper study. Just sharing the problem I faced and how I solved.
I really don't care about how much milliseconds I saved or if it works on Safari on iPhone 5 whatever.
This is a tool used by me and it works for me. So really doesn't matter

Collapse
labibllaca profile image
labibllaca

best stuff I learned this week. thanks a lot.

Collapse
mjcoder profile image
Mohammad Javed

Make sure to add a fallback for browsers that don't support native lazy loading.

I love the native lazy loading. It's a big game-changer.

Collapse
peterlau profile image
Peter Lau

LOL, caniuse.com/#search=lazy Better to provide some polyfill version

Collapse
yoavrheims profile image
Yoav

That doesn't work yet on Apple devices...

Collapse
wearethreebears profile image
Liam Hall

For better performance you can also add width and height to the image tag if it’s available to you - you’re still able to force responsiveness through your CSS.

Collapse
geongeorge profile image
Geon George Author

Yeah, this is something that could be done. But in my case, it didn't really matter