I have a problem where navigation takes an unreasonably long amount of time to navigate between pages in my app. I’m using Ionic 4 with Angular, Cordova (not Cap). All packages are current.
On both my phone, a OnePlus 2 (a four year old phone with 8 cores, 4 gb ram, running android 6) and on the ‘mid-tier mobile’ setting in Chrome on my desktop, navigation takes between pages takes 2-4 seconds. Even weirder, this performance gets faster on subsequent navigations to the same page. However, it never gets better than ~700 ms.
To be clear, I am not talking about initial load of the application – that takes 3-4 seconds but I consider that acceptable. I am talking about the delay in navigation when I click on a button with a routerLink, or use this.router.navigate to do it programmatically.
It does not seem to be a general UI-slowness issue either – things within the same page, like opening an action sheet/dialog or clicking things, is extremely responsive and snappy.
The pages in questions are not complicated at all – I have no large lists or anything obviously heavy. I have a few pages for displaying data, a few for data entry. Around 12 UI components and a few pipes. It’s barely more complicated than a simple to-do application.
The current state of my project:
- My routerLink’s are on ion-button’s, which should mean this is not a ‘300ms’ browser touch delay issue.
- All top-level page components (those with routes) are eagerly loaded. They are eagerly loaded because I presume that eager is better for navigation after the initial app-loading. I have not tried lazy loading, as I don’t see how that could help.
- All non-top-level components are using onPush strategy, and I can confirm they are not over-rendering.
- All data is stored in a central ‘model’ service. Each item is “immutable”, in the sense that when I update data, I replace it instead of mutating it. Thanks to this and above item, I am fairly confident that I am not doing anything stupid in terms of re-rendering components unnecessarily.
- The data set I test on is tiny and there is no async data loading – everything is local so I just grab it synchronously (and it takes < .1 ms to perform)
- I turned animation off in the app.module.ts.
- I’m using pipes whereever possible instead of calling functions within the template.
- Yes, I’m doing production builds with AOT.
Am I missing any best-practices here? I am honestly at a loss at this point… if performance is this slow for such a small app, I can’t in good conscience use ionic when I have more than 10 pages.
It would help the performance perception if I could make Ionic transition to the page before everything is rendered (so maybe I can show some skeleton text) but I can’t figure out how to do that – all references I find are for cases when there is async data loading, and as I said, I do everything synchronously.