I have been playing a web boardgame called Empires at GamesByEmail.com recently. It runs fine under Windows, but is unusably slow on Linux.
I asked the developer why. He uses Linux, but he does not know. He suspects there are too many DOM elements, but he does not know what to do about fixing the problem.
It’s slow both in Firefox and Google Chrome, so it does not seem to be a browser issue.
I was testing my own site with Firebug and the Page Speed extension, so I thought I’d try it on GamesByEmail. The results are up at ShowSlow. It is actually quite fast from a conventional web development point of view – it’s just broken on Linux.
Please can all you skilled Linux devs check out the game and give us some clues?
@Hogan & @CasualCoder, there’s been some discussion in the back-channels along exactly the lines you mention: That performance suffers as the game progresses due to the large size images used for coloured overlays.
The game uses:
=350 IMG tags.
At the start of the game, the 92 Coloured overlays are 1×1 pixel blank images. The highlights are 1 image per territory, mostly transparent, matching the size of the board, but usually only 1 is visible.
As the game progresses, the overlay images are replaced by images which show a single territory in red or blue etc. depending on which player owns it. These coloured overlays are the same size as the board, although mostly transparent. At the time we figured these images would render as fast as smaller cropped images (and this seemed to be the case in some of the older IE browsers in windows).
But, based on some other test result feedback I’ve gotten there seems to be a lot of support that these 947×622 sized overlays are the problem; combined with whichever highlight images are also visible.
This is a worst case of up to 92 visible IMGs for conquered territories, plus maybe a dozen or so IMGs being pulsed for current empire = 105 947×622(boardsize) stacked images. The concern is that this is causing the extreme slowdowns when moving the mouse around in Linux and Mac browsers.
I edited my gimp scripts to instead generate the highlights and overlays as tightly cropped as possible, and output offset X and Y data to text file (which I then pasted into the code and use to position the new images relative to top-left corner of board).
The new implementation seems to be performing better here in my dev environment (am hoping I’m not being too faked out by localhost here). As soon as I can get it online and tested some more I’ll update the comment here.
Thanks again for the feedback guys, I’m hoping the new cropped graphics address the problem.
Troy
Edit: The latest cropped images code for Empires is now online. Just awaiting more general feedback, but so far it seems to feel much more responsive in both Windows FF and Ubuntu FF! Thanks again for the help everyone 🙂