Your online social casino games portal for free play slots, casino bonuses and gaming news.
LoginCreate an Account

Making HTML5 Games Fast

November 29 admin

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.

First the perceptual change.

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.

  1. Progress bars are more informative and they remove much of the uncertainty. User’s don’t have to second guess if it is working or stalled.
  2. It has an informative message at the bottom that updates at different loading stages. The benefits are two fold. First information for the user. Second information to help improve customer support. It is much easier to pinpoint problems when a customer says it is stuck at “Loading Music” compared to “It’s just stuck…”
However, we already have plans to make it even better.
  1. Make the progress bar more granular. Rather than jumping from 10% to 25% to 45%, it will increase by single percentage points. More granularity provides more frequent updates and activity which further reduce uncertainty that loading has stalled.
  2. Have it detect load failures and timeouts. If something failed to load or is taking too long, it should give feedback and even ask the user to perform an action like refresh your browser or go grab a cookie.
The downside of course is more complexity and more code.

Now the technical change.

When you load up a web page, what you do…When you load up a web page

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.



Leave a Reply

You must be logged in to post a comment.

Copyright 2013-2014 Lucky Lady Games - All Rights Reserved.
Facebook twitter Blog Linkedin youtube