Page MenuHomePhabricator

It should be possible to specify a ResourceLoaderImage module without data uris
Closed, ResolvedPublic

Description

In the mobile site, we have various icons that we would like to load without needing JavaScript. When loaded as data uris these bloat the size of the render blocking stylesheet (on mobile this is currently 8kb)

It could be possible in a module definition using the ResourceLoaderImage module to request data uris are not used. This gives full control to the engineer in how their styles are loaded.

On mobile, this would reduce the size of the render blocking CSS by 1.6kb after gzipping.

It appears, ResourceLoaderImage module can already handle shipping assets as URIs so the proposed change would be quite simple: a flag in ResourceLoader that allows the module to opt in.

Data-uris are usually preferable.. so this would remain the default.

Related:

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 5 2018, 11:51 PM

Change 444142 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Allow ResourceLoaderImage modules without data URIs

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

Change 444143 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Reduce render blocking styles by deferring loading of icons

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

Krinkle updated the task description. (Show Details)
Restricted Application added a project: Performance-Team. · View Herald TranscriptJul 6 2018, 12:03 AM

Change 444142 merged by jenkins-bot:
[mediawiki/core@master] Allow ResourceLoaderImage modules without data URIs

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

Patch was merged but i wanted to make sure everyone was happy with the idea and the proposed opt in method (per module not per icon). If so i will submit a patch to allow usage in skins/extensions (right now it's not going to validate as i didn't update the docs)

Imarlier assigned this task to Krinkle.Jul 9 2018, 8:05 PM
Imarlier moved this task from Inbox to Doing on the Performance-Team board.
Krinkle closed this task as Resolved.Jul 9 2018, 11:23 PM

Thanks.

Change 444764 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Allow extensions/skins to use useDataURI option

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

Change 444764 merged by jenkins-bot:
[mediawiki/core@master] registration: Document ResourceLoaderImageModule's useDataURI option

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

Change 444143 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Reduce render blocking styles by deferring loading of icons

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