Everyone wins when games load fast. Developers get more money, conversion and audiences. Players have a dynamic, dynamite and fun game experience. There are lots of scary stats, like how a one second delay in a site’s loading time can induce a 7% downturn in conversions and an 11% drop in page views.
When we first got Galaxy Force it was taking 32 seconds to load. Here’s how we got it to four seconds.
IMAGE COMPRESSION:
For the developer of Galaxy Force the game’s graphics were a crucial element to the player experience. However, his images were huge and caused severe loading issues when we first tried to publish it.
For many developers meta data is the culprit of oversized images. Some people fear compressing images will be a quality killer and drive players away. But, using easy compression tools will ensure developers won’t impact a game’s look and feel.
This was the case with Galaxy Force. A great tip for developers is to use tools like TinyPNG and Kraken i.o to strip unnecessary meta data from their images. They are free and easy to use.
All a developer needs to do is:
- Go to www.tinypng.com. Drag and drop PNG images to the box on the home page. It’s easy and depending on the number of images, the meta data will be stripped from images in a few minutes.
- Go to https://kraken.io/ and follow the same procedure for all non PNG images.
- We followed the above steps with Galaxy Force. We further shrunk it’s file size with Google’s new image format, WebP. There is a simple and advanced version of WebP. The simple version works just like TinyPNG. For the advanced version you have to install a tool on your computer and then use the command line. It’s worth knowing that WebP isn’t supported by every browser so be sure to run a feature detection first.
STACKING ASSETS:
The developer of Galaxy Force designed the game with 18 levels. He programmed it so that the assets for all levels loaded before the player even started playing. This used up loads of bandwidth and caused a major drag on loading time.
We optimized the game by pre-fetching the assets from Level 2 while Level 1 is being played. We followed this approach for all the levels. Doing this retroactively isn’t ideal as it has to be done manually. Everyone wins if each scene (or level) has its own asset loader instance when the game is first put together.
These optimizations won’t be the case for every game. But, they are also work arounds for slow loading times caused by mobile internet speeds or broadband in countries like Brazil.
Check the below video to see an example of the before and after loading times. By the way the site we used for that video is a handy way to analyze how a web page loads. It can tell you which elements are slowing a site down.
What your findings with optimization? And, if you’ve tried the above let us know how you get on!
consider to use audio sprites to minimize the amount of audio files
Great suggestion and thanks for your comment! Here is a blog post that lists the pro’s and con’s of this. http://blog.createjs.com/audio-sprite-support-in-soundjs/