Page MenuHomePhabricator

[EPIC] Reduce bloat of Page Previews RL module(s)
Closed, ResolvedPublic

Description

Popups in current form will add the following 96.1KiB code to the initially loaded JavaScript of a page:

  • ext.popups.desktop (26.8 KiB)
  • jquery.jStorage (12.0 KiB)
  • moment (48.8 KiB)
  • ext.popups.targets.desktopTarget (2.2 KiB)
  • jquery.hidpi (1.4 KiB)
  • ext.popups.renderer.desktopRenderer (4.9 KiB)

 Recommendations

  • Remove the use of moment. 48.8kb simply to render the line "Edited 33 minutes ago" is unacceptable. Consider using the library in MobileFrontend which is considerably smaller.
  • Replace usage of jquery.jStorage with the much smaller and more limited mediawiki.storage

 Recommendations that've been shelved

Only load the bare minimum needed for Popups on start up

On the first hover pull down the remaining libraries. For users who do not hover over links they should not be penalised and future loads will come from localStorage.

AFAICT these recommendations both mean the same thing. Regardless, they were discussed at length during the rewrite, though we never wrote anything down, and our decision was that delaying the initial preview would damage the user experience for those users who have Page Previews enabled – bearing in mind that Page Previews will eventually be enabled for all anons on a majority of the Wikipedias.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 28 2016, 9:18 PM
phuedx added a subscriber: phuedx.Apr 29 2016, 9:33 AM

Only load the bare minimum needed for Popups on start up. On the first hover pull down the remaining libraries. For users who do not hover over links they should not be penalised and future loads will come from localStorage.

As always, this approach needs consideration. In decreasing bandwidth consumption by not loading modules, we increase the time to render the first popup – the UA will dispatch at least two HTTP requests to fetch the remaining modules and the data required to render the popup.

Are the file sizes you've given in the description uncompressed?

gzip -9 -c resources/**/*.js ../../resources/lib/moment/moment.js | wc -c

gives 28755.

That said, if we really are using Moment.js to render "Edited 33 minutes ago"-like sentences, then upstreaming MobileFrontend's micro library would be a worthy task.

Indeed, assuming that the mobile.modifiedBar weren't modified too much during the upstreaming:

gzip -9 -c resources/**/*.js ../MobileFrontend/resources/mobile.modifiedBar/time.js | wc -c

gives 7851.

  • Replace usage of jquery.jStorage with the much smaller and more limited mediawiki.storage

This is a great idea considering all major desktop browsers support localStorage well.

As always, this approach needs consideration.

Definitely.

Are the file sizes you've given in the description uncompressed?

gzip -9 -c resources/**/*.js ../../resources/lib/moment/moment.js | wc -c

gives 28755.

Note ResourceLoader wraps raw JS files in some code and the values reported above are the sizes reported by mw.loader.inspect() so uncompressed.
Note moment gets shipped with moment.js, moment-local-dmy.js, moment-global.js and languageScripts - it's not just moment.js

Krinkle added a subscriber: Krinkle.May 2 2016, 6:40 PM

Change 288658 had a related patch set uploaded (by Jdlrobson):
Replace use of jStorage with mw.storage

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

Jhernandez moved this task from Incoming to Epics/Goals on the Readers-Web-Backlog board.
Jdlrobson renamed this task from Recommendation: Reduce JS bloat of Hovercards to [EPIC] Recommendation: Reduce JS bloat of Hovercards.Jun 14 2016, 7:28 AM
Jdlrobson updated the task description. (Show Details)
Jdlrobson removed a project: Patch-For-Review.
phuedx updated the task description. (Show Details)Feb 23 2017, 6:54 PM
phuedx added a subscriber: Nirzar.Feb 24 2017, 9:29 AM

^ With @Nirzar's guidance, we removed the dependency on the moment RL module in T137775: Popups should not use moment.js for a single line.

phuedx updated the task description. (Show Details)Feb 24 2017, 9:29 AM
phuedx updated the task description. (Show Details)Feb 24 2017, 9:39 AM
phuedx updated the task description. (Show Details)
phuedx renamed this task from [EPIC] Recommendation: Reduce JS bloat of Hovercards to [EPIC] Reduce bloat of Page Previews RL module(s).Feb 24 2017, 9:43 AM
phuedx updated the task description. (Show Details)

Do also bear in mind that mw.inspect reports the byte length of the uncompressed assets. For example, I considered recommending that we defer loading the settings dialog CSS but it compresses to 879 bytes.

phuedx closed this task as Resolved.Feb 24 2017, 9:58 AM
phuedx claimed this task.

💥💥💥