Page MenuHomePhabricator

Use native image lazy loading on mobile site
Open, Needs TriagePublic

Description

This landed in Chrome 76, which is now the stable version: https://www.chromestatus.com/feature/5645767347798016

The description shows how elaborate this first implementation is, taking into account effective network conditions to adapt the amount of lazy-loading:

The distance threshold after which the deferred content will start loading-in depends on factors including the current effective connection type, and whether Lite mode is enabled. The distance is chosen so that the deferred content almost always finishes loading by the time it becomes visible.

I've verified this behaviour using a demo page linked from the work-in-progress spec: https://scalable-loading-contribs.firebaseapp.com/test.html and it works as advertised.

This adaptive behaviour is more advanced than our current homemade JS-based solution. Additionally, having the browser do it natively will get rid of processing overhead (see T225946).

Support for native image lazy loading can be detected via:

if ('loading' in HTMLImageElement.prototype) { }

Event Timeline

Gilles created this task.Aug 20 2019, 3:10 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 20 2019, 3:10 PM
Gilles renamed this task from Use native lazy loading to Use native image lazy loading.Aug 20 2019, 3:11 PM
Gilles added a subscriber: nray.Aug 20 2019, 3:15 PM
Gilles updated the task description. (Show Details)Aug 20 2019, 4:57 PM
Gilles renamed this task from Use native image lazy loading to Use native image lazy loading on mobile site.Aug 21 2019, 8:35 AM
Jdlrobson added a subscriber: Jdlrobson.

Unless I'm missing something, I don't see any benefit of using native lazy loading right now since we still need to rewrite the DOM for browsers where native lazy image loading is not available and that could get a bit messy supporting both modes.

<noscript>
  <img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/9/99/Emanuel_Gottlieb_Leutze_-_Columbus_Before_the_Queen.JPG/300px-Emanuel_Gottlieb_Leutze_-_Columbus_Before_the_Queen.JPG" decoding="async" width="300" height="224" class="thumbimage" data-file-width="1536" data-file-height="1147">
</noscript>
<span class="lazy-image-placeholder" style="width: 300px;height: 224px;" data-src="//upload.wikimedia.org/wikipedia/commons/thumb/9/99/Emanuel_Gottlieb_Leutze_-_Columbus_Before_the_Queen.JPG/300px-Emanuel_Gottlieb_Leutze_-_Columbus_Before_the_Queen.JPG" data-alt="" data-width="300" data-height="224" data-class="thumbimage"></span>
</a>

That said, possibly it might be neater to replace the lazy-image-placeholder such that it's more inline with the spec and serve an img tag with attribute lazy. I don't think we're going to have time to look at this ourselves this year given our big project relates to refreshing desktop but seems enticing when browser support is better!

Peter added a subscriber: Peter.Aug 23 2019, 5:08 AM

It would be nice if we could just do the switch when we have X amount on mobile traffic that supports it, but we would still regress performance (and increase download) for users with older browser (probably users that needs it the most)? So I think we need to live with the both solutions side by side. But not saying we should implement it now :)

It seems that its coming in WebKit soonish https://bugs.webkit.org/show_bug.cgi?id=196698#c80.

@Jdlrobson would be cool to also look into it on desktop when you do the new projects? There we could have clean start and just use it for browsers that supports it.

kchapman moved this task from Inbox to Radar on the Performance-Team board.Aug 26 2019, 8:22 PM
kchapman edited projects, added Performance-Team (Radar); removed Performance-Team.