Page MenuHomePhabricator

Polish Wikipedia loads almost double amount of render blocking CSS for anonymous users
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:

  • 36.2kb of render blocking CSS is loaded for anonymous page views (compared to 19.3kb on English Wikipedia)

What should have happened instead?:
The bundle should be more optimized. Render blocking CSS does contribute to higher first paint times, especially on poor connections and older devides.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

The main reasons for the adding CSS load seem to be a combination of the following:

  • the installation of MediaWiki-extensions-FlaggedRevs (tracked n T350514)
  • The installation of ReferenceTooltips for anonymous users by default which loads jquery.ui and oojs-ui-core (perhaps this could be revisited in light of T282999)
  • The addition of oojs-ui-core.icons, oojs-ui.styles and oojs-ui.styles.indicator to render blocking CSS (not sure what is adding this but it does not appear to be gadget related and seems related to something on the page calling OutputPage::enableOOUI)

Event Timeline

Jdlrobson added subscribers: Nux, matmarex, sgrabarczuk.

Adding some Polish Wikipedians who might be able to help efforts to optimize this.

Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
egardner updated the task description. (Show Details)
egardner moved this task from Inbox to Following on the Design-System-Team board.

When T349423 is complete and live in production, we'll be able to provide a "proper" solution to this problem for any MW extension or skin using Codex. At that point, a given module will be able to specify a list of codexComponents that it needs and get only the CSS and/or JS files for those components (plus any dependencies).

The installation of ReferenceTooltips for anonymous users by default which loads jquery.ui and oojs-ui-core (perhaps this could be revisited in light of T282999)

The dependency on jquery-ui has been removed from this gadget (it was a leftover from a previous version).

The addition of oojs-ui-core.icons, oojs-ui.styles and oojs-ui.styles.indicator to render blocking CSS (not sure what is adding this but it does not appear to be gadget related and seems related to something on the page calling OutputPage::enableOOUI)

11 OOUI modules (incl. oojs-ui-core.icons, oojs-ui-core.styles, oojs-ui.styles.indicators) are loaded even on an empty page in the safe mode when browsing anonymously - https://pl.wikipedia.org/wiki/Wikipedysta:Msz2001/brudnopis?safemode=1

I used the following to list the modules:

mw.loader.getModuleNames().filter(x => mw.loader.getState(x) == 'ready').filter(x => x.indexOf('oojs') == 0).sort()

I suppose that it might be an issue of DiscussionTools. When running with a clear cache, there are two resource requests that load OOUI:

The call stack for both looks like (there's only a minor difference in line with controller.js but it doesn't change much for finding the codebase that's loading the libs):

addScript	@	load.php?lang=pl&modules=startup&only=scripts&raw=1&safemode=1&skin=vector-2022:9
doRequest	@	load.php?lang=pl&modules=startup&only=scripts&raw=1&safemode=1&skin=vector-2022:14
batchRequest	@	load.php?lang=pl&modules=startup&only=scripts&raw=1&safemode=1&skin=vector-2022:15
work	@	load.php?lang=pl&modules=startup&only=scripts&raw=1&safemode=1&skin=vector-2022:17
enqueue	@	load.php?lang=pl&modules=startup&only=scripts&raw=1&safemode=1&skin=vector-2022:10
mw.loader.using	@	mediawiki.base.js:793
init	@	overflowMenu.js:8
init	@	controller.js:336
reallyInit	@	dt.init.js:38
mw.dt.init	@	dt.init.js:49
add	@	mediawiki.base.js:495
dt.init.js	@	dt.init.js:77
runScript	@	load.php?lang=pl&modules=startup&only=scripts&raw=1&safemode=1&skin=vector-2022:11
(anonymous)	@	load.php?lang=pl&modules=startup&only=scripts&raw=1&safemode=1&skin=vector-2022:12
flushCssBuffer	@	load.php?lang=pl&modules=startup&only=scripts&raw=1&safemode=1&skin=vector-2022:4
requestAnimationFrame (async)	
... (trimmed but nothing interesting down there)

EDIT: There's a third load (for CSS): https://pl.wikipedia.org/w/load.php?lang=pl&modules=codex-search-styles%7Cext.discussionTools.init.styles%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediaBadges%7Cmediawiki.widgets.styles%7Coojs-ui-core.icons%2Cstyles%7Coojs-ui.styles.indicators%7Cskins.vector.icons%2Cstyles&only=styles&skin=vector-2022

It originates from the HTML (not surprising, it's styles) but when comparing with analoguous request from enwiki (below) the difference is likely to come from DiscussionTools and its dependencies.

https://en.wikipedia.org/w/load.php?lang=en&modules=codex-search-styles%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediaBadges%7Cskins.vector.icons%2Cstyles&only=styles&skin=vector-2022

DiscussionTools is loaded on https://pl.wikipedia.org/wiki/Wikipedia:Strona_główna, because it's a page in the "Wikipedia:" (project) namespace. See discussion on T249036: Enable the Reply tool in the Project namespace (Wikipedia:) and other "wgExtraSignatureNamespaces".

That is not ideal for the main page though. The Editing team recently added a way to disable this behavior for individual pages, using the __NOTALK__ magic word (https://www.mediawiki.org/wiki/Help:DiscussionTools/Magic_words_and_markup). I added it to the main page: https://pl.wikipedia.org/w/index.php?title=Wikipedia:Strona_główna&diff=prev&oldid=71731927

That reduced the CSS size from 36.91 kB to 24.14 kB in my testing.


To get comparable results, try comparing pages in the same namespaces and similar content. For example:

Both pages load DiscussionTools (mw.loader.getState('ext.discussionTools.init') === "ready"), and the small increase on pl.wp is due to local styles/gadgets.


Neither page loads DiscussionTools (mw.loader.getState('ext.discussionTools.init') === "registered"). The increase is probably mostly FlaggedRevs? I didn't investigate.

Jdlrobson changed the task status from Open to Stalled.Nov 13 2023, 10:37 PM

@matmarex thanks for the investigation here! When I visit https://pl.wikipedia.org/wiki/Wikipedia:Strona_g%C5%82%C3%B3wna now I'm seeing 15.9kb of CSS now.

https://pl.wikipedia.org/wiki/Marian_Piegza is still loading 33.4kb but the change in https://gerrit.wikimedia.org/r/c/mediawiki/extensions/FlaggedRevs/+/973379 means this shouldn't regress again. I'll check in again on Thursday to verify and resolve this issue.

I can confirm the core style module on main page is now loading 21.1kb of CSS (which is consistent with English Wikipedia with the Zebra feature enabled)

There is still an additional 7.6kb of render blocking CSS coming from Polish site/gadgets for anonymous users which is a bit excessive and has a lot of room for optimization but there's not much we can do about that. Pinging @Nux @Msz2001 to make sure they are at least aware of this.