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, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!
 

Table of Contents

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

Tutorials

Other Resources (themes, templates, plugins, Cordova plugins, starter apps)

Cordova Plugin 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