Page MenuHomePhabricator

mediawiki.ui.button should be loaded via JavaScript
Open, Needs TriagePublic

Description

Problem: We load lots of mediawiki.ui styles as render blocking, but they do not need to be render blocking.

We will load most of mediawiki.ui.button via JavaScript. This will trim down initial CSS by up to 0.7kb.
Minerva will load a lightweight CSS module which simply provides the basic CSS for the button.

@Volker_E and I took a look at mediawiki.ui.button usage and Minerva and special pages are the only things that use this code without JavaScript.

Acceptance criteria

  • Make sure a minimum render blocking module mediawiki.ui.lite is loaded on all pages
  • Make sure the basic mediawiki.ui.lite module is loaded on Special:MobileWatchlist pages without JavaScript and the full mediawiki.ui.button module is loaded with JavaScript.
  • Make sure mediawiki.ui.button is loaded via JavaScript on all content pages

Event Timeline

Jdlrobson moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.

From a UX perspective, the basic styles should not only contain box sizing specific properties, but also backgrounds, colors, border-colors (, box-shadows) of the normal states in order not only preventing reflow but having an acceptable visual first widget rendering.

Vvjjkkii renamed this task from mediawiki.ui.button should be loaded via JavaScript to endaaaaaaa.Jul 1 2018, 1:12 AM
Vvjjkkii triaged this task as High priority.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed a subscriber: Aklapper.
CommunityTechBot renamed this task from endaaaaaaa to mediawiki.ui.button should be loaded via JavaScript.Jul 2 2018, 4:30 PM
CommunityTechBot raised the priority of this task from High to Needs Triage.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added a subscriber: Aklapper.

Change 444276 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Load mediawiki.ui.button in JavaScript

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