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...
For further actions, you may consider blocking this person and/or reporting abuse
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.Interesting, didn't know that. Thanks for mentioning, Mads!
Link where that's found:
developer.mozilla.org/en-US/docs/W...
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.
Good point, Andrew! I will take that into account in future. Thanks for pointing out.
Great to know! Going to implement this on my personal page right after work and see how it goes
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
That's probably because parts of the DOM gets re-written. You could try
<img data-src="your-image" loading="lazy" />, and then setimg.src = img.dataset.src, when the component has been mounted in Vue.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? 🤔
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.
Luke. I am very familiar with React, Angular and even Ember. But I haven't had the chance to look into Vue.js yet.
Everything is #SEO: users and Google are happy.
That is absolutely correct! 😄
Not great for safari
Hi Brian! What do you mean by that?
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.
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 🤞!
Safari, worst browser after IE 🤬
True words. So sad. 😁
Great post
Thanks, Ben! Glad that you like it. 😊