Page MenuHomePhabricator

Limit default styles loaded by OOUI (85kb after gzipping penalty to run a QuickSurveys) by droping use of oojs-ui-widgets
Open, LowPublic

Description

The QuickSurvey extension uses OOUI. All it does is render some buttons in a panel like so:


Running a quick survey adds about 70kb to a mobile page load [1] even when limiting the libraries being used to oojs-ui-core. As can be seen the majority of the offending code is in OOUI.

The majority of the styles inside oojs-ui.styles.icons and oojs-ui-core.styles are not being used according to a Chrome audit.

Please rethink how styles are loaded in OOUI.

Audit of additional code loaded when enabling a quicksurvey

+oojs-ui-core 138.1kb
+oojs-ui-widgets 120.3kb
+oojs-ui.styles.icons 105.4kb
+oojs-ui-core.styles 63.2kb
+oojs-ui.styles.indicators 14.1 KiB
+ mediawiki.template.muhogan 9.1kb
+ext.quicksurveys.lib 4.4kb
+oojs-ui.styles.textures "4.0 KiB"
+ext.quicksurveys.views 6.5kb
+schema.QuickSurveysResponses 879 bytes
+ext.quicksurveys.init 683bytes
+schema.QuickSurveyInitiation 406 bytes
+ext.quicksurveys.survey.drink-survey 290 bytes

[1] https://en.m.wikipedia.beta.wmflabs.org/w/load.php?debug=false&lang=en&modules=ext.quicksurveys.survey.internal.example.survey%7Cext.quicksurveys.views%7Cmediawiki.template.muhogan%7Coojs-ui%2Coojs-ui-core%2Coojs-ui-toolbars%2Coojs-ui-widgets%2Coojs-ui-windows%7Coojs-ui-core.styles%7Coojs-ui.styles.icons%2Cindicators%2Ctextures%7Cschema.QuickSurveysResponses&skin=minerva&version=05pxip4

Acceptance criteria

  • Drop use of oojs-ui-widgets and update styling rules
  • The choose event is no longer available - we'll have to assign a click event to every ButtonWidget. This click handler will need to communicate with the QuickSurvey so that the final pane is set.

Details

Related Gerrit Patches:
mediawiki/extensions/QuickSurveys : masterDrop use of oojs-ui-widgets
mediawiki/extensions/QuickSurveys : masterOnly load bits of OOjs UI necessary for survey render

Event Timeline

Jdlrobson created this task.Mar 6 2017, 7:28 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 6 2017, 7:28 PM

When we disabled this on the beta cluster the page took over 1 second less to load on a 3G connection but first paint for not impacted. Not clear how this impacts 2G and slower connections.

Jdlrobson changed the task status from Open to Stalled.Mar 21 2017, 6:39 PM
Jdlrobson triaged this task as High priority.

I don't think there is a clear solution here so I'm marking as stalled (we should do a spike first) but moving to triaged but future. If and when we decide to run another survey we should look to solve this so I've marked as high.

Are there any plans to provide a small lightweight version of OOjs UI that could help this? QuickSurveys uses OO.ui.StackLayout and OO.ui.ButtonOptionWidget so a library that just has these would be helpful.

'oojs-ui' is already split into four modules for 'core', 'widgets', 'windows' and 'toolbars'. You probably don't need the last two, so you shouldn't depend on them. Using ButtonGroupWidget/ButtonWidget instead of ButtonSelectWidget/ButtonOptionWidget would also remove the dependency on 'widgets', leaving you with just 'core'. I don't think it's possible to go any smaller right now.

Change 347456 had a related patch set uploaded (by Jdlrobson):
[mediawiki/extensions/QuickSurveys@master] Only load bits of OOjs UI necessary for survey render

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

Change 347456 merged by jenkins-bot:
[mediawiki/extensions/QuickSurveys@master] Only load bits of OOjs UI necessary for survey render

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

Thanks @matmarex !
When I get a chance I'll re-review the situation.

Jdlrobson renamed this task from 70kb penalty to run a QuickSurveys to Limit default styles loaded by OOjs UI (70kb penalty to run a QuickSurveys).Apr 27 2017, 8:27 PM
Jdlrobson removed Jdlrobson as the assignee of this task.
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task from Needs Prioritization to 2014-15 Q4 on the Readers-Web-Backlog board.

There doesn't look like there is any opportunties to resolve this without switching from OOjs UI to MediaWiki UI. Please advise what can be done here.

Jdlrobson changed the task status from Stalled to Open.Apr 27 2017, 8:28 PM

There doesn't look like there is any opportunties to resolve this without switching from OOjs UI to MediaWiki UI. Please advise what can be done here.

