Sencha Touch Performance Improvement Tips

A website designed for desktop browsers can take up to 40 seconds to load on mobile devices. Your Sencha Touch application if not built and deployed properly may take more than a minute to load – a far cry from an optimized mobile site. If your Sencha Touch mobile app is taking too long to load on a mobile device, here are a few things you can consider to improve the performance.

  1. Use Sencha Build tool to package all required JS files (views, stores, models) and compress them in one app-all.js file.
  2. Test your site with Firebug or Chrome Developer tool/Ripple to make sure that no more JS requests are going to server; if there are, consider using Ext.require() or adding these JS files in models, views, stores config parameters in your application/app.js and build again. This will ensure that loading and rendering is fast.
    Ext.require(['Ext.data.proxy.Rest',
                 'Ext.dataview.NestedList',
                 'Ext.TitleBar'
                ]);
    
    Ext.application({
          name: 'MyApp',
          views: ['View1', 'View2'],
          models: ['Model1','Model2'],
          stores:['Store1','Store2'],
          launch: function() {
             // Do your stuff here.
          }
    });
  3. Look out for other CSS or JS files and make sure all of them are compressed. You can use YUI compressor.
  4. Make sure you are using smaller sized images. You can also consider using an image cruncher to cut back on image size. For videos, consider embedding YouTube videos rather than streaming video yourself.
  5. If your app is sending too many requests to server (using Store loads or via Ajax/REST), consider fetching the data in JSON format inside your JSP/PHP script response itself. You can then load the stores and display information from locally available data. Avoid sending too many AJAX/REST requests to server to get simple information like user/organization name, branding params etc.
  6. Destroy components that are not visible on the screen anymore. Avoid too much nesting of panels. Try to keep your DOM size smaller.
This entry was posted in Ext-JS Sench Touch and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *