Ionic 2 speed up boot time?

Ionic Framework ionic-v3
61

Hi guys,

I just wanted to post an update on this.

We’re getting close to launch date for our app and I am getting more focused on performance though haven’t been able to spend much time on it.

For demo purposes for the client I created a video comparing our apps boot time with Tinder. We’re creating a dating app so it seems relevant to compare the app to the most popular app of our target market.

I was expecting to find Tinder boot times of around 3 seconds and our own app I knew took 10. However the results were surprising. Both apps have a ten second cold boot time and warm boot is also identical at almost instantaneous.

There might be something wrong in my reasoning on this one or factors that I’m not aware of, if so I’d love to get some feedback.

Also, I don’t want to settle for 10 seconds so will look at ways to improve this and also will be creating a splash screen which will give user’s feedback and improve UX.

Here’s the video. I just did basic editing so it ends abruptly at the end of each load.

62

Actually I think that the tinder app is specialy slow at boot up.

When you compare it with other famous app like, facebook, instagram, airbnb, twitter etc., tinder is stighly slower than all of these at boot time. At leat on my Nexus 5X.

63

Probably, it definitely feels slow compared to other apps for me too

Thanks for the feedback on the Nexus 5X too

I don’t suppose Tinder is built with Cordova or something similar?

I think a take away from this is that slow boot time doesn’t necessarily equate to a bad user experience, it depends on your user’s expectations.

64

Don’t know about Tinder. Once read that the Instagram app is an hybrid app (but that should had been before the Facebook takeover).

Well, with a >10sec boot time, which is also my case, in my point of view, you could except a high rate of non acceptation (or rejection) from the users.

That’s why I’m really looking forward the next Ionic version which will include AoT. Maybe I’ve got too much face in it but that’s gonna be a good start at least.

65

think so too and what @luchillo17 showed earlier about all the packages that are included that aren’t being used opens up the possibility of streamlining the build

66

all the packages that are included that aren’t being used opens up the possibility of streamlining the build

This should be MUST for next build setup ( I guess it will be - WebPack + AoT) as it will drastically reduce built file size and affect interpretation time.

I’ve played with all possible scenarios but without success of improving boot up time.

As I can see Ionic team is kinda busy with PWA support delivery so I’ll not expect that they will invest development effort on this in coming weeks :frowning:

67

About the packages that are included but not used, i think the main technic to drop bundle size will be Three Shaking, minification and UglifyJS, the last one also drop a whole lot of unreachable code.

Also i think the slow boot time is mainly caused by Cordova and its Plugins instead of Angular 2 or bundle size, if they’re going to speed up something shouldn’t they start with Cordova configs and optimization or something?

I’ve tested my load time with my bundle size around 4 Mb and with Three Shaking and UglifyJS i got it to 1.9 Mb, and the boot time difference was not perceivable, so i definitely think the boot time is Cordovas fault, or maybe it’s plugin, XWalk adds like 35 Mb to the final APK, and if you use 1 bundle for both ARM and X86 architectures it adds the double, 70Mb to final APK size, so i think that’s where the slow part lies right now, don’t you think?.

68

I think you’re right, currently without any minification or optimisaton on the build and our boot times are about the same.

There are probably so many factors at play here it will take a bit of work to pinpoint the bottleneck.

Hopefully my client will pay me for an extra week or two of work to figure it out :slight_smile:

1 Like
69

Angular2 is finally released so i believe now just wait few(?) weeks for Ionic team to catch up and it should be better.

70

That’s right!

“With ahead-of-time compilation and built-in lazy loading, we’ve made sure that you can deploy the fastest, smallest applications applications across the browser, desktop, and mobile environments.”
Google's Angular 2 JavaScript framework finally arrives | InfoWorld

Let’s wait!

71

Do you really think AoT will make that big of an impact? say at start i made a blank app, that is already at ~6 sec boot time, say AoT speed up 1 sec (which is huge, don’t get me wrong), there’s still ~5 sec that doesn’t account to the JS execution time nor bundle size, those 5 sec base time come from Cordova and Cordova Plugins, if we don’t optimize Cordova then the minimum boot time will be 4~5 sec.

At least that’s how i look at it, right now my BIG app take ~10 sec to boot, AoT probably will speed up to 6~7 sec taking in account the JS code ammount involved, however 6 sec is still a lot of time, for the user that boot time will be a detriment, and depending on the purpose of the app it could be the difference between 100 users or 100,000 users, we know slow apps lose users, in today world with so many native apps speed is key to get and hold as many users as we can.

1 Like
72

This is a workaround for issue with the white screen:

  1. I am using splash screen cordova plugin.

  2. In config.xml file I have set:

    preference name="SplashScreenDelay" value="20000"
preference name="SplashShowOnlyFirstTime" value="false" 
preference name="AutoHideSplashScreen" value="false"

  3. In platform.ready() I have:

import { Splashscreen } from 'ionic-native';
// ...
    setTimeout(() => {
        Splashscreen.hide();
    }, 1000);
// ...

This just shows the splash screen until you hide it in platform.ready().

Hope it helps somebody.

8 Likes
73

thanks man, appreciated

74

Very good! Work fine for me.

75

I upgraded one of our largest projects to RC 0 and AoT Compiler. On our Nexus 4 it need 12 seconds till the app booted.
Same as before. The in app navigation is a bit better than before. Did i forgot something?

How is the android performance to you?

76

For me boot time dropped from 11 to 6 secs on moto e.

77

I have the same feeling about the cordova slow boot problem. It is easy to test it though. Remove all extra cordova plugins and record the boot time, then compare with the normal boot time, in that way you will get some idea.

What it bug me is that, my app will load ALL cordova plugin in the boot time at once, but my app only need the basic + gps plugin in my first page, excluding the function registration process for cordova plugins. I wish we can choose which plugin we load the boot time and load the remaining plugin async in the background.

BTW, we cannot always blaming cordova for the slow boot time problem. Bear in mind is that starting an ionic app means starting the browser, loading all cordova plugins, loading ionic bundle and all your code. Unless we can optimize in the system level (per-loading web browser, cordova plugins), boot time will be slow.

The ideal solution (not necessary practical in the next year) is per-loading web browser, cordova plugins by the OS, if users open any ionic app, the web browser just spanning a new tab instead of starting the whole browser, cloning a copy from the cordova plugins instance, instead of loading cordova again. Of course, this solution will require a massive code change in the platform level and even introduce security problems and hence this solution is not really practical.

To be honest, when I heard the angular team claimed angular2 can speed up my app 10x, I am so happy. But deep down I told myself, I would be happy if my app is 2x faster. Before my app upgrade to ionic2 rc0, my angular2 is WAY SLOWER than my ionic1 app. Right now, to be honest, I would be happy if my ionic2 app is as fast as ionic1 app. Otherwise, our team will lost a few months which is enough for us to build half of a native app. We are pretty worry and frustrate at this point.

78

same for me. something like 11-12 to 6-7 on android 6 nexus 5x with crosswalk

1 Like
79

Default “tabs” template for LG Optimus G4 boots under 3 seconds. I’ll say it is blazing fast :slight_smile:

80

Oh sh*t, with RC.0 gulp goes away and now npm scripts? also Rollup is the new build tool, should i change or stick with webpack?