In this guild, I will walk you through the process of speeding up your Ionic hybrid mobile application. This article will cover what we all know as Ionic 2
and 3. If you came here looking for the same topic but related to Ionic Framework version 1, find it here.
Let me start by saying your pain is my pain. You took a gamble by building a non-native mobile application and it backfired. Same thing happened to me, so you are nor the first or the last one.
Let me give you a better perspective. I have built my first hybrid mobile application 5 or 6 years ago, I cannot remember any more. It was made using jQuery Mobile and it was horrible. The design was ugly, animations were jumpy, altogether it was a very bad first try. Each next application was better and better. Until I moved to the Ionic framework, then cycle restarted again.
Fixing this problem is not an easy task, it’s not even possible. The best thing we can do is mitigate some of those problems and I will show you how to do that.
The new aot build flags
The initial Ionic 2 implementation suffered one big problem, the resulting compiled code was way too big. This issue translated into prolonged application boot time. Even the simplest templates would take seven and more second to boot up. Way too much.
To some extent this makes sense. When Ionic 2 was first introduced, Angular 2 was still under heavy development. This kind of performance issues were to be expected. It gets even worse, by default, all Ionic framework applications are built in non-AoT mode.
Depending on a size of your application, this flag can significantly improve application boot time. Improvements will depend on application size; larger application (which are usually the slowest ones) will see the biggest improvement.
AoT flag can be used during development stage like this:
ionic run android --aot
Correspondingly, –prod flag triggers Ionic framework production build:
ionic cordova build --prod
As you can see, these flags serve the same purpose, just at the different stage of development.
Please take a look at this article if you want to find out more, you will also find a speed benchmark.
Click vs tap
I cannot believe this is still a thing. Even when I was working on jQuery Mobile this issue was one of the most common problems, surpassing even multiple events triggering issue.
To make story short, in the Ionic Framework case, using click even on elements which are not normally clickable, will result in 300 ms delay between click event and function execution.
Thus, on a button and a tags use click event as usual. In any other case add tappable attribute to element holding click event:
<div tappable (click)="someFunction()">Click me</div>
Any external source will increase application boot time, even make it unusable if not available. It is always better to have local application content.
If there isn’t any other alternative, use some kind of Content Delivery Network (CDN) as a content provider.
So be smart, don’t use what you don’t need. And locally handle what you actually need.
HTML pages are loaded from top to bottom. Following this rule, CSS content needs to load before HTML. Thus we are initializing it in the HEAD section.
<script defer src=".....">
Hybrid mobile application, when compared to native apps, can offer a superior artistic freedom; thanks to CSS.
If you don’t want to create just another Ionic framework application clone (we had the same problem with jQuery Mobile), we need to style our apps using CSS.
Unfortunately, in this pursuit, we are usually overdoing it.
When working with CSS, less is always better. Believe it or not, certain CSS3 features can, when overused, severely deteriorate your application speed. For example, Box-shadows can slow down page rendering speeds, ever regular test shadows. If you are required to use shadows consider using background images instead.
Another way around this problem is to acquire a finished theme or template. This way you will:
- Dodge the clone problem
- Application will look new, fresh and different
- Users will usualy overlook that they are using a hybridn application
- Your application may gaing a speed as these products are usualy heavily tested
This one is a given.
Use as smaller images as possible. Use JPEG if you can, colorful images will hide pixel distortions. The second option should always be a PNG.
Don’t forget to compress these images. For example, there are some great online tools offering this specific functionality.
There’s one other thing. When possible use lazy loading feature, it will significantly boost application performance.
What is lazy loading? It a concept where we delay content loading until the point where and when we actually need it. Putting it simply, it’s on-demand content loading.
Ionic Framework offers this feature since version 3.0.0.
Another important issue is memory handling.
Simply put, use fewer pages and learn how to reuse them. You don’t need to have hardcoded content when everything can be generated on the fly.
Also be careful of navigation history. For example, by default, pages are cached in the DOM if they are navigated away from but still in the navigation stack. If you go from the page A to page B and back, page B will stay cached. This makes sense only if the page B needs to stay like that. In any other case destroy it by removing it from the navigation stack (using pop() or setRoot() function).