This article is something I wanted to write last few months. After spending last few years developing hybrid mobile applications, I came to know few tips and tricks to make them faster.
 
At this point, hybrid mobile development is still behind native applications. What we gain in code reusability we lose in app speed. Thankfully, we can mitigate this problem as much as possible.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

 
Click here if you want to see other tutorials, or articles about the Ionic framework (themes, templates, plugins, tutorials)
 

Design Improvements


Less is More

Most of the times, mobile applications will work in an environment that’s connected to the internet. But that doesn’t mean it’s good to use external resources. Your future users may not have such a fast mobile access, and what looked like an ordinary application boot up for you may look like a slide show for them.
 
The most common example I know of is loading external Google Maps V3 framework JavaScript files.
 
Minify and Uglify Everything

Every file you initialize in your Ionic application will slightly decrease your application speed and performance. This problem becomes much more apparent if you’re using a large number of files.
 
Minification is a process where we’re removing unnecessary characters, like white space characters, new line characters, comments, and sometimes block delimiters, from our JavaScript and CSS files. Uglification goes a step further by replacing variable and function names with much shorter texts thus making them smaller and harder to read.
 
  • Always make sure you’re using minified versions of CSS and JS files, this process is reversible.
  • Uglification is also reversible but much harder to read.
  • If possible merge all nonessential files. Everything that is not essential for your initial application bootup.
  • Never use more than you need.
 
Optimize Images

Even compressed images can take a loot of space. No matter if you’re using JPEG or PNG images, compress them as humanly as possible. Use tools like compressor.io to achieve lossless compression.
 
For smaller images, logos, icons use CSS sprites. This is a technique of merging smaller images into one single large image and using them via CSS background position.
 
If you’re required to use real image tags instead of background-image CSS property, you can convert them into a BASE64 string representation and handle them like this:
 
<img width="16" height="16" src="data:image/gif;base64,R0lGODlhEAAQAMQAAO....." />
 
CSS approach:
 
image {
  background-image:url(data:image/gif;base64,R0lGODlhEAAQAMQAAOR...)
}
 
Fewer Images

If possible, instead of images, use CSS font icons, like Ionicons. Every image less will result in a shorter loding time.
 
Preload Images

Let’s say you were smart and images are packaged together with the application. When the images are displayed for the first time, there will be a visible pop effect (like they came out of nowhere). Thet’s why it’s important to preload images depending on an active view. Andrew McGivery has an excellent article on this topic: Preload images in Ionic using $ImageCacheFactory.
Move Everything To The Back

JavaScript initialization can significantly reduce initial application speed. To mitigate this, move every nonessential JS file to the bottom of your page. Just before end of BODY tag and(or) use the “async” and “defer” attributes if you can:
 
	<script type="text/javascript" src="some.js"></script>
</body>
</html>
 
You can test this approach until you find a perfect balance.
 
Fewer views/pages/elements/steps

Carefully design your application before you start coding and make it as minimal as you can.
 
  • Never use more pages than you need
  • Reuse your pages. For example if you’re creating a master-detail pattern view, don’t use a separate page for every element on a master page. This pattern should always have one master page and one detail page
  • Don’t use page elements if you don’t need them, like tabs or slide navigation
  • It’s much faster to generate new DOM content than manipulate existing one
  • If possible avoid direct DOM manipulation, it’s much better to create a custom directive
  • Avoid unnecessary scrolling and large pages, they will result in excessive memory use.
  • The most significant content must be available in the shortest number of steps and page retrievals
 
Last, but not least. Limit the usage of input boxes. No matter what mobile framework I was using, they would always misbehave in some way or another. Consider using any other form element instead, like selects, radio buttons, checkboxes, and other controls.
 
And FFS don’t autofocus input fields on page load, that’s the most stupid thing you can do. If you trigger focus event before a page is fully loaded, software keyboard may cause a content jumping effect. Do this ONLY if you’re working on a chat application, in a proper AfterLoad event.
 
Don’t use unecesarry libraries

Please, don’t use something like jQuery just so you can use append function, learn a friking JavaScript.


Continue to the next page

  • Every suggestion from this post is relevant. All the way from caching to optimizing images, these techniques cover most of the basic considerations you must have when developing for any deployment. Nice write up, thank you!

  • Niceee

  • ziobudda

    Nice article, but I hope not useless because in the plugin’s homepage i read this “The plugin focuses on enterprise-only distribution and may not compliant with all public store vendors.”. Hmmm. Has someone try it with an apple “in the apple store” app ?

  • alex

    Great article, it has saved me a lot of hours of research. But I did not understand something…

    I’m thinking on a simple Master-Detail app: one Master view and one Detail view. You said: “when navigating back in the history, the ‘forward’ views are removed from the cache”. However, you recommend to disable the cache for the Detail view. I think there’s no need to do that because “forward cache” is disabled by default. I’m right?

    • I meant that in a slightly different way, I’ll rewrite that part.

      Your’re correct, forward cache is disabled. But, depending on an application, sometimes you will not go back. Instead you may change page through side menu or top/bottom navigation depending on a platform. In lot of these cases you don’t want to return back at a detail view.

      • alex

        Thanks!

  • karlyboy

    Generally fine but I would advise testing pure ionic and then with crosswalk.

    On repeat collection you can build image grid with divs and wabt to put usernames, presence and index data plus a pull to refresh image capability then Crosswalks rendering much faster and silky smooth. You certainly will not be doing anything wrong adding crosswalk.

    Also javascript performance boosted by nearly several times. When you flip between the two and keep optimizing you notice the difference.