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

Assigned To

None

Authored By

	Jdlrobson
	Mar 6 2017, 7:28 PM

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.

Details

Subject	Repo	Branch	Lines +/-
Support single answer surveys in Vue.js	mediawiki/extensions/QuickSurveys	master	+0 -0
Drop use of oojs-ui-widgets	mediawiki/extensions/QuickSurveys	master	+10 -10
Only load bits of OOjs UI necessary for survey render	mediawiki/extensions/QuickSurveys	master	+2 -1

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved	Goal	ovasileva	T198313 [GOAL] Advanced mobile contributions
Declined		None	T159738 Limit default styles loaded by OOUI (65kb after gzipping penalty to run a QuickSurveys) by droping use of oojs-ui-widgets
Resolved		AnneT	T284273 Allow links to be styled as buttons

Event Timeline

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

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

gerritbot added a project: Patch-For-Review.Apr 10 2017, 8:23 PM

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

ReleaseTaggerBot added a project: MW-1.29-release (WMF-deploy-2017-04-11_(1.29.0-wmf.20)).Apr 10 2017, 10:00 PM

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

• Konfused-Kitten mentioned this in rEQS8be885ae87f7: Only load bits of OOjs UI necessary for survey render.Apr 10 2017, 10:33 PM

Volker_E moved this task from Inbox to Backlog on the Front-end-Standards-Group board.Apr 12 2017, 6:04 PM

Volker_E moved this task from Backlog to Needs code review on the Front-end-Standards-Group board.Apr 13 2017, 12:16 AM

Jdlrobson removed a project: Patch-For-Review.Apr 20 2017, 6:13 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.

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

Krinkle removed a project: MW-1.29-release (WMF-deploy-2017-04-11_(1.29.0-wmf.20)).May 25 2017, 1:17 PM

In T159738#3219213, @Jdlrobson wrote:

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:

In T159738#3169382, @matmarex wrote:

(…) 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

gerritbot added a project: Patch-For-Review.Jun 27 2017, 8:24 PM

• Konfused-Kitten mentioned this in rEQS07c5f6dbc367: Drop use of oojs-ui-widgets.Jun 27 2017, 8:24 PM

• Konfused-Kitten mentioned this in rEQSc3f3784780ac: Drop use of oojs-ui-widgets.Jun 27 2017, 9:36 PM

• Konfused-Kitten mentioned this in rEQSd40764426ee5: Drop use of oojs-ui-widgets.Jun 27 2017, 11:11 PM

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

Jdlrobson added a project: Patch-Needs-Improvement.Jun 29 2017, 9:05 PM

This task is blocked until we seek some help: https://phabricator.wikimedia.org/T159738#3384807

In T159738#3384807, @Jdlrobson wrote:

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 Web-Team-Backlog board.

matmarex updated the task description. (Show Details)Jul 6 2017, 8:03 PM

Jdlrobson moved this task from Triaged but Future to Tracking on the Web-Team-Backlog board.Jul 7 2017, 11:25 PM

Jdlrobson edited projects, added Web-Team-Backlog (Tracking); removed Web-Team-Backlog.

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

Jdforrester-WMF removed a project: Patch-For-Review.Oct 18 2017, 7:40 PM

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 mentioned this in rEQSc72e8d1e150d: Final NoteDb migration updates.Jun 11 2018, 8:15 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

module	March 2017	Oct 2018
oojs-ui-core	138.1kb	159.1 KiB
oojs-ui-widgets	120.3kb	101.7 KiB
oojs-ui.styles.icons	105.4kb	x
oojs-ui.styles.textures	4.0KiB	3.4 KiB
oojs-ui-core.styles	63.2kb	63.1 KiB
oojs-ui.styles.indicators	14.1KiB	5.9 KiB
ext.quicksurveys.lib	4.4kb	4.8 KiB
ext.quicksurveys.views	6.5kb	6.6 KiB
ext.quicksurveys.init	683bytes	646
oojs-ui.styles.icons-alerts	x	16.7 KiB
oojs-ui.styles.icons-content	x	28.9 KiB
oojs-ui.styles.icons-editing-advanced	x	100.6 KiB
oojs-ui.styles.icons-interactions	x	60.0 KiB
oojs-ui.styles.icons-moderation	x	33.2 KiB
oojs-ui.styles.icons-movement	x	21.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 added a parent task: T198313: [GOAL] Advanced mobile contributions.

