Getting better performance in Ionic 2 Apps

Some tips and good practices

Posted by Alex Ferrer on 3 months ago

As a user, if you have a bad user experience like bad performance or so many crashes, for sure, you will not use it again and maybe you will uninstall it. Because of this reason, I have written this article, because as developers we must ensure good quality software.

In order to improve my last Ionic projects, I have written a list of some tips which help me to get apps with a better user experience and performance. Now, I will explain some solutions for several common problems. 

  • Serve Lightweight images from your servers.


To start with, in mobile projects it is so important to load low weight images and resources, because users who will use our apps will never have the same connectivity everytime and maybe will have problems to load heavy images. To solve that problem, we should serve images from our servers as a thumbnail versions of it (or resized version) which will help to load them much faster. 

  • Load images asyncronously (Lazy-Loading).


Consequently, if we load those images asyncronously, we can make our application more great, because users will see a loaded dom and asyncronously they are going to see the place of the images and see them when they are loaded.

Ionic team have done a great work with Ionic 2, they have added a new functionality to load images using an Angular directive called ion-img. With that, we are going to be capable to load our served images into our application asyncronously and also we will be able to set height and width like standard HTML tag.

<ion-img width="80" height="80" src="..."></ion-img>

Ionic image tag is a good solution to lazy-loading, and also we can put a background as a fallback image. Searching for alternatives I have found other third parties libraries like Ionic Image Loader which I liked so much that I am actually using it. I think it could be a better solution to Lazy-Loading because it has more options like setting a fallback image if the url or path of the image to load is broken and also allows us to show an animation like a spinner while the image is being downloaded asyncronously.

  • Paginate API results.

Obviously when we get data from an API REST we must paginate the results. First of all, because is better to load few data in less time than a lot of bytes with a big timeout.

In Ionic 2 projects, we can use the Infinite-scrolling solution, which will make our applications more efficient and usable to the users.

<ion-list>
 <ion-item *ngFor="let i of items">{{i}}</ion-item>
</ion-list>

<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
 <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>

When the user scrolls down a list of items will load the next page of items or the action we want to do.

  • Loading fonts

Also, we should take care about loading external fonts into our applications, because if users are in a bad connnectivity situation or they don't have connection maybe they won't load those fonts, caused by a big timeout while loading styles or making the application to use default and ugly fonts. For that reason we should load font files locally inside the assets folder of the Ionic application.

All this recommendations are common in the Ionic community, but I thought it could be interesting to write about it because sometimes my experiences could be helpful for other developers like me. I will try to write more abot Ionic and other technologies in the next days and months.

Share this post!