Per my previous comment:

(…) Using ButtonGroupWidget/ButtonWidget instead of ButtonSelectWidget/ButtonOptionWidget would also remove the dependency on 'widgets', leaving you with just 'core'. I don't think it's possible to go any smaller right now.

Has this been tried?

Nope haven't had time to explore using ButtonGroupWidget and ButtonWidget as I'm not sure if there is any particular reason ButtonSelectWidget/ButtonOptionWidget are being used. What would be the saving for that.. is it significant?

Jdlrobson lowered the priority of this task from High to Normal.May 31 2017, 4:55 PM

You would only need to load 'oojs-ui-core', instead of 'oojs-ui-core' and 'oojs-ui-widgets'. That's a difference of ~20 KB after gzip (120 KB before gzip).

Change 361762 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/QuickSurveys@master] Drop use of oojs-ui-widgets

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

So it seems we were making use of the 'connect' event of ButtonSelectWidget.

Previously we connected the choose event of ButtonSelectWidget to an action but that no longer exists. What's the ButtonGroupWidget event equivalent? (i should really be able to get this via a google but i can't... )

cc @Mooeypoo and over oojs ui devs :)

So it seems we were making use of the 'connect' event of ButtonSelectWidget.
Previously we connected the choose event of ButtonSelectWidget to an action but that no longer exists. What's the ButtonGroupWidget event equivalent? (i should really be able to get this via a google but i can't... )

There isn't one. You need to use the 'click' event on each ButtonWidget.

Thanks Bartosz, does look like this approach will shrink the CSS considerably.

Jdlrobson renamed this task from Limit default styles loaded by OOjs UI (70kb penalty to run a QuickSurveys) to Limit default styles loaded by OOjs UI (70kb penalty to run a QuickSurveys) by droping use of oojs-ui-widgets .Jul 6 2017, 7:38 PM
Jdlrobson lowered the priority of this task from Normal to Low.
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task from Incoming to Triaged but Future on the Readers-Web-Backlog board.
matmarex updated the task description. (Show Details)Jul 6 2017, 8:03 PM

Change 361762 abandoned by Jdlrobson:
Drop use of oojs-ui-widgets

Reason:
this was exploratory work. Can be restored when we work on this (anyone should feel free to pick up where I've left off if they are interested in resolving this)

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

Volker_E renamed this task from Limit default styles loaded by OOjs UI (70kb penalty to run a QuickSurveys) by droping use of oojs-ui-widgets to Limit default styles loaded by OOUI (70kb penalty to run a QuickSurveys) by droping use of oojs-ui-widgets .Jan 17 2018, 12:47 AM
Volker_E updated the task description. (Show Details)
Volker_E moved this task from Backlog to Next-up on the OOUI board.Feb 2 2018, 2:17 AM
Jdlrobson added a subscriber: Volker_E.EditedOct 4 2018, 11:13 PM

Per @Volker_E's request I took another look at this.
Visiting https://en.wikipedia.beta.wmflabs.org/wiki/Transcluded_page?quicksurvey=true

the quick survey request is now 85.3kb (after gzipping). it seems to have gone up from 70kb :(

oojs-ui-toolbars, oojs-ui-windows is now being loaded and different icon sets are being loaded.

Before gzipping comparison

moduleMarch 2017Oct 2018
oojs-ui-core138.1kb159.1 KiB
oojs-ui-widgets120.3kb101.7 KiB
oojs-ui.styles.icons105.4kbx
oojs-ui.styles.textures4.0KiB3.4 KiB
oojs-ui-core.styles63.2kb63.1 KiB
oojs-ui.styles.indicators14.1KiB5.9 KiB
ext.quicksurveys.lib4.4kb4.8 KiB
ext.quicksurveys.views6.5kb6.6 KiB
ext.quicksurveys.init683bytes646
oojs-ui.styles.icons-alertsx16.7 KiB
oojs-ui.styles.icons-contentx28.9 KiB
oojs-ui.styles.icons-editing-advancedx100.6 KiB
oojs-ui.styles.icons-interactionsx60.0 KiB
oojs-ui.styles.icons-moderationx33.2 KiB
oojs-ui.styles.icons-movementx21.4 KiB
Jdlrobson renamed this task from Limit default styles loaded by OOUI (70kb penalty to run a QuickSurveys) by droping use of oojs-ui-widgets to Limit default styles loaded by OOUI (85kb after gzipping penalty to run a QuickSurveys) by droping use of oojs-ui-widgets .Oct 4 2018, 11:17 PM
Jdlrobson moved this task from Backlog to Bugs on the QuickSurveys board.Jan 15 2019, 5:56 PM