Flow JS loading / deferred loading is very slow
Closed, ResolvedPublic

Tokens
"The World Burns" token, awarded by thiemowmde."The World Burns" token, awarded by Josve05a."The World Burns" token, awarded by Tarrow."The World Burns" token, awarded by Sigma."The World Burns" token, awarded by ashley."The World Burns" token, awarded by Addshore.
Assigned To
Authored By
Paladox, Aug 7 2015

Description

Flow seems to do some sort of deferred JS loading, and it is slow :/

When you go to a page with flow on it for example https://www.mediawiki.org/wiki/Extension_talk:TimedMediaHandler it takes a few seconds to load the site.
This does not only happen on the main flow page but also pages such as history https://www.mediawiki.org/w/index.php?title=Extension_talk:TimedMediaHandler&action=history

While this loading is happening a user can not interact with the page.
In the case of the history page as an example this JS loading doesn't even seem to change the page content, so why, just why, is it there and why does it take so long?

Timings

https://www.mediawiki.org/wiki/Extension_talk:TimedMediaHandler
0.00s start
2.47s main html loaded
5.50s flow content is usable

https://www.mediawiki.org/w/index.php?title=Extension_talk:TimedMediaHandler&action=history
0.00s start
3.81s main html loaded
5.64s flow content is usable

Paladox created this task.Aug 7 2015, 12:43 PM
Paladox updated the task description. (Show Details)
Paladox raised the priority of this task from to Needs Triage.
Paladox added a project: StructuredDiscussions.
Paladox added subscribers: Paladox, Mattflaschen-WMF.
Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptAug 7 2015, 12:43 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Addshore renamed this task from Flow is very slow loading a page to Flow JS loading / defered loading is very slow.Aug 11 2015, 4:59 PM
Addshore updated the task description. (Show Details)
Addshore set Security to None.
Addshore awarded a token.

Right now I would honestly prefer to view all flow pages without JS. All of the functionality is still present (even if it does load separate pages) but this initial lazy / client side loading does not happen.

Addshore updated the task description. (Show Details)Aug 11 2015, 5:09 PM
ashley awarded a token.
ashley added a subscriber: ashley.
Sigma awarded a token.Aug 11 2015, 6:13 PM

It's loaded in the bottom queue (similar to a lot of features), but it is not deferred. The point of the overlay is to prevent JS users from using the no-JS view accidentally.

@Krinkle: Would it make sense to load Flow JS in the top queue, so the browser doesn't first parse all the HTML, then fire the request for Flow JS? Or is that not how it works. In the post-async-RL world I don't know what top and bottom queue even mean any more.

Catrope triaged this task as High priority.Aug 12 2015, 11:53 PM

One improvement here for the history pages could be rather than grey out / disable the whole page only disable / grey out the few links that the JS would be altering here?

One improvement here for the history pages could be rather than grey out / disable the whole page only disable / grey out the few links that the JS would be altering here?

+1, especially on things like history pages. (Where for example, I expect navpopups to not work, until the page has fully loaded)

Mattflaschen-WMF renamed this task from Flow JS loading / defered loading is very slow to Flow JS loading / deferred loading is very slow.Sep 16 2015, 11:19 PM
Krinkle removed a subscriber: Krinkle.Sep 17 2015, 5:51 AM

Change 243037 had a related patch set uploaded (by Mooeypoo):
[proof of concept] Selectively disable nojs pieces when loading Flow

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

I did a little bit of experimentation, with page loading times. Here's very rough numbers:


Testing time-to-fully-load in seconds, from ctrl-F5, whilst logged-in:
History page at https://fa.wikipedia.org/w/index.php?title=%D8%A8%D8%AD%D8%AB_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1:Ladsgroup&action=history

  • 6, 2, 9, 8, 5, 5, 6, 5, 4, 6, 2, 5, 4

"Start a new topic" VE edit-window at https://fa.wikipedia.org/wiki/%D8%A8%D8%AD%D8%AB_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1:Ladsgroup

  • 6, 2, 9, 2, 2, 1, 6, 2, 2, 1, 3

History page at https://www.mediawiki.org/w/index.php?title=Talk:Sandbox&action=history

  • 5, 3, 2, 4, 4, 6, 6, 7, 5

"Start a new topic" VE edit-window at https://www.mediawiki.org/wiki/Talk:Sandbox

  • 4, 2, 3, 3, 2, 2, 4, 2

Very rarely, and not during these tests, and not ever reproducibly, I experience exceptionally long page-load times. Circa 17 seconds.


Versus, loading a wikitext page (eg https://www.mediawiki.org/wiki/MediaWiki ) which typically takes 2-4 seconds.

Change 244372 had a related patch set uploaded (by Mooeypoo):
Load ext.flow as module => 'top'

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

Change 244372 merged by jenkins-bot:
Load ext.flow as module => 'top'

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

Change 244824 had a related patch set uploaded (by Mooeypoo):
Lazy load the ReplyWidget editor

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

Etonkovidova added a subscriber: Etonkovidova.EditedOct 9 2015, 11:50 PM

In ms

LoadingScriptingRenderingPaintingOther
Extension talk:TimedMediaHandler41.3241176.7184.16535.298188.907
betalabs Talk67.1761216.7261.58157.698257.339
Extension talk:TimedMediaHandler-history56.474822.207167.29457.519169.324
betalabs -history32.782 707.09895.58253.456254.159

Note: compare after deploy.

Change 244824 merged by jenkins-bot:
Lazy load the ReplyWidget editor

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

Prior to the ReplyWidget change, I measured the document ready handler in flow-initialize.js taking about 1800ms. After this change it's about 800ms.

I get important feedback from sv.wp, fr.wp and zh.wp, where people have seen notable slowdowns during the past days. I hope this change will solve it :)

Checked in betalabs - DOMLoadEvent(and Load) - averages - seem to be lower than before:

DOMLoadEventLoad
Extension talk:TimedMediaHandler2.01 s2.6 s
betalabs Talk3.14 s4.3 s
Extension talk:TimedMediaHandler-history3.21 s3.77 s
betalabs - history4.23 s5.19 s *

*depends on History page length

Catrope closed this task as Resolved.Nov 22 2015, 11:16 PM

Change 243037 abandoned by Mooeypoo:
[proof of concept] Selectively disable nojs pieces when loading Flow

Reason:
Experimental; No longer relevant.

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

I would just like to revisit this ticket an hand a big thanks to everyone that worked on speeding Flow up.
In particular the issue I had with JS loading blocking all interaction with a page is now gone!
Now I can interact with a Flow history page as soon is it initially loads!
Wooo!

.▀█▀.█▄█.█▀█.█▄.█.█▄▀ █▄█.█▀█.█─█
─.█.─█▀█.█▀█.█.▀█.█▀▄ ─█.─█▄█.█▄█

:)