DEV Community

Cover image for Native lazy-loading of images with zero Javascript

Native lazy-loading of images with zero Javascript

Paul Facklam on February 08, 2021

About lazy-loading and why you should use it The worldwide web has evolved over the past decades and today's websites consist not only o...
Collapse
 
madsstoumann profile image
Mads Stoumann • Edited

As a sidenote, loading=“lazy” only works if JavaScript is enabled, which for me seemed a bit weird - until I read this at MDN:

Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing images in a page's markup such that a server can track how many images are requested and when.

To test, disable JavaScript in DevTools (Shift + Command + P > Disable JavaScript), go to the Network Tab and refresh the page. All images will load instantly.

Collapse
 
pfacklam profile image
Paul Facklam

Interesting, didn't know that. Thanks for mentioning, Mads!

Collapse
 
brycewray profile image
Bryce Wray

Link where that's found:
developer.mozilla.org/en-US/docs/W...

Collapse
 
andrewbridge profile image
Andrew Bridge

Probably worth mentioning that this is best used for images which aren't going to be visible on page load. I've actually observed page performance in Lighthouse, and in turn Google's search console ranking, drop if there are too many images "above the fold" using loading="lazy" as it detects it as a longer initial load time.

It's a great feature though, definitely good for articles or long marketing pages.

Collapse
 
pfacklam profile image
Paul Facklam

Good point, Andrew! I will take that into account in future. Thanks for pointing out.

Collapse
 
liukonen profile image
Luke Liukonen

Great to know! Going to implement this on my personal page right after work and see how it goes

Collapse
 
liukonen profile image
Luke Liukonen

I wish I could report how great it worked for me, and how I was able to remove another 3rd party dependency from my site. Unfortunately, Vue 2 just doesn't get it and loads the images anyway. I tested it out on a "basic" site and it worked fantastic, however, if you are running a "framework"... in my case, Vue.. mileage may vary

Collapse
 
madsstoumann profile image
Mads Stoumann

That's probably because parts of the DOM gets re-written. You could try <img data-src="your-image" loading="lazy" />, and then set img.src = img.dataset.src, when the component has been mounted in Vue.

Thread Thread
 
pfacklam profile image
Paul Facklam

Looks like a mixture from both worlds (see above in the article). As a disclaimer: I haven't give Vue.js a try. Should I? 🤔

Thread Thread
 
liukonen profile image
Luke Liukonen • Edited

Mads I might have to, thanks! I've been using a combination of Intersection observers, and a plugin, Vue.LazyLoad to handle the late binding of images on my page. It's just disappointing to see native HTML not render like you'd expect to see, but that might be one of the sacrifices you give up when using a framework.

Paul. Since Im just starting out with JS frameworks, I started with Vue. It is growing in popularity, however, React and Angular are still kings at this time.

Thread Thread
 
pfacklam profile image
Paul Facklam

Luke. I am very familiar with React, Angular and even Ember. But I haven't had the chance to look into Vue.js yet.

Collapse
 
ahmedsamirdev profile image
ahmedsamirdev

How it went?

Collapse
 
pfacklam profile image
Paul Facklam

Awesome! Maybe you can share your feedback how it worked for you. 👍

Collapse
 
briang123 profile image
Brian Gaines

Not great for safari

Collapse
 
_dermatz profile image
Mathias Elle 👨🏽‍💻

Safari, worst browser after IE 🤬

Collapse
 
pfacklam profile image
Paul Facklam

True words. So sad. 😁

Collapse
 
pfacklam profile image
Paul Facklam

Hi Brian! What do you mean by that?

Collapse
 
briang123 profile image
Brian Gaines

just that the native lazy attribute on the image tag is not supported out of the box on Safari (it's an experimental item). I've had to implement alternative solutions for lazy as a result.

Thread Thread
 
pfacklam profile image
Paul Facklam

Yes, agree! That's is a little bit annoying. With luck, it might not be that long before we can use it natively here, too. Fingers 🤞!

Collapse
 
steinhoefel1 profile image
Thomas Kohler ☑️ Online-Marketing-Expert

Everything is #SEO: users and Google are happy.

Collapse
 
pfacklam profile image
Paul Facklam

That is absolutely correct! 😄

Collapse
 
ben profile image
Ben Halpern

Great post

Collapse
 
pfacklam profile image
Paul Facklam

Thanks, Ben! Glad that you like it. 😊