Lazy Loading Support Coming at the Browser Level

Ryuzaki

女性以上のお金
Staff member
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
3,342
Likes
6,089
Degree
7
Past couple of days there's been some talk about lazy loading again.

Apparently Google has been testing getting lazy loading working in Google Chrome since January 2018. And since March 2019, Mozilla Firefox has started working on it as well. That leaves Microsoft Edge and Apple Safari and that would be enough global support to drop all the plugins and javascript libraries being used for observing the intersection of the images and the viewport and swapping in images.

The real question is whether or not they create a unified, conventional way of doing it, or if each browser decides to be stupid and implement their own methods. It'd be as simple as having us use CSS classes on images such as "lazy-load" and "lazy-skip." We'll see...

They want it to work on iFrames too. There is a chance this could impact display ads if applied automatically in some fashion.

There's also the miniature nightmare of CMS's adding in the CSS Classes (assuming that's how it's done) and having to resave all your content in order to add it in, unless it's added through a filter on the content, which then has a server load and speed impact.

If it's at the rendering level, then Blink (Chromium) and Gecko (Firefox) will be covered the soonest. Then we just need WebKit (Safari). Turns out Microsoft Edge is about to drop EdgeHTML and move to Blink.
 

Ryuzaki

女性以上のお金
Staff member
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
3,342
Likes
6,089
Degree
7


The image above shows a Google Chrome employee sharing how this is going to officially work on Chrome at least. You can read the full details here: https://addyosmani.com/blog/lazy-loading/

It's not going to be a CSS attribute, but an HTML attribute within the <img /> tag called loading. (I'm typing this in case the image goes down in the future).

You have two options: loading="lazy" and loading="eager". The first one is self-explanatory. The second one means "skip lazy loading and load the image immediately. Perfection.

If every browser will implement this (and quickly), I'll be a happy camper. I suspect by the time this rolls out, all browsers add it in, and then users update to the new versions, we're still years away. But things are looking up!
 

turbin3

BuSo Pro
Joined
Oct 9, 2014
Messages
611
Likes
1,252
Degree
3
The nice thing about going the attribute route is, it'll "fail" gracefully. Old browsers that don't support it will simply ignore the attribute. The trick, then, would be adding some conditional JS logic to a site to load a third party lazyloading library if it's detected the user's browser doesn't support the attribute.

Even better, if existing lazy loading libraries start updating to read not just from classes or ID's, but also those exact attributes. Then we can skip classes all together, standardize on the attribute, and just conditionally load for older browsers (plenty of existing feature support detection scripts out there to do that quickly).
 
Joined
Jan 15, 2015
Messages
28
Likes
20
Degree
0
This can be tested by enabling it as experimental feature in Chrome. Just type chrome://flags/ and search for Enable lazy image loading.
 
Last edited:
Joined
Sep 17, 2014
Messages
416
Likes
262
Degree
1
I can't find it again but I saw that people are already tracking a ticket for Wordpress to get them to start working on adding this as a default feature in a way that can fail gracefully as turbin3 said.

If Wordpress picks this up earlier in the adoption cycle that will put the heat on all browsers to get it together and follow a convention too.

Browsers are getting nicer, slowly, but kind of policing the net like Google does. It's mostly been a good thing in terms of spam and development methods. We've seen how they're starting to block 3rd party tracking scripts and all that. I saw Chrome is now thinking about using some different API that sucks a lot worse but makes it possible to block all Ad Blockers. They have a certain incentive to do that. Is that good or bad, I don't know. But if they can use Google's algorithm to enforce better display ad usage by websites, then we won't need ad blockers.

It won't be long before Browsers can build our websites for us on some AMP nonsense.