Page MenuHomePhabricator

Add detection for unused @embed data uris
Closed, ResolvedPublic

Description

mw.loader.inspect already measures how many unused css rules there are in a module's stylesheets.

It'd be interesting to also report images that were embedded but are in rules that are not applied to the current page.

See also:
T121730: Audit use of @embed and remove where not needed (2019)

Event Timeline

Krinkle raised the priority of this task from to Needs Triage.
Krinkle updated the task description. (Show Details)
Krinkle added a subscriber: Krinkle.
Gilles moved this task from Inbox to Backlog: Maintenance on the Performance-Team board.
Gilles added a subscriber: Gilles.
Krinkle renamed this task from Add detection for unused @embed data uris in mw.loader.inspect to Add detection for unused @embed data uris.Feb 22 2017, 12:46 AM

Change 339095 had a related patch set uploaded (by Krinkle):
[WIP] Initial POC for detecting unused images in style rules

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

This is a really small nitpick and we can perfectly release it without fixing it in my book, but in Chrome the URL slips down a couple of pixels:

urls.png (256×1 px, 40 KB)

When I tested in Firefox it seems the same images is picked up twice:

Screen Shot 2017-03-08 at 12.52.11 PM.png (328×1 px, 54 KB)

But when I test on articles with a lot content, it seems like inspector is broken for Firefox, let me investigate that.

The Firefox issue is CSP problem right? I'll create task for catch that and log it, but something has changes since "it worked before"™.

Krinkle raised the priority of this task from Low to Medium.Mar 10 2017, 1:47 AM

When I tested in Firefox it seems the same images is picked up twice:

Served stylesheet:

.postedit-icon-checkmark {
	background-image: url(data:image/png;base64,iVBORw0KGg..);
	background-image: url(/w/resources/src/mediawiki.action/images/green-checkmark.png?d94f1)!ie;
}

In Chrome, only the effective rules are iterated over. Later declarations override previous ones, except if they're invalid. Which is a common way of setting background fallbacks (e.g. first set a solid background color, then try again with rgba).

In Firefox, I thought it iterated over both. However, adding some instrumentation showed that it was due to something else entirely:

Screen Shot 2017-03-13 at 20.40.21.png (1×1 px, 346 KB)

Firefox provides access both through the camelCase and the dashed-name of the parsed CSS rules. As accessor this makes a lot of sense, but not for iteration :facepalm:.

Change 339095 merged by jenkins-bot:
[mediawiki/extensions/PerformanceInspector] Detect unused image embeds in stylesheets

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