On Wed, Apr 9, 2014 at 3:03 AM, Gilles Dubuc <gilles@wikimedia.org> wrote:
Since mediawiki.org finally moved to '21, I was able to run the performance tests against production again. We now have a figure for how bad the cold cache experience can be. On an average-sized browser window, the cold cache image load in media viewer takes around 200% of the time it takes for the image to appear on the File: page with a warm cache*. And it takes around 230% of the time for a large browser window. We're talking seconds of difference, that's a long time to wait.
(...)
*the reason why we're not comparing figures with the File: page on a cold cache is that it's an unfair comparison: all of mediawiki's JS and CSS would be cold in that case, whereas for Media Viewer it's only Media Viewer's JS and CSS that is cold.

On the other hand, a cold cache should happen infrequently (about once a week while MultiediaViewer is under active development, about once a month after that). Giving a bad first impression is unfortunate, but the user experience is not impacted that much beyond that, I think.

When we first built mmv.bootstrap (the on-demand loading of JS), we didn't have the click catcher (mmv.head). Now that we do, I think we can afford to sacrifice some user bandwidth and just load Media Viewer's JS with the async attribute (which means it wouldn't block page rendering). And mmv.head would take care of catching and replaying clicks that happened before Media Viewer's JS was loaded.

Doing that means we could get rid of mmv.bootstrap entirely, increase the cold cache performance (chances are, the thumbnails on a given page will take longer to load than Media Viewer's JS and CSS) and simplify our code.

Any objections to doing this?

To clarify, this is the current state:

* mmv.head (~2K*) is top-loaded for every user on every page that contains images, to delay image thumbnail clicks until mmb.bootstrap is loaded
* mmv.bootstrap (~35K with all dependencies) is bottom-loaded for every user on every page that contains images; it handles entry points (URL hash changes, image clicks) and loads the full application when the user requests it
* the full application (around 500K) is only loaded when it is actually needed

This is what you propose:

* mmv.head is still top-loaded for everyone
* everything else is bottom-loaded for everyone, all the time

Do I understand it right?

If so, I think we should consider this again when MediaViewer is enabled by default. Right now mmv.head and mmv.bootstrap is loaded for everyone, even if they did not opt in to the beta feature (or, on a pilot wiki, explicitly disabled the tool), so that we can handle URL hashes (and URLs shared by people who have MediaViewer enabled do not break for everyone else). This is not a big deal when we are just talking about a few kilobytes, but loading all of MultimediaViewer all the time for everyone, even if 99% will never use it, is not worth the performance win, IMO.

Once it is enabled for everyone, we should get some stats on what fraction of the userbase never uses it, and if it is not too large, then we can just load it for everyone (since it would be loaded for almost everyone with the current setup as well, just with a timing that's more inconvenient for the user).


* the sizes are unminified, ungzipped, which is not very useful, but that's what I had at hand.