Support for natively lazy-loading images and iframes is coming to the web:
https://web.dev/native-lazy-loading/
https://addyosmani.com/blog/lazy-loading/

Unlike IO, as of this writing, only Chrome 76+ (Aug 2019) supports this. Worth a start.

Quoted from above:

The feature will continue to be updated until it's launched in a stable release (Chrome 76 at the earliest). But you can try it out by enabling the following flags in Chrome:

chrome://flags/#enable-lazy-image-loading
chrome://flags/#enable-lazy-frame-loading

A few things to note, caveats, or TODOs:

  1. This requires you to modify browser settings as noted in the above quote. Not a set and go like IO. Meaning it is kind of useless for end users until the browser sets its value to Enabled by default. At least as of this writing. This might change soon, though.
  2. Threshold is hardcoded to 800px by Chrome. Only good for super tall pages. It might also trick us to think lazy load not work with short pages. So be sure to give a very tall text before images to test it out correctly.
  3. Currently only IMG and IFRAME are known to be supported. Somebody said it works for PICTURE element, but unfortunately the required loading element is set to PICTURE, not the controlling IMG element, the way it works so far. Also not tested against CSS background.
CommentFileSizeAuthor
#4 3104542-adopt-hybrid-lazy-loading-4.patch26.54 KBgausarts
#3 3104542-adopt-hybrid-lazy-loading-3.patch23.15 KBgausarts
#2 3104542-adopt-hybrid-lazy-loading.patch17.45 KBgausarts

Comments

gausarts created an issue. See original summary.

gausarts’s picture

gausarts commented
Issue summary: View changes
Status: Active » Needs review
StatusFileSize
new 3104542-adopt-hybrid-lazy-loading.patch17.45 KB

Let's give a whirl. Added a new option to toggle it.

gausarts’s picture

gausarts commented
StatusFileSize
new 3104542-adopt-hybrid-lazy-loading-3.patch23.15 KB

Minor fixes and adjustments.

gausarts’s picture

gausarts commented
StatusFileSize
new 3104542-adopt-hybrid-lazy-loading-4.patch26.54 KB

Let's test against picture element which still has the IMG element as its controller, leaving one more TODO with local VIDEO element.
I haven't found info whether Chrome already supports VIDEO element. So far the only known are IMG and IFRAME.

  • gausarts committed d476e8f on 8.x-2.x 
    Issue #3104542 by gausarts: Adopt hybrid lazy loading, native with...
gausarts’s picture

gausarts commented
Status: Needs review » Fixed

Also added minor fixes for local video which was not previously lazy-loaded due to b-lazy class was not there.

Local video may follow later when Chrome supports it. Until then we can live without.

Committed for wider feedback. Any improvement is very much welcome and may follow as always. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

calebyoder’s picture

calebyoder commented

Would it be of any help to have an option in the Blazy settings where you can enable or disable the default Google Chrome lazy loading?

When working on a site it took a while to figure out why lazy loading (Blazy) wasn't working right in Google Chrome. For some reason it seems like it is loading pictures way down the page (below the "fold"); which is not very nice for performance. I thought it might be handy to have a check box in the settings if you want to enable or disable support for the built in Google Chrome lazy loading because in some cases you might get better performance with Blazy than the Google Chrome lazy loading.

Just some thoughts.. Maybe it's not a good idea?

Thanks!

gausarts’s picture

gausarts commented

That will be fine. Patches are welcome.

The option was in rc7 dev, then removed on the last hook_update() when I realized we have threshold options.

But before then, how about playing around with threshold as mentioned in the summary? Blazy 100px, IO 0px, Chrome 800px.

Tried the best bargain?

calebyoder’s picture

calebyoder commented

Ok, thanks. Maybe it's not that big of a deal. In fact, I may have been mistaken about the performance. I was just looking at it some more and it's pretty comparable or maybe even better.

Is there a place to change the Chrome threshold?

gausarts’s picture

gausarts commented

Chrome hard code it in its internals. We can't even change it via browser settings.

Please ignore my threshold idea for now. I should not have commented at 3am when resources are thin.

Sorry, I was thinking about triggering Chrome lazyloading when the first threshold is hit instead rather than as it is now. Then you can adjust the threshold.

I made it sound it was implemented with Chrome, but not. It is implemented only for non-chrome for now.

This should address your concern better than providing option to toggle it.