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 created this task.Dec 10 2015, 8:28 PM
Krinkle raised the priority of this task from to Needs Triage.
Krinkle updated the task description. (Show Details)
Krinkle added a subscriber: Krinkle.
Restricted Application added subscribers: StudiesWorld, Aklapper. · View Herald TranscriptDec 10 2015, 8:28 PM
Gilles triaged this task as Low priority.Dec 14 2015, 7:41 PM
Gilles moved this task from Inbox to Backlog: Small & Maintenance on the Performance-Team board.
Gilles added a subscriber: Gilles.
Krinkle updated the task description. (Show Details)Dec 6 2016, 1:06 AM
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

Krinkle claimed this task.Feb 22 2017, 12:47 AM
Peter added a subscriber: Peter.Mar 8 2017, 12:22 PM

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:

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

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

Peter added a comment.Mar 8 2017, 1:03 PM

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:

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:.

Fixed in the latest patch version of https://gerrit.wikimedia.org/r/339095.

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

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

Krinkle closed this task as Resolved.Mar 14 2017, 6:10 PM