matmarex mentioned this in T210811: OOUI being loaded unconditionally on mobile site resulting in 50kb more bytes shipped.Nov 30 2018, 12:20 AM

Jdlrobson merged a task: T210811: OOUI being loaded unconditionally on mobile site resulting in 50kb more bytes shipped.Nov 30 2018, 12:22 AM

Jdlrobson added a subscriber: TerraCodes.

Jdlrobson mentioned this in T213459: Minimise the code QuickSurveys loads when there are no surveys running.Jan 10 2019, 5:43 PM

Jdlrobson moved this task from Backlog to Bugs on the QuickSurveys board.Jan 15 2019, 5:56 PM

Jdlrobson added a parent task: T235937: Remove 'mediawiki.ui.icon' .Oct 23 2019, 5:27 PM

Jdlrobson mentioned this in T235937: Remove 'mediawiki.ui.icon' .

Masumrezarock100 subscribed.Oct 23 2019, 8:27 PM

Volker_E mentioned this in T248061: RFC: Remove IE 8 from basic support.Mar 26 2020, 4:56 AM

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 mentioned this in T252844: 65kb of JS added to the desktop payload at end of April impacting first paint.

Jdlrobson merged a task: T252844: 65kb of JS added to the desktop payload at end of April impacting first paint.

Jdlrobson added subscribers: • Niedzielski, matthiasmullie, Krinkle.

Jdlrobson mentioned this in T251741: Turn off growth quicksurvey.May 29 2020, 3:25 PM

Jdlrobson raised the priority of this task from Low to Medium.Jun 9 2020, 4:57 PM

Jdlrobson added a subscriber: awight.

Jdlrobson mentioned this in T268782: It should be possible to target surveys at users with a specific user agent.Mar 2 2021, 7:09 PM

ovasileva subscribed.Apr 30 2021, 10:04 AM

ovasileva edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Tracking).May 5 2021, 5:57 PM

ovasileva moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.

Jdlrobson added a parent task: T282472: [GOAL] Performance impacting improvements to QuickSurveys.May 10 2021, 5:04 PM

Jdlrobson mentioned this in T284272: TextArea: Add TextArea component to Codex.Jun 4 2021, 12:23 AM

Jdlrobson added a subtask: T284272: TextArea: Add TextArea component to Codex.

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

gerritbot added a project: Patch-For-Review.Jun 4 2021, 12:24 AM

Restricted Application removed a project: Patch-Needs-Improvement. · View Herald TranscriptJun 4 2021, 12:24 AM

Jdlrobson mentioned this in T284273: Allow links to be styled as buttons.Jun 4 2021, 12:35 AM

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

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

Jdlrobson removed a parent task: T282472: [GOAL] Performance impacting improvements to QuickSurveys.Jun 11 2021, 4:48 PM

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

Jdlrobson mentioned this in T285890: Remove OOUI surveys and default to Vue.js.Jul 15 2021, 5:55 PM

Jdlrobson mentioned this in T294568: deploy quicksurvey for editors on eswiki and arwiki (for Growth IP editors research).Nov 9 2021, 3:50 PM

Volker_E removed a subtask: T284272: TextArea: Add TextArea component to Codex.Oct 5 2022, 4:08 AM

Volker_E closed subtask T284273: Allow links to be styled as buttons as Declined.Dec 22 2022, 12:50 AM

Jdlrobson reopened subtask T284273: Allow links to be styled as buttons as Open.Jan 5 2023, 7:26 PM

AnneT closed subtask T284273: Allow links to be styled as buttons as Resolved.Jun 20 2023, 10:04 PM

Jdlrobson removed a parent task: T235937: Remove 'mediawiki.ui.icon' .Jun 23 2023, 8:54 PM

	F7797100: Screen Shot 2017-04-27 at 1.26.55 PM.png
	Apr 27 2017, 8:27 PM

	F7797097: Screen Shot 2017-04-27 at 1.26.27 PM.png
	Apr 27 2017, 8:27 PM

	F6572359: Screen Shot 2017-03-14 at 11.33.23 AM.png
	Mar 14 2017, 6:35 PM

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