Taking too much to load Home Page, almost 12 to 13 secs

Ionic Framework ionic-v3
#1

Hi,

My app is taking too much time to load, almost 12 to 13 secs after the splash screen.

Home Page content is very simple, below is the code of home.ts

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { SearchCompaniesPage } from ‘…/searchcompanies/searchcompanies’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
constructor(public navCtrl: NavController) {

}

showSearchCompanies() {
this.navCtrl.push(SearchCompaniesPage);
}

ionViewDidLoad(){

}
}

Any Idea.

1 Like
#2

Does it load faster in ionic serve?
Did you remote debug on the device to find out what the webview is doing during that time?

#3

Yes, ionic serve is loading very fast. I have not tried on webview yet.

#4

Try building to your device with the production flag ionic run android --prod

1 Like
#5

Also move your search out of the constructor and onto ionViewDidLoad()

[edit] - nevermind I parsed brackets wrong :slight_smile:

But I increased performance a ton by moving operations out of constructors, so check other pages to make sure nothing is blocking on construct

1 Like
#6

move your search out of the constructor and onto ionViewDidLoad()

That’s really interesting, thank you. I’ve moved all operations out of constructors and into ngOnInit(), but maybe ionViewDidLoadI() is even better. I’ll play around with it.

#7

Constructor is empty and also ionViewDidLoad() is empty.
In home.ts only one method is there showSearchCompanies() which is been called on click from home.html.

#8

I see that in the posted code, but what about other pages?

#9

Other pages are opening swiftly without any issue.

#10

I have the same problem

#11

I had the same problem, and I fixed it by moving things out of constructors on other pages and the app module. Went from 20+ seconds on a non-prod build to ~4 seconds. Now I don’t have to use the --prod flag while in dev. I’m not entirely sure of the order of operations but I think it might be the case that some pages or services are constructed before the home page is rendered (for navigation setup?). So if you have something blocking elsewhere it can affect your homepage even when there’s nothing going on your homepage specifically.

#12

I checked and everything seems to be alright.
This is tabs.ts

import { Component } from ‘@angular/core’;
import { HomePage } from ‘…/home/home’;
import { AboutPage } from ‘…/about/about’;
import { ContactPage } from ‘…/contact/contact’;

@Component({
templateUrl: ‘tabs.html’
})
export class TabsPage {
// this tells the tabs component which Pages
// should be each tab’s root Page
tab1Root: any = HomePage;
tab2Root: any = AboutPage;
tab3Root: any = ContactPage;

constructor() {

}
}

and home.ts content I have placed earlier.

#13

This solved for me. Before was 10/12 seconds and after 2-3.

1 Like
#14

Thanks, this resolved my issue also.

1 Like