How to optimize game for html5?

I thought my answers were pretty concrete. But I’ll elaborate a bit more then:

Final application size
You must pay attention to the size of your application (you should always do this, but it is extra important for HTML5 games). In many countries internet connections are slow. A 100 MB application will take minutes to load. User @AGulev has pointed out that many HTML5 game portals have very strict limitations on initial download size.

Using a CDN
If you use a CDN the download speed may improve since the content is downloaded from somewhere close to the user instead of from halfway around the world.

Draw calls
I participated in Ludum Dare 35 and I noticed bad FPS on HTML5. I had a lot of tinted sprites and that increased the number of draw calls significantly, and once I removed those and got down to a handful drawcalls performance improved drastically,

Script performance
We use slow vanilla Lua 5.1 on HTML5 builds. Not the super fast LuaJIT that you see on mobile and desktop builds. This is an important thing since LuaJIT can be several magnitudes faster in some circumstances. This means that you should pay extra attention to how your code is structured. If you can avoid putting a lot of code in update() functions and instead use reactive programming then that is preferred. Once example of this would be to animate with go.animate() instead of animating in update() using delta time.

Battery performance
A lot of focus has been given to the energy consumption of modern browsers. Most recently Microsoft Edge vs Chrome and Firefox. You should also keep this in mind when you create your browser game. The less CPU your game uses the less power it will use. This means that you should keep an eye on the profiler and the amount of time each frame of your game takes to process.

4 Likes