Page MenuHomePhabricator

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

Description

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

Screen Shot 2017-04-27 at 1.26.27 PM.png (341×320 px, 26 KB)

Screen Shot 2017-04-27 at 1.26.55 PM.png (192×317 px, 23 KB)

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.

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

'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 Medium.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... )

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

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)

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 renamed this task from Limit default styles loaded by OOUI (85kb after gzipping penalty to run a QuickSurveys) by droping use of oojs-ui-widgets to Limit default styles loaded by OOUI (65kb after gzipping penalty to run a QuickSurveys) by droping use of oojs-ui-widgets .May 15 2020, 2:02 PM
Jdlrobson raised the priority of this task from Low to Medium.Jun 9 2020, 4:57 PM
Jdlrobson added a subscriber: awight.

Change 698078 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/QuickSurveys@master] WIP: ExternalSurvey.js => QuickSurvey.vue

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

I ported QuickSurveys to Vue.js. Resulting JS inside QuickSurveys was around the same bytes.
However the Vue dependencies are significantly smaller after gzip:

With Vue.js wvui-search|wvui: 33.48KB
With OOUI ( oojs|oojs-router|oojs-ui|oojs-ui-core|oojs-ui-core.styles|oojs-ui-core.icons|oojs-ui-widgets|oojs-ui-widgets.styles|oojs-ui-widgets.icons|oojs-ui-toolbars|oojs-ui-toolbars.icons|oojs-ui-windows|oojs-ui-windows.icons|oojs-ui.styles.indicators|oojs-ui.styles.icons-accessibility|oojs-ui.styles.icons-alerts|oojs-ui.styles.icons-content|oojs-ui.styles.icons-editing-advanced|oojs-ui.styles.icons-editing-citation|oojs-ui.styles.icons-editing-core|oojs-ui.styles.icons-editing-list|oojs-ui.styles.icons-editing-styling|oojs-ui.styles.icons-interactions|oojs-ui.styles.icons-layout|oojs-ui.styles.icons-location|oojs-ui.styles.icons-media|oojs-ui.styles.icons-moderation|oojs-ui.styles.icons-movement|oojs-ui.styles.icons-user|oojs-ui.styles.icons-wikimedia) 118.86KB

I thus recommend we solve this issue by porting QuickSurveys to Vue.js => T284320

Change 698212 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/QuickSurveys@master] Support single answer surveys in Vue.js

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

Change 698078 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/QuickSurveys@master] Begin the QuickSurveys vue.js port

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

Change 698212 abandoned by Jdlrobson:

[mediawiki/extensions/QuickSurveys@master] Support single answer surveys in Vue.js

Reason:

Merged into parent patch

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