Reduce Screen Loading Time

Sometimes you may encounter a situation where there are visible delays when transitioning to a screen for the first time, but no delays when transitioning for any subsequent time after that.

Usually this is because the screen contains a large resource footprint. Large images and/or several fonts that may need to be loaded.

So how do we remove this delay when loading these resources? Well, realistically without modifying the resources themselves there is no way to load them “faster” than they already are.

However, we can simply change when we load the resources to create a smoother user experience.

Take a look at the following performance log entry:

This is displaying the metrics of a screen transition to a screen that contains a large image.
Here we can see that it’s taking 64.9ms to perform this screen transition due to the loading of said image.

This is where gre.load_resource() comes in. This function forces the loading of an image or font resource into the app.

On startup, let’s call a function which will use gre.load_resource() to force load the image.
For example:

function cb_load_resources(mapargs)
  gre.load_resource("image", "images/Background.svg")
end

Now let’s capture a new performance log and see what the results are:

As we can see it’s now a much faster speed of 6.37ms. 

Though, again remember that all we have done is moved that initial long load time to the startup of the application. This can be easily seen if we take a look at the gre.init times recorded in both perflogs.

Without gre.load_resource():


With gre.load_resource():


So you can see that we still have to pay the loading time price, but if we move it to the startup, it’s overall a much better user experience.