Speed up initial loading

[TheMohanraj]

We're developing an app which is partially native and partially hybrid.
We will open cordova activity when user clicks on an menu item and finish the activity when user clicks back.
Problem with this approach is, it takes a while to render on the screen for first time. We are hosting all the resource files in the assets folder so caching doesn't make much sense. Is there any progressive way to load the application?

[jgw96]

Hello @Dheran . Start up time is something that we are working hard at reducing as we speak (: . We are currently working on a new build chain that will make Ionic apps alot smaller and which will include offline template compiling. With these two improvements you can expect to see a huge improvement in startup time. I would ask around on StackOverflow or our forums (forum.ionicframework.com) for ways to "preload" a webview thats inside a native app. Thanks for using Ionic!

[TheMohanraj]

@jgw96 Hey, Is there any existing feature request or issue? So that it will be easy to follow up and able to use it once it got implemented.

[jgw96]

@Dheran Good question! At the moment there are no good tracking issues for this, as this is in the very early stages, but it is a high priority for us and the ionic-cli team is making alot of good progress on it. Once this gets farther along i will try to update this issue with our progress so you know what to expect (:

[TheMohanraj]

@jgw96 then, why don't keep it open until?

[TheMohanraj]

@jgw96 Removing unused css while build process will also contribute a lot

[asd2766]

I use ionic2 build a mobile website, then I find when I use android 4.4 browser open it, it is very slowly. Have any good suggestions to me ?
website: https://zhaoxie.net/static/weixin/index.html

Cordova CLI: 6.1.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.31
Ionic App Lib Version: 2.0.0-beta.17
ios-deploy version: 1.8.5
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v5.3.0
Xcode version: Xcode 7.2 Build version 7C68

[TheMohanraj]

@jgw96 any idea which version will get this feature?

[jgw96]

Hey @Dheran ! Good question! We have a working implementation of treeshaking with webpack 2 as of a few days ago and are still working on using the offline compiler. After reading the Angular team's meeting notes today it looks like they are not gonna call the offline template compiler "stable" until Angular 2 rc 4, but i hope that we can have an implementation of the offline compiler before then.

[TheMohanraj]

@jgw96 Seems they've already closed the issue. angular/angular#3605
and Angular RC 4 is almost 33% complete (in milestone).
Can we expect the new compiler in ionic beta 10 or 11?

[danbucholtz]

Hi @Dheran, we're actively working on it. This is an extremely high priority item for us so please rest easily knowing we'll have it done as soon as we can.

Thanks,
Dan

[TheMohanraj]

@danbucholtz can you please suggest me with any temporary workaround to reduce initial rendering time until official solution comes. because, I've been given two choices, either need to fix this issue or drop and build the same with native code.

[danbucholtz]

Hi @Dheran,

Sorry, we aren't providing any work arounds at this time because we don't have any 😄 Please remember we are in the beta phase and are waiting on Angular to get offline template compiling and minification into a good state so we that we can mimic what they do. This is extremely important for us to get into the build process ASAP, but it's just not ready yet.

Thanks,
Dan

[grapemix]

+1

We can wait till rc4, but please keep the offline template compiling high priority. FYI, the initial time for our app is around 8s, but the initial time of other native app is about ~1-4s. We really need to shorten the initial time.

Finally, thanks for the work.

[jgw96]

@grapemix Its definitely high priority! We are working with the Angular team on a constant basis to get offline template compiling working with Ionic along with tree shaking and aggressive minification so that we can get our average app size much smaller. As mentioned above there are some changes to Angular that we are waiting on right now, but it will definitely get done (:

[paulogr]

+1

[liujinxing]

+1

[TheMohanraj]

@jgw96 @danbucholtz guys any progress in this? can we get fix in beta 11?

[hackfrag]

+1

[prijindal]

In which repository are you guys tracking this
I think I will be able to help a little regarding webpack

[danbucholtz]

@prijindal,

I believe @jthoms1 is doing the work on this branch.
https://github.com/driftyco/ionic/tree/adding-offline-template-compiling

Thanks,
Dan

[TheMohanraj]

Hi @jthoms1, will changes get merged with master before beta 11?

[evgeniynet]

Yea I waiting offline compiling too, but something can be made now.
Our site is completely on Ionic2 beta.8
http://m.sherpadesk.com/

I have hybrid app too and I did some optimizations and got 417ms loading time.
Look at report https://tools.pingdom.com/#!/DW6Td/http://m.sherpadesk.com/17
Also Site size decreased 600% (3Mb -> 500 Kb)
User interaction response speed improved 2000% (2 seconds -> 100ms)

Good recommendations: http://blog.angular-university.io/how-to-run-angular-2-in-production-today/36

I'll post all my gulp settings and link to appstore here: http://www.sherpadesk.com/blog/

[justme1]

@evgeniynet very nice.

Few questions:

1. When installing app it opens instantly but the. I get loading your profile and it seems to stuck for 5 sec. Why?
2. How did you optimize loading time without offline compilation?
3. Is your mobile website is ionic2?
4. Is your desktop website ionic2?

I'm contemplating on using ionic 2 but the only thing which is stopping me that I need to manage webapp project + mobile ionic2 project.

Thanks

[barocsi]

Whatever I do, deviceready fires after 5 seconds.

[danbucholtz]

All,

To give an update, we have made significant improvements to the framework itself to improve tree shaking and dead code removal. We have been experimenting with code splitting and closure compiler and have dramatically reduced the bundle size in those cases. Experimenting is the key word and it'll be a bit before we have anything ready for prime time. We are working very closely with the Angular team on this topic.

Closure Compiler is an amazing tool but it can break many 3rd party libs or even your own app if you don't follow the rules, so we're working on creating a simple yet robust and flexible developer experience around this.

Shrinking the bundle size, code splitting and improving launch speed is our #1 priority.

Thanks,
Dan

[naveedahmed1]

@danbucholtz thats great! I suggested closure compiler to Angular CLI team in past. May be a switch could be introduced making compilation using closure compiler optional. Those who have closure compiler friendly code that can enabled it, rest can compile it in a standard way. Ionic team could make sure core Ionic library and Ionic native is fully compatible with closure compiler. BTW would you like to share whats the best launch speed you are able to achieve with/out closure compiler?

[barocsi]

http://hybridtonative.com, NativeScript is still immature, however it is getting more and more attractive as Ionic issues keep coming, open tickets persisting or growing and webview technology is just spinning around itself, forcing developers work on the technology instead of working with it. Even basic tasks demand huge amount of workarounds, issue digging, requiring a lot of code updating, following changes and updates leaving producion on a muddy base of never ending polishing which is actually bug fixing of bad design choices fixing other bad design choices. At the end of the day we are paying the price and its getting comparable to developing apps natively on both iOS and Android.

[dylanvdmerwe]

@barocsi hyperbole much? You do realize Angular 2 and ionic are on the cutting edge of the tech they're working with and they are working on finding the best possible course of action for us developers? Also keep in mind that v2 stable has not been released yet.

[graphefruit]

@barocsi If you're not glad with Ionic2 use Ionic1 or write your own angular application.
Even with your own angular application you gonna stumble across many issues which ionic solving in their framework already.
Also this framework is open source and you can contribute; if you got any problems with the speed they're working on it, or you could fork it and create your own ionic2-fork.
I don't want to argue or break something from the fence, even if Ionic2 has a release candidate it just came out from the beta release cyclus.
So please give it some time, and if you cant wait take ionic1 and use crosswalk, which has already set some years in this market

[barocsi]

Thanks for the suggestions, I am wondering around alternatives for current and future decisions. We already have some robust and heavy Ionic V1 and V2 apps along with and almost 1.5 years of struggling and contributing with issues all over this github repo. Even though this is a pro-ionic thread we must anticipate where this technology is heading, even is something is tagged as cutting edge by @dylanvdmerwe it does not mean it will be subject to persistence by the community and must be honestly evaluated treated with patience as we do, this thread is almost 6 months old, still dealing with an essential and production critical problem.

[graphefruit]

I can understand your concerns, thats why I used plain angularjs within my own heavy application.
The problem is, that I still stumbled across many issues, because if you're not writing everything yourself or from scratch you'll get there sooner or later.
I had big problems with Angular-Material V1 (performance e.g.) and I needed to dig into the framework myself, the rest was written myself in angularjs.
But even there I came to the point where performance issues popped up.
So I needed to spent time on my "own" framework to find and try to fix them.
So I can understand Ionic with their problems, because I fell in these problems myself.
Even if they are a big/bigger company they also have limited resources.

The next thing is that Ionic2 isn't just an APP, it also provides a website, it also supports UWP (and thats a lot of pain) and also it supports PWA.
So many new features in one framework, that is mostly used for Apps, but supports many other things aswell.
With this features there comes a lot of dependencies and much problems when digging into them.
But you're concerns are eligible, but I rather see the problems in the complete new technology which was thrown on the market and Ionic tries to grab into them and gets a lot of dependencies with it.

[philrob]

@danbucholtz

Dan, extremely encouraged by your comments re 'experimenting' on code splitting, closure compiler, tree shaking and that launch speed is the current #1 priority for ionic2 (4th Jan). The example ionic2 conference app off Github is a good simple benchmark app that all can use to compare your progress. Hope your work progresses well (and rapidly). Really need a startup time of <=3 secs these days or users are likely to 'go away' - over 6 secs and they definitely 'go away' for good.

Built using --prod and launched on my Nexus 7 (2013) Android 6.0.1 the conference app is currently taking ~8 secs to launch (average timed by stop watch over several launches).

So, still quite a way to go, here's wishing you every success !!! - especially as I really like the structure and facilities provided by ionic2 from an experienced developer's point of view.

Phil

[mpaland]

@barocsi I can understand your situation and in the moment it's really very disappointing for me as well.
To sum it up: My app project must run on Android, iOS and Win10 (desktop) and needs to start quickly, 2 sec are max - even on older (means 2 year) devices.
I want to write in JS and HTML, due to a lot of libs and experience. This narrows down the field to WebView apps instead of native (Java, Obj C) ones.
I need certain HW access, so Cordova is a good choice. NativeScript, Appcelerator, OnsenUI w/o ng2 ... may be, but I don't like the idea at all.

In the moment I blame ng2 for this huge code size and I'm not sure if proper treeshaking and closure compiler will reduce the startup time significantly (factor 4-5 necessary) on a bigger project. We need to wait and see...

[graphefruit]

@mpaland Have you already used Ionic1?
I realy would like to see how you get a 2 sec startup time - even on older devices.
My custom project without ionic1 need also a startup time of about 3 seconds and here I go with:

1. index.html
2. min.css
3. min.js

And thats it.

Did you already accomplished such a fast loadtime with cordova (angular,etc)?

[mpaland]

@graphefruit , no I didn't try Ionic 1 and I haven't tried anything else yet, cause I found Ionic 2 best suited for my project. As I said, I'm just evaluating the different options. A WebView with JS is IMHO still my best option. So I'm looking forward for the ng and ionic team making progress.

[philrob]

@graphefruit
I really hope ionic2 does finally achieve a <=3 secs startup, even on older devices. I can already achieve that with another hybrid framework + cordova 'out of the box'. However, I would much prefer to use ionic2 as it has a such good pedigree being built on angular2, which in turn, gives it great support, documentation, facilities, etc - all the things an experienced developer like myself values highly.

[lordgreg]

@philrob Extremely curious which other Hybrid Framework + Cordova (incl. everything you would need for your project) brings you under 3 seconds. Please do tell.

[philrob]

lordgreg
Not really an appropriate place for introducing other frameworks. I just am hoping that the ionic2 team can achieve a significant reduction in launch time that brings it closer to my aspiration of <=3 secs.

[dutchview-shreesha]

Hi
My ionic2 application takes still 10 sec to launch.but ionic1 application takes only 4 sec.how to improve the initial loading time.please suggest me.this is very critical

[lordgreg]

@philrob Seriously, checking other comments, you would fast notice there's always comparisons. Heck, even this thread has them. What you are stating is not a lie, but explaining that your hybrid app which runs nothing more than jQuery (example) inside Cordova container opens in less than 3 seconds is total absurd. Using the framework which doesn't handle styling or is not at least so complex as Ionic is, or it doesn't rely on any other huge library (angular2) is like comparing night & day. It doesn't make sense.

[PrithiviRajG]

@mobinius-shreesha run the project as ionic build android --prod or ionic run android --prod to get the launch time as 5 seconds. running in debug mode ionic run android will increase the time to more than 10 seconds

[philrob]

lordgreg

Don't think we disagree. That's why I deliberately chose to use ionic2's conference app from Github (built with --prod) to give my launch timing (~8 secs) specifically for my Nexus 7 (2013) Android 6.0.1. Clearly if another framework can achieve a faster launch time on the same equipment and still provide the facilities I need (including styled UI mobile widgets) then FOR ME its relevant,

I REPEAT - I like really ionic2 for all the other important reasons I gave before, just want to see the launch speed significantly improved. Think we need to give the ionic2 team the time they need ...

[vielhuber]

I also look forward for increasing boot time.

I think the Ionic team has done an awesome job with their release of v1 of ionic-app-scripts last week. This improved build time massively here in my environment.

I am sure they will do the same with app boot time.

[barocsi]

I think the problem lies elsewhere: ionic v2 is in rc state. That is what most developers must respect, however: on the Ionic team side ionic documentation suggests for any newcomer that v2 is something that is production ready. Do not object it is the case. Even the docs are now defaulting to v2.

This deceptive behavior from the team voluntary or not is kind of the result from the pressure from the industry. Ionics sole durvival depends on laying out something advanced that has a large dev base (js+angular2) before the community switches to a different emerging cross platform technology, for example the one mentioned by me before: Nativescript

So the Ionic teem must suggest v2 is the de facto version for Ionic. But the price tag can be higher in this case: rolling out a product with critical parts in errors with no asap fixes yields to distrust from the community that is sometimes more dangerous than waiting a couple of months more before positioning the product as a cutting edge mature major upgrade.

Developers must produce and each step back or lack of fixes will make them turn to other solutions to hedge their own future and stability towards their clients.

[tryadelion]

Any updates on this? :)

[dutchview-shreesha]

@PrithiviRajG Thanks for your answer.i am able launch the app within 10 sec.but is there any updates on ionic2 to improve booting time.when they are planning to release full version of ionic2.do you have any idea.

[tryadelion]

14.99 seconds cold boot with the current plugins installed and current ionic version:

com-badrit-base64 0.2.0 "Base64"
com.synconset.imagepicker 2.1.7 "ImagePicker"
cordova-plugin-camera 2.3.1 "Camera"
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-dialogs 1.3.1 "Notification"
cordova-plugin-nativestorage 2.2.0 "NativeStorage"
cordova-plugin-secure-storage 2.6.3 "SecureStorage"
cordova-plugin-spinner-dialog 1.3.1 "SpinnerDialog"
cordova-plugin-splashscreen 4.0.1 "Splashscreen"
cordova-plugin-statusbar 2.2.1 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.48
ios-deploy version: 1.9.0
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.2
Xcode version: Xcode 8.2.1 Build version 8C1002

[trakhimenok]

@tryadelion current ionic version is rc4, not rc1.

Everyone, let's wait for RC5 or release as there should be a lot of changes regards this.

[tryadelion]

how do i force an ionic update to rc4? is there any other outdated thing that might be causing my delay?

[barocsi]

For me a complex project in ionic v1 was 1.8MB build.js, with v2 a basic project main.js goes up over 6.7MB.
Adding or removing cordova plugins not neccessarily affecting boot time.

[mhartington]

Hi everyone! We're going to close this issue and lock the thread for now. At this point, we've been doing a lot of work on improving load times, framework speed, and making it work everywhere.

This is always going to be a moving target, and something we constantly think about. While this issue at first was helpful, it has since derailed and is no longer a clear issue to follow. If you have any other issues, please open a new one, with all the information that we ask for.