Hi all,
we have gotten lots of reports that it can take very long for MediaViewer to display (unblur) the images (some people mentioned 20-30 second waiting times); our tests and metrics [1], on the other hand, show 1-2 second loading times. We need to find out under what conditions does the application become so slow; if you experience something like that, or know other people who have experienced it, please help us collect more information.
Ideally, we would like to know the following: - how long did it take for the image to load? (time spent between clicking on a thumbnail, and the blurry image becoming sharp) - can you reproduce the slow loading time with other images? (Use images from a different wiki page, so that they are not preloaded) - can you reproduce the slow loading time with same image, after refreshing the page with a clear cach (Ctrl-F5 on most browsers)? - what OS/browser do you use? - what kind of internet connection do you use, what bandwidth does it have?
If you are comfortable with using the network tab on the web console of your browser (F12 on most browsers), and can look at it and tell us in detail which requests took up the majority of the loading time, that would be even more helpful.
You can report the results here or on-wiki at [2].
Thanks in the name of the multimedia team!
[1] http://multimedia-metrics.wmflabs.org/dashboards/mmv#overall_network_perform... [2] https://www.mediawiki.org/wiki/Multimedia/Media_Viewer/Speed_reports
I did some tests on https://www.mediawiki.org/wiki/Lightbox_demo over a slowish mobile connection (1 Mbps downlink). Opening a lightbox takes over 30s with a warm JS cache when you do it immediately on page load (via an URL hashtag). The actual image load takes about 4s; the rest of the time is taken up by all the image thumbnails on the page loading. Since MediaViewer's bootstrap script runs on DOM ready, every single image on the page is queued to load before it; these are small ~200px thumbnails which take a few hundred milliseconds to load, but there are several dozens of them and they add up.
This is probably not what causes most delays, but it can cause delays for specific conditions (there are lots of thumbnails on the page, the user's browser did not cache them yet, and they use an URL hash or click on a thumbnail soon after the page loaded) which are not unplausible (e.g. a MediaViewer URL to an image on a gallery or category page is being shared on twitter). Unfortunately, I have no idea what to do with this one - the issue is not with anything MediaViewer does, and there is no way to influence the order in which the browser loads the images (we could try horrible hacks like loading the image in AJAX, but at best they would help on some browsers only). We could add more logic to the head script to start image preloading immediately, but eww. I suspect we will need a UI solution for this one, which tells the user to expect waiting for a while.
Thanks, Gergo, that is really useful information.
I didn’t realize that opening the lightbox can takes so long, with the actual image load itself being only a fraction of that total load time.
If there’s a better way to load the thumbnails than we are now, I’m in favor of experimenting with it, to see if it solves the issue.
Of course, with all the trade-offs we face, fixing one issue can introduce new ones, so we want to be careful to move methodically on this … :)
Much appreciated,
Fabrice
On Apr 21, 2014, at 11:29 AM, Gergo Tisza gtisza@wikimedia.org wrote:
I did some tests on https://www.mediawiki.org/wiki/Lightbox_demo over a slowish mobile connection (1 Mbps downlink). Opening a lightbox takes over 30s with a warm JS cache when you do it immediately on page load (via an URL hashtag). The actual image load takes about 4s; the rest of the time is taken up by all the image thumbnails on the page loading. Since MediaViewer's bootstrap script runs on DOM ready, every single image on the page is queued to load before it; these are small ~200px thumbnails which take a few hundred milliseconds to load, but there are several dozens of them and they add up.
This is probably not what causes most delays, but it can cause delays for specific conditions (there are lots of thumbnails on the page, the user's browser did not cache them yet, and they use an URL hash or click on a thumbnail soon after the page loaded) which are not unplausible (e.g. a MediaViewer URL to an image on a gallery or category page is being shared on twitter). Unfortunately, I have no idea what to do with this one - the issue is not with anything MediaViewer does, and there is no way to influence the order in which the browser loads the images (we could try horrible hacks like loading the image in AJAX, but at best they would help on some browsers only). We could add more logic to the head script to start image preloading immediately, but eww. I suspect we will need a UI solution for this one, which tells the user to expect waiting for a while. _______________________________________________ Multimedia mailing list Multimedia@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/multimedia
_______________________________
Fabrice Florin Product Manager Wikimedia Foundation
On Mon, Apr 21, 2014 at 1:51 PM, Fabrice Florin fflorin@wikimedia.orgwrote:
If there's a better way to load the thumbnails than we are now, I'm in favor of experimenting with it, to see if it solves the issue.
The thumbnails are present on the page (with or without MediaViewer), the browser is loading them in the normal process of parsing the HTML. As I said, I don't think there is any reasonable way to influence that.
multimedia@lists.wikimedia.org