This week we launched an alpha of our HTML5 slot machine game on Facebook and we ran into our first performance and scaling issues. Our first batch of users were complaining about the game loading slow and sometimes not loading at all. Not good news when you only have a couple dozen people playing.
In this case, our scaling and performance issues were partially technical and partially perceptual. This blog post is about the perceptual and the technical changes we made to improve loading performance.
While images, sounds and code were loading we would show this loading bar. It is an animated gif file, and it basically just goes forever.
It sucks from a usability perspective. The only excuses I have are that I was lazy and I wanted to see if it really mattered to users. It did. So with a bit more effort and more code we replaced it with this.
This is a lot better.
We’re gonna get real geeky now. The TL;DR is that we squashed all of our JavaScript into a single file and sent it compressed to the user. What this does is reduce the number of trips over the Internet that the browser has to ask for stuff. These round trips take a long time and quickly add up to seconds. By combining all of our code into a single file the browser can make one trip for what it needs.
First we have to address the challenges that are introduced by CoffeeScript and require.js. The two tools we
This is how we do it.
First we use CoffeeScript and require.js. CoffeeScript is a language that compiles to JavaScript. We love it because we find it more productive than JS and lets us do cool things like list comprehensions. The second tool, require.js lets us organize our application into modules.
You must be logged in to post a comment.