1483280 - Preference to lazy load images and frames natively (LazyLoad)

Status: RESOLVED FIXED

(Core :: Layout, enhancement, P3)

Description

[saproeno]

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.12 Safari/537.36 OPR/56.0.3045.0 (Edition developer)

Steps to reproduce:

Lazy loading in Chrome has already been added and is super useful.
Not all elements on a web page are of equal importance on load. The content that is visible to the user has priority over content that is displayed somewhere at the bottom of the page because it is not visible to the user.
might be beneficial to the page's initial loading time.

Chrome has this in two parts
Chrome's implementation enables lazy loading for images and frames and will be enabled in Chrome 70 and can be disable if user's chooses so(via a simple toggle)

1-enable-lazy-image-loading
2-enable-lazy-frame-loading

Image lazy loading defers the loading of images until the user scrolls near them and the same is true for frame lazy loading (but for frames).

You can test it right now using

Lazy Load for Images 
Name: Enable lazy image loading

Description: Defers the loading of images until the page is scrolled down near them. – Mac, Windows, Linux, Chrome OS, Android

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

Lazy load for cross-origin scripts
Name: Enable lazy frame loading

Description: Defers the loading of certain cross-origin frames until the page is scrolled down near them. – Mac, Windows, Linux, Chrome OS, Android

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

Things are pretty clear from these flag descriptions. With built-in lazy loading, Chrome will get better at loading pages fast.



Expected results:

Lazy loading supposedly improves page load times by blocking some elements from being loaded on page load and loading them when the user scrolls near them.
Lazy loading is mostly useful for slow connections


I like lazy page/tab loading present in Firefox for sessions.
Chrome will add this feature.

Lazy image/frame loading (already in chrome) could be a nice addition to lazy page/tab loading in Firefox too with an option to enable/disable in preference just like Google Chrome.

Comment 1

[saproeno]

Reason for adding an option to disable it is
This gets annoying, Above siteis a great example of how ###### viewing it on desktop/mobile can be... 

on my iPhone, you get a notification that someone replied to you, you click notification and it loads the reply post... but in taking you to the reply post first, your phone loses the reply post as focus... as other elements have begun loading after page load... 
higher up on the page, pushing the reply post farther down, resulting in you having to scroll. 

Twitter embedding is one of the frequent offenders that are slow loading and push content farther down the page.
So disabling this should help.
I'd rather just wait an extra second for everything to load, and then be brought to the reply post...
as it stands now I have to scroll to get back to it, and sometimes more than once if an element was slow to load, pushing more things down in the process but for users of few tabs this might help

Currently the above doesn't happen on the chrome app on mobile.

Comment 2

[Sean Voisen (:svoisen)]

Reference to the related WICG feature policy: https://github.com/WICG/feature-policy/issues/193

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Also see https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

Comment 4

[Chris Peterson [:cpeterson]]

Blink LazyLoad Design Doc:
https://docs.google.com/document/d/1e8ZbVyUwgIkQMvJma3kKUDg8UUkLRRdANStqKuOIvHg/edit#

LazyLoad is a Chrome optimization that defers loading below-the-fold images and certain third-party iframes on the page until the user scrolls near them, which reduces data usage, speeds up page loads, and reduces memory use.

Blink LazyFrames Design Doc:
https://docs.google.com/document/d/1ITh7UqhmfirprVtjEtpfhga5Qyfoh78UkRmW8r3CntM/edit#

The LazyFrames mechanism in Blink defers certain iframes from being loaded until the user scrolls near them, in order to save data, speed up the loading of other parts of the page, and reduce memory usage. It will be used as part of the LazyLoad feature.

Comment 5

[Randell Jesup [:jesup] (needinfo me)]

Note that the scroll issue as things load is really a separate issue from LazyLoad per-se, and could be fixed without LazyLoad (though not without some work and perhaps issues).

Comment 6

[Swarnava Sengupta (:Swarnava)]

Dupe of bug 947427 or Bug 1542784?

Comment 7

[Hiroyuki Ikezoe (:hiro)]

Yep, I think we can close this. Lazy loading for images was implemented in bug 1542784. Lazy loading for iframes will be tracked in bug 1622090. I don't see any reasons to keep opening this bug.