Improve image loading performance
Open, Stalled, LowPublic
Actions

Assigned To

None

Authored By

	Sgs
	Apr 24 2023, 8:31 AM

Description

The images used inside the on-boarding steps do not have any preloading logic at the moment or performance optimization. Let's review the current implementation so it has the same experience, at least, that the prior OOUI ProcessDialog implementation.

Details

	Subject	Repo	Branch	Lines +/-
	Frontend documentation: remove img tag from AddImageDialog	mediawiki/extensions/GrowthExperiments	master	+50 -38
	Frontend documentation: Dialog images use background-image CSS property	mediawiki/extensions/GrowthExperiments	master	+51 -35

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Open	None	T367429 [Epic] FY 2024-25 Growth Maintenance Work
Open	Sgs	T296646 [Epic] Migration of front-end modules to Vue.js components
Resolved	KStoller-WMF	T329033 [Internship] Modernization of web interfaces using Vue.js
In Progress	None	T329037 Refactor the "Add a link" on-boarding dialog to Vue
Stalled	None	T335268 Improve image loading performance

Event Timeline

Sgs renamed this task from Investigate image loading performance to Improve image loading performance.Apr 24 2023, 8:31 AM

Sgs created this task.

• VYanez-WMF subscribed.Apr 24 2023, 12:20 PM

• VYanez-WMF claimed this task.May 1 2023, 2:53 PM

Change 914761 had a related patch set uploaded (by Viviana Yanez; author: Viviana Yanez):

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: Add OnboardingImage component with preloading logic for images

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

gerritbot added a project: Patch-For-Review.May 3 2023, 11:34 AM

Sgs changed the task status from Open to In Progress.May 15 2023, 10:08 AM

Sgs moved this task from Incoming to In Progress on the Growth-Team (Sprint 0 (Growth Team)) board.

Sgs moved this task from In Progress to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.May 15 2023, 10:30 AM

We will get back to the initial solution using background images because of the RTL support in MW for this which also implies image preloading.

Sgs closed this task as Resolved.May 16 2023, 10:18 AM

Sgs reopened this task as In Progress.May 16 2023, 10:49 AM

Sgs moved this task from Code Review to In Progress on the Growth-Team (Sprint 0 (Growth Team)) board.May 16 2023, 11:15 AM

Change 914761 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: Dialog images use background-image CSS property

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

Maintenance_bot removed a project: Patch-For-Review.May 17 2023, 4:30 PM

ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.10; 2023-05-23).May 17 2023, 5:00 PM

Sgs closed this task as Resolved.May 18 2023, 11:36 AM

Change 924075 had a related patch set uploaded (by Viviana Yanez; author: Viviana Yanez):

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: remove img tag from AddImageDialog

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

gerritbot added a project: Patch-For-Review.May 29 2023, 12:05 PM

Change 924075 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Frontend documentation: remove img tag from AddImageDialog

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

Maintenance_bot removed a project: Patch-For-Review.May 30 2023, 9:30 AM

ReleaseTaggerBot edited projects, added MW-1.41-notes (1.41.0-wmf.12; 2023-06-06); removed MW-1.41-notes (1.41.0-wmf.10; 2023-05-23).May 30 2023, 1:01 PM

In order to take advantage of Resource Loader image preloading optimisation and filenames ending conversion to adapt to images to RTL, we decided to rollback to implement the dialog images as background-images.
However this approach introduced a portability issue, because the static assets are inlined as base64 URLs in Vite (https://github.com/vitejs/vite/issues/4454) and images are not adapting to RTL.
We are considering using a plugin as https://github.com/vitejs/vite/issues/4454#issuecomment-1478992832 or https://github.com/ManBearTM/vite-plugin-no-bundle so we can keep using background-images.
Other possible solution would be to going back to use an image tag and add logic to apply the RTL image changes, but we would need then to solve the performance issue on image loading.