Page MenuHomePhabricator

Make lazy loading images resilient
Closed, ResolvedPublic

Description

One learning from Ilya Grigoriks IO talk Making we applications fast and resilient is that we can never trust that every response reaches the users phone. Even on 4g in the big city, that happens.

We have solutions today for ABC graded browsers but if the javascript isn't loaded or really slow, the images aren't loaded.

I think there's multiple ways to improve this:

First step could be to make a link to the image so that the user at least can click on it to see the image. Today we show the friendly text of the image, but we don't link to it (well we have the link but no element that you can click on). Check the image and the "Obama in his official ..."

Screen Shot 2016-06-01 at 1.33.46 PM.png (446×1 px, 157 KB)

Second step could be a to find way to trigger the image classes after X seconds if the original JS isn't loaded and change them to image tags with some inline javascript? Or is it too dirty?

Other ideas how we can make sure users can see the images if the javascript isn't loaded?

Demonstration of problem

(Imagine me clicking the offline box is a commuter going through a tunnel on a train losing connectivity...)

lazyimages.gif (326×696 px, 2 MB)

QA steps

  • Go to https://en.m.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein on a mobile device and let the page load
  • Drop the Internet connection.
  • Scroll to the "Life and career" section and expand the section
  • Expected: the image should not load
  • Enable your internet connection
  • Right click the broken image and open in a new tab
  • Expected: the image loads.

QA Results - Beta

ACStatusDetails
1T136693#7481619
2T136693#7481619

QA Results - Prod

ACStatusDetails
1T136693#7495979
2T136693#7495979

Event Timeline

Jdlrobson raised the priority of this task from Medium to Needs Triage.Aug 29 2016, 9:57 PM
Jdlrobson edited projects, added Web-Team-Backlog; removed Reading-Web-Planning.
dr0ptp4kt moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.

Marked as low while we work on bugs for lazy loading images

Adding a click event to the image placeholder seems like a good solution. It's not a link, but it at least allows the user to retry the load of the image.

I notice we don't have any error handling when an image load fails. We could also show an icon and toast informing the user when images fail to load.

@Nirzar any thoughts on this particular problem?

@Jdlrobson That's a good idea, Let me put up a quick mock.

@Nirzar alternatively we can add the image tag right away and be a bit more clever about how we use our animations.
See conversation in https://gerrit.wikimedia.org/r/#/c/349717/

From @Krinkle:

The idea is to have UX and design remain exactly as it is today (as approved by Nirzar previously): a 0.3s fade that starts as soon as the image download completes fully. With the exception that:

  1. If the image download completes normally but JS isn't getting execution time (e.g. due to scroll throttling or other expensive tasks the browser is doing, especially common on mobile), the fade will start on its own eventually instead of only after 1-2 seconds when the user stops scrolling or when JS execution is unlocked.
    1. If the download takes more than 2 seconds, the fade will happen with whatever has been rendered internally so far (possibly nothing, in which case the fade is invisible to the user) and the image download/render is completed natively further, friction-free. Here's a quick mock up of the end result (ignore the code): https://codepen.io/Krinkle/full/VbjKEo

Failed image loading with retry action on multiple image sizes

iPhone 7 Copy.png (1×750 px, 36 KB)

in action >

iPhone 7.png (1×750 px, 135 KB)

Looks good! Let's add the icon and spec to description and triage but future this! :)

This looks amazing. In the Page Library (Android / iOS), a failed image appears dark like this:

screenshot-2018-07-27-09-05-42-028942855.png (2×1 px, 251 KB)

And you tap to reload:

screenshot-2018-07-27-09-06-14-446044270.png (2×1 px, 1 MB)

The CSS loading animation (only seen on slow connections) looks like:

lazy-load.gif (806×351 px, 1 MB)

Background here: https://blog.wikimedia.org/2017/12/06/think-twice-code-once/.

Jdlrobson added a subscriber: alexhollender_WMF.

@alexhollender can you pick up where nirzar left off?
https://phabricator.wikimedia.org/T136693#3423361
This is mostly ready to be worked on.

@Jdlrobson looks good to me, what else is needed? just assets?

I noticed recently that the placeholder images on mobile tend to "flicker" a bit before they load. They appear grey, then white, then the image fades in.

This is visible in the video below:
https://drive.google.com/file/d/18YhZBFYFv9sJcMJQ8d5-iEgk5FbXMJ1l/view?usp=sharing

Removing task assignee due to inactivity, as this open task has been assigned to the same person for more than two years (see the emails sent to the task assignee on Oct27 and Nov23). Please assign this task to yourself again if you still realistically [plan to] work on this task - it would be welcome.
(See https://www.mediawiki.org/wiki/Bug_management/Assignee_cleanup for tips how to best manage your individual work in Phabricator.)

Change 735453 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/MobileFrontend@master] Make lazy loading images resilient

https://gerrit.wikimedia.org/r/735453

Change 735453 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Make lazy loading images resilient

https://gerrit.wikimedia.org/r/735453

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Go to https://en.m.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein on a mobile device and let the page load
Drop the Internet connection.
Scroll to the "Life and career" section and expand the section
✅ AC1: Expected: the image should not load

en.m.wikipedia.beta.wmflabs.org_wiki_Albert_Einstein(iPhone 11 Pro Max).png (2×1 px, 359 KB)

Enable your internet connection
Right click the broken image and open in a new tab
✅ AC2: Expected: the image loads.
Screen Shot 2021-11-04 at 6.21.19 AM.png (810×1 px, 190 KB)

Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Go to https://en.m.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein on a mobile device and let the page load
Drop the Internet connection.
Scroll to the "Life and career" section and expand the section
✅ AC1: Expected: the image should not load

en.m.wikipedia.org_w_index.php_title=Albert_Einstein&vectorstickyheader=1&vectorstickyheaderedit=0&mobileaction=toggle_view_mobile(iPhone 11 Pro Max).png (2×1 px, 474 KB)

Enable your internet connection
Right click the broken image and open in a new tab
✅ AC2: Expected: the image loads.

Screen Shot 2021-11-10 at 6.54.14 AM.png (928×961 px, 186 KB)