Background
Lazy loaded images do not work in Parsoid meaning Wikivoyage mobile users are downloading images that they may never see.
Native lazy loading landed in Chrome 76, which is now the stable version: https://www.chromestatus.com/feature/5645767347798016
A patch from @TheDJ implements native lazy loading in Parsoid. On the long run we'll be able to remove all associated code with the legacy feature and potentially apply this to the desktop site.
User story
As a reader of Wikivoyage mobile I don't want to download images I am not viewing.
Requirement
Ensure that native image lazy loading is implemented on the mobile site using Parsoid. Images inside collapsed sections should not be downloaded until the section is opened.
BDD
Feature: Implement native lazy loading for images on the mobile site with Parsoid
Scenario: Images inside collapsed sections should not load until the section is opened
Given the user is viewing the mobile site using Parsoid
And the page contains collapsed sections with images
When the user opens a collapsed section
Then images within the section should download only after the section is openedTest Steps
Test Case 1: Verify Lazy Loading of Images in Collapsed Sections
- Find a page with images
- Visit mobile site, resize browser so sections begin collapsed
- Open the network tab and filter for "images"
- On https://en.m.wikipedia.org/wiki/Spain?useparsoid=1 open a section with images, and the images should download in the network tab
- AC1: Confirm that the images within the section start downloading after the section is opened.
Design
- Add mockups and design requirements
Acceptance criteria
For parsoid and non-parsoid views:
- When viewing the mobile site, any image inside a collapsed section should not be downloaded until the section is open (use the network tab to confirm this)
Communication criteria - does this need an announcement or discussion?
- Add communication criteria
Rollback plan
The MobileFrontend patch can be safely reverted.
Additional notes
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) { }To manage roll out and facilitate testing it's suggested that this new feature is tied to Parsoid views.
https://phabricator.wikimedia.org/
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T230812#10348597 |
This task was created by Version 1.2.0 of the Web team task template using phabulous
