Before of diving into concepts, let me assure you that if you're already using ionic 4 for developing your app, you won't need to follow this article. If you code well and follow standards in your codes, ionic 4 will take care of most of the part. This is mainly for ionic 3 apps.
As far as I know, there are three main factors seen by end users as symptoms of low performance which some of them are actually an outcome of bad configuration of app and some are related to slow back-end and sadly some - and to be honest most important ones - are related to bad algorithm of your codes.
here are symptoms and solutions I've found for every one of them :
1- Splash screen takes too long to disappear
In order to solve this:
A) open config.xml of your app and change the settings related to splash screen like:
First of all, you don't need to make user wait every time opens the app - unless you've made a super slow loading app! - so let's get rid of it first. In order to do so, just add the following code to your config.xml file in preferences scope
<preference name="SplashShowOnlyFirstTime" value="true" />
Another point ,which some how is related to the next step, is to make splash screen get hidden when we say it through our code, so user won't face with ugly white/black screen after splash screen fades.
<preference name="AutoHideSplashScreen" value="false" />
Another bad thing is, in old android -which hopefully are slowly disappearing from market - we most of times face with load url failure erro after lunching the app which is thrown by web view. In order to solve it we need to define a timeout value like this:
<preference name="LoadUrlTimeoutValue" value="70000" />
the next step is, to zero delay of our splash screen :)
<preference name="SplashScreenDelay" value="0" />
Well, I guess we're done with config.xml, now it's time of talking about coding :)
I guess the problem is, people begin to play with ionic and ng without deep knowledge on es6, js and most importantly TypeScript . Without deep knowledge of TS you would become one of those lovely ones who what they do is copy stuffs from stackoverflow and paste in their IDE.
Coding is important! it's important how you play with incoming data from back-end. it's important how and where you save objects, and most importantly when you send a request to back-end to re retrieve/receive data.
Do not put all request in first loading in order to speed up your sub pages. it is NOT called satisfying user, it's called terrifying user by a stupid algorithm. users can face with beautiful loading messages while your service workers are working with back-end behind the scene and back-end developer may do you and users a favour and make a faster system which makes life easier :)
About splash screen, open app.component.ts located in src directory of your ionic app, let's take a look at it :
there's class called SplashScreen which is imported, you can see it above of your code :
import { SplashScreen } from '@ionic-native/splash-screen';
this lovely class is what which we're going to play with. To make it short and useful, this is how ionic works by default: once platform is ready, it looks for tasks should be done including hiding splash screen, like below :
platfrom.ready().then(
() => {
/*
* and now ionic is looking for tasks after making platform ready
* tasks including loading your components,pages, starting services
* related to pages and splash screen!.
*/
splashscreen.hide();
}
);
so, technically since we've made AutoHideSplashScreen false, once platform is ready ionic will hide splash screen, so user won't be annoyed by long waiting splash screen.
Another point to note is, avoiding http called inside of platform ready and.. well, constructor of app.component.ts... if you have no choice but making http calls inside of your app.component.ts you'd better consider doing that inside ngOnInit which still, may cause some bugs in ionic 3 due to possible conflicts with other libraries; besides, even in pages you should use ionViewDidLoad since it's something similar to DOMContentLoaded of js, so everything will be ready for http tasks. example :
ionViewDidLoad(){
this.myservice.ahttprequest().then(
(data) => {
//success
console.log(data);
},
(error) => {
//error
console.log(error);
}
);
}
Finally, having a glance over Navigating Lifecycle Events of ionic 3 may help your perspective widen over how ionic handles pages and request.
I assure you, if you keep in mind these simple Super-Important points during coding, your ionic 3 app will satisfy your customer :)
Yours,