How We Made Cannon Clash Load Fast and Boosted Conversion

At Elanra Studios, we recently launched Cannon Clash on Poki (play it here!)— a hyper-casual action game where players engage in pirate battles on a vibrant tropical island. Built with WebGL and PlayCanvas, the game offers quick, accessible gameplay for web audiences.

With Cannon Clash, we applied lessons from our previous Poki titles — SimplyUp.io, ColorUp, and Simply Prop Hunt — and leveraged during development Poki’s latest features, like Playtests and Web Fit Tests.

In this article, we’ll share how we optimized Cannon Clash for fast loading to boost player conversion and make gameplay even smoother.

What is Conversion to Play?

Conversion to play measures the percentage of users who, after opening the game page, actually start playing. On platforms like Poki, this begins the moment a player interacts with the game — whether clicking a button or moving their avatar. On the web, especially on Poki, quick loading is critical. Users expect games to load almost instantly; otherwise, they might lose interest and try a different game instead.

Generally, a conversion rate above 70% is solid, and anything above 80% is exceptional. Conversion can also vary across devices: mobile users often expect faster load times due to limited data and screen constraints, while desktop players may be more patient. By understanding these variations, developers can optimize for the best experience across all devices.

Key Factors Affecting Web Game Loading Time

Unlike mobile or native games, which are installed in advance, web games load in real time, starting only when the player hits “play.” This means that every moment a player waits is critical to engagement, as a long load time can discourage users before they even start. Here are the main processes that happen during loading:

1. Downloading Game Resources: All assets — including code, 3D models, textures, sprites, and audio — must be downloaded initially. Compressing these resources is essential to speed up this step, especially for players on slower internet connections.
2. Executing Code: The game’s JavaScript code is interpreted at runtime, and large codebases naturally require more time to load and execute. Players on older or slower devices with underpowered CPUs may experience increased code execution times.
3. Uploading Resources to Memory: The game engine then allocates assets to memory (RAM and VRAM), readying them for use.
4. Game Preparation: Finally, the engine prepares the game scene by compiling shaders, setting up colliders, and structuring the scene hierarchy, making sure everything is ready for play. Depending on the scene complexity this step can take significant time.

All these processes work together to get the game from “loading” to “playing” as quickly as possible.

We’ll take a closer look at each factor and explain how we approached loading time optimization in Cannon Clash.

Optimizing: Downloading Game Resources

File size is one of the most important factors affecting load time, especially for web games where every megabyte counts. In Cannon Clash, we focused on compressing the primary game resources to make the initial load as fast as possible. Here’s how we tackled optimization for each type of resource:

1. 3D Models: Our 3D models were a significant portion of the game’s file size, so we used Draco compression to shrink them by nearly 10 times. For example, our .GLB model files, initially 3.88 MB, were reduced to just 387 KB after compression. With PlayCanvas, this process was straightforward — imported .GLB files can be compressed automatically, and a WebAssembly (WASM) module decompresses the models at runtime with minimal overhead. The time saved by smaller download sizes far outweighs the slight increase in processing time for decompression in most scenarios.
2. Textures: In Cannon Clash, texture file size was another key area for optimization. We used Basis compression to minimize the file sizes, not only to reduce video memory but also to significantly cut download times. For instance, our ship explosion spritesheet went from 406 KB down to 46.3 KB with Basis compression. With only a handful of textures, this change made a substantial difference.
3. Audio: With many sound effects in Cannon Clash, audio file size could easily add up. We opted for MP3 compression and adjusted bitrates through trial and error in Audacity to strike the best balance between acceptable sound quality and file size.

Beyond file size, the number of files also impacts load times. Browsers download files in batches, so more unique files mean slower loading. To address this:

1. We batched 3D models into a single .GLB container file. When imported into PlayCanvas, each model is easily converted to individual render assets that we could use in the scene, simplifying both design and loading.
2. We created a single sprite sheet for all UI graphics using Texture Packer and then compressed it with Basis, minimizing the number of separate files needed.

Finally, not all assets need to be loaded before gameplay begins. Asynchronous loading allows for faster initial load times by only downloading critical assets upfront. In Cannon Clash, we made sure only essential files were loaded initially, while remaining assets were fetched in the background once the game started. This approach let us balance a smooth initial load with a full-featured experience once players were engaged.

Some other tips that are common practice for web games and can reduce download time:

1. Enable gZip and/or Brotli compression on the server when hosting your game (if you are hosting on Poki that’s being taken care automatically). These compressions can further reduce download sizes, helping assets transfer even faster and enhancing the game’s load speed for players.
2. Concatenate (combines multiple scripts to a single one, reduces http requests) and minify (makes your final code ugly but also reduces the file size) your game code. PlayCanvas will do both steps by default when building your game.

Optimizing: Code Execution

