react-native development

7 Takeaways from Investigating Sluggish Performance of an HTML5 / JavaScript mobile app

I recently spent a few days investigating sluggish performance (particularly slow navigation) on an HTML5 / JavaScript based mobile application. Below is list of the main takeaways from the exercise:

  • If necessary, use libraries that result in faster touch events on mobile e.g. FastClick library to eliminate 300ms click delay between tapping an element on a screen and the corresponding click event being fired
  • Implement lazy loading for lists and tables (most HTML5 / JavaScript libraries have support for this on the respective List / ListView component)
  • Minify JavaScript and CSS
  • Where possible, consider async load of required resources and libraries e.g. SAPUI5’s preload config option data-sap-ui-preload="async"
  • Reduce the number of DOM elements
  • Take care not to write code that blocks the UI thread – keep an eye out for nested loops on navigation etc
  • In situations where heavy lifting by code is unavoidable, implement a splash screen, spinner or some form of feedback so the user is aware that something is happening

Happy coding!

  1. Thanks to Tamiswanashe Chipika for the additional takeaways below:
    • Smart use of caching server side responses makes the reduces the network round trip penalty in some cases
    • Offline first approach (supported by a client database of some kind – RealmDB is a good cross platform choice) so that your app doesn’t depend on a network connection to be functional
    • Also related to offline first – optimistic writes (update the UI before success responses are received from the server)
    • Smart choice of CSS frameworks. Some are better for mobile than others