10

I have created a cordova app using ionic, When i open my app from coldstart,

It first loads the splash screen, then there are a few seconds when the screen is white as my index.html file loads and then the app UI is loaded and displayed. This takes approximately 10 seconds on a Moto X which is too long since my app contains features in which speed is of the essence.

There is no network request that takes place during the loading from coldstart.

Is there any optimization techniques that can decrease the loading time to make the app load as fast as other hybrid apps like gmail.

Akil
  • 719
  • 13
  • 23
  • Have you looked at image optimisation, bundling and minification? 1 reduces the file size of images, 2 combines multiple files into 1 eg all .css or all .js This improves performance as fewer separate network requests are required and there are limits on concurrent downloads, Finally minification strips out comments and white space and line breaks from your .js – Mike Jun 18 '16 at 10:54

2 Answers2

14

There is a lot of information about this topic, I'll try to list some that might be of interest. About Cordova startup time:

  • Kerri Shotts, the author of PhoneGap for Enterprise gave quite a good answer here on a similar question. Although it's already ~2 years old, the points mentioned still apply. Kerri is touching a vital issue here: You don't have 100% control over the load time, keep that in mind!
  • Christophe Coenraets has got some slides about this topic with some general tips and concrete examples.
  • (Microsoft's tips on Cordova performance can be found here. Sadly there's no info on startup times, so I'll put it in braces.)

Ionic is built on top of Angular, so let's also take a look at it. About Angular startup time:

  • I've got two links here: In the end, it boils down to measuring your performance and act on whatever causes your app to start slowly. See examples here and here.
  • Another thing to watch out for is ng-cloak. You didn't mention if you use it, but applying it to your whole body might be dangerous.

Note: This list is far from complete, feel free to comment or add stuff.

Phonolog
  • 6,321
  • 3
  • 36
  • 64
2

Building with the production flag will minify and compress all of Ionic's outputs, as well as removing any unnecessary outputs and logging that are used for development.

ionic build --prod

"This will minify your app’s code as Ionic’s source and also remove any debugging capabilities from the APK. This is generally used when deploying an app to the Google Play Store." -Ionic Documentation Also applicable to any other deployment platform.

It will take longer to build but you'll have a much faster cold start time.

You can also specify the production flag when building to a certain platform.

ionic build [platform] --prod
John Denver
  • 362
  • 1
  • 12