Ionic [2|3] | How To Speed Up And Optimize Your Application

Written by on October 27, 2017

Ionic [2|3] | How To Speed Up And Optimize Your Application

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.

There’s something you need to understand. Hybrid mobile applications will never work at the same level as their native counterparts. The current generation of smart-phones (older ones are also included in this list) is simply not fast enough to handle all JavaScript/CSS requirements.

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.

What is –aot mode? AoT translates to “Ahead of time”. When initialized it will minify available JavaScript code and precompile available templates.

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>

External content

Unless there’s no alternative, don’t use external content like 3rd party JavaScript libraries or images. Remember, while based on web technology, your application should not behave like a web page. It’s simply a bad habit.

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.

Last but not least, there’s one more thing. Consider not using redundant third-party JavaScript content. For example, you don’t need a heavy library like jQuery for the DOM manipulation as Angular can mostly do everything on its own.

So be smart, don’t use what you don’t need. And locally handle what you actually need.

JavaScript initialization

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.

But what about JavaScript? JavaScript scripts block parallel downloads; while a browser is loading an HTML page, it will load JavaScript one after another and no other content can be loaded in that time.

There are two ways we can circumvent this issue. Either move JavaScript script tags to the bottom of the index.html page or use defer attribute in your script tag:

<script defer src=".....">

When defer is used, all JavaScript files will be downloaded during HTML parsing and executed only after the parser has completed. They are also guaranteed to execute in the order that they appear in the document.

CSS handling

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

Image optimizations

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.

Reuse content

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).


Leave a Reply