How to optimize game for html5?

My game is focused for html. How to optimize game for html?

If we are talking about optimising load time then pay attention to your final application size and consider using a CDN.

If we are talking about performance as in FPS it is my experience that you need to pay attention to draw calls a little bit extra. You should also keep an extra eye on script performance since we’re not using LuaJIT in HTML5.

If you’re asking about battery consumption then the same rules as on mobile applies: That is to try to write reactive code that act on events/messages instead of polling for data in update().

2 Likes

Maybe exist some concrete advices?

Are you wanting the game to run well in a mobile browser? If so this is unlikely to happen as Defold is not made for that.

Most of the optimization tips for desktop or mobile games would carry over to HTML5 builds. If you showed a game that was performing badly we could give specific advice on what to improve.


2020 Edit: For anyone searching and finding this there is now an easy way to take full screen browser window.

Edit game.project under then select an appropriate scale mode and disable the fullscreen/made with defold checkboxes when appropriate for your project.

1 Like

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

Your previous answer was concrete and good. But i am novice defold programmer and i want more detailed and structured information.
P.S. This answer gave me more useful information.

1 Like