Loading Optimisation

Overview

Oooh is all about short-form video and experiences, so it’s essential that your module’s loading time doesn’t lag behind. We expect that your module is loaded and ready to be shown to the user within 3 seconds, with a snappy user experience throughout. In this guide, we’ll show you three techniques you can use in your module to make load times lightning-fast. ⚡

Progressive loading

Let’s get started by taking a look at how to load assets in your module. We expect all modules to use a progressive loading technique. That means you should load everything you need to show the first screen first.

Once your splash screen is loaded and shown to the player, you can preload the rest of your module’s assets in the background. Think of this like each screen having its own bundle of assets - we want each bundle to be loaded in order, and as quickly as possible.

• When you're making lots of asynchronous calls which don't depend on each other, you should load them in parallel using Promise.all()
  • This is perfect for loading the image assets for each screen, or making API calls which take some time to run
• You can start some API calls - such as creating layouts, loading input assets and getting the leaderboard - before your module shows its first screen to save on load times
  • However, these methods can take up to 3 seconds to run, so you should never wait for them to finish loading before the first screen is shown

Check out our pre-loading recipe for sample code to create a PreloadList class to pre-load HTTP calls and asynchronous function calls.

Optimise your assets

Next, let’s think about what you’re loading in your module. Both large file sizes and requesting too many assets at once can slow your module down. The images and sounds used in your module can be compressed or grouped into sprite-sheets (or both!).

• You can make huge reductions in file size by compressing the image assets used in your module
  • For images without transparency, consider using a lossy format such as JPEG instead of a lossless format like PNG
  • Using modern image formats like WEBP can help you achieve even smaller file sizes
  • Try using Squoosh to see how you can compress your images without visibly compromising on quality
• In games, you can group together individual images into sprite-sheets to reduce the number of requests you make
  • Keep in mind: sprite-sheets should not contain the entire game in them, and they should instead be split up by each screen in your module
  • You can significantly reduce the file size of PNG spritesheets in your game using TinyPNG
• Watch out for unusually large assets in your module - for example, a one-second sound should not be near 1MB in size

Lazy loading

Finally, consider when you should be loading assets in your module. ICYMI, you should almost always preload everything, but this doesn’t come without its trade-offs. For example, preloading lots of videos at once can have a significant impact on memory and crash your module.

If your module uses videos played on-demand, we recommend you use lazy-loading to only start loading the videos when they’re needed. A quick trick you can use to make loading feel smoother is pre-loading a thumbnail to show over a video while it loads.

Testing load times

To test your module's load times, you can setup a Network Link Conditioner tool on your device to throttle your connection speed.

• iOS: Enable the Network Link Conditioner tool using Xcode
• Android: Install the Throttly app from the Google Play Store

We expect modules to load and show their splash screen within 3 seconds on an LTE network. You can use the LTE preset in the Network Link Conditioner tool on iOS, or setup a new network profile with the following specs on Android.

• In Bandwidth: 50000Kbps
• Out Bandwidth: 10000Kbps
• Latency: 50ms

In the SDK app, you can select Delayed Load to add a 5-second delay before your module starts loading. This gives you time to connect and open the Network inspector.

Conclusion

There's lots to consider when optimising your module's loading time, but we hope this is a great place for you to start considering the how, what and when of loading assets and API calls in your module.

📘

Need help with loading optimisation?

If you have any questions about following this guide, or would like a hand with investigating load times in your module, we'd be happy to help. Get in touch!