Optimizing code execution is generally straightforward, but there are a few key practices to ensure efficient loading. First, it’s important to only ship the code that’s absolutely necessary for your game. Avoid using bloated, large external libraries unless they’re essential, as unnecessary code increases load time. Even if unused, libraries or scripts included on the page will still be parsed by the browser, which adds to the load time.

In Cannon Clash, we utilized systems from our Solar Tools SDK — a custom set of systems we developed to extend PlayCanvas. To keep the codebase lean, we carefully excluded any scripts from the SDK that weren’t in use by the game. PlayCanvas makes this easy with an Exclude property for assets: by setting this property to “true” on any asset, we can prevent it from being included in the exported build, even if it’s present in the asset list in the editor. This allowed us to streamline our code without sacrificing functionality.

Optimizing: Game Preparation

Once the essential game resources are downloaded and the code is parsed, the game engine begins preparing the game to start. In PlayCanvas, this preparation starts by parsing the main scene from a scene JSON file, adding necessary entities to the scene hierarchy. This process can be time-consuming if the scene contains thousands of entities, but in Cannon Clash, we kept the base scene simple. Most entities, like ships, collectables, and particles, are spawned dynamically at runtime, which helps streamline initial loading.

Shader compilation occurs as soon as the first models are rendered, which can temporarily cause the game to lag or become unresponsive. To prevent this from disrupting gameplay, a good practice is to render all game models and materials at least once during the first frame, ensuring shader compilation is completed early. While asynchronous shader compilation support is on the way for mainstream browsers and PlayCanvas, for now, reducing the number of unique materials with varying parameters can help minimize shader compilation time.

We also optimized mesh colliders for physics by creating simplified custom colliders in Blender with a reduced polygon count. This approach not only improves runtime performance but also shortens the time required for collider generation.

Lastly, we ensured that no other significant operations took place during entity initialization, keeping the loading time as short as possible for a smoother player experience.

Optimizing: Loading Screen

While reducing build size is crucial, we can’t control the speed of every player’s internet connection. In many parts of the world, high-speed connections aren’t always accessible, meaning some players may still face extended loading times. To keep players engaged during this wait, it’s essential to provide a clear progress bar so they know the game is actively loading and their browser isn’t stuck.

Additionally, a visually appealing, interactive loading screen can help capture their attention and build anticipation. In Cannon Clash, we crafted a loading screen that aligns with the game’s theme, setting the mood early and making the wait more enjoyable. This way, even if the load time is longer, players stay interested and are ready to dive in once the game starts.

Beyond Loading Time: Onboarding and First Impressions Matter

Through our experience with our previous Poki games, we’ve learned that getting players to engage with the game as early as possible greatly boosts conversion rates.

Optimizing loading time is critical, but it’s only part of the equation for achieving high conversion to play. Equally important are player onboarding and first game impressions — these are the moments that convince players to stay and engage with your game.

Unlike mobile or native games, where players invest time to download and install, web games are just one click away from being “uninstalled.” A seamless start and engaging introduction are vital to prevent players from moving on to the next game.

The Poki Easy Access guide offers valuable insights to maximize player retention right from the start:

1. Skip the Menu: Get players straight into the game without a start menu. Having them dive directly into gameplay minimizes friction and lets them experience the action immediately.
2. In-Game Tutorial: Introduce an interactive tutorial level that lets players learn the controls and mechanics through experience rather than text-heavy instructions. Use non-blocking visuals or small icons to highlight important actions or keys, allowing players to get comfortable without interrupting gameplay.
3. Balance Challenge and Difficulty: Provide a safe beginner area where players can experiment and build confidence. This initial balance of challenge allows players to understand the game mechanics without frustration, making them more likely to keep playing.

By focusing on onboarding and early gameplay experience, you create an inviting start that, combined with fast loading, leads to a stronger conversion and lasting engagement.

In Cannon Clash, we introduce new game systems gradually, wave by wave, to avoid overwhelming the player with too many choices at once.

The player jumps straight into action, there is no initial menu, positioned right behind the cannon and ready to fire. As the player progresses, additional game systems are introduced through brief bubble tutorials.

Originally, we had a brief introductory animation to set up the story, but Poki Playtests showed that players were eager to dive into gameplay right away. To keep the momentum high, we removed the animation and instead added story bubbles on the in-game towers. These bubbles convey the game’s background without pausing or interrupting gameplay, letting players engage with the story organically while still immersed in the action.

Conclusion

By implementing these optimization practices, we brought Cannon Clash down to a lean 2.4 MB download size with only 76 requests. Our efforts paid off in the Poki Web Fit test, where we achieved an impressive 81% conversion to play — a result we’re incredibly proud of. With the support of the Poki team, we recently launched Cannon Clash globally, and it’s already showing promising engagement.

Creating a fast-loading, immersive web game isn’t easy, but with thoughtful planning and the right optimizations, it’s absolutely achievable. We hope our experience with Cannon Clash offers helpful insights for other developers aiming to boost engagement and conversion. Here’s to more fast, fun, and seamless gaming on the web!

Written by Leonidas Maliokas