Improve performance ST2.3 app with Sencha Architect

Question

I am trying to improve the performance of my Sencha Touch 2.3 application. I did build the application using Sencha Architect 3. Now, I read a few posts about improving app performance by not including all default sencha css classes (see https://www.sencha.com/blog/4-tricks-for-smaller-css-in-touch-22/). I would like to apply this method to my application too (other suggestions would be gratefully taken into account too). However, using Sencha architect to compile/build my app, the app.scss file is not used because of theming options in Sencha Architect (see Sencha Architect 3 does not use app.css). Is there another way to not include all default css files?

Using:

• Sencha Architect version: 3.0.2.1375
• Sencha cmd: 4.0.2.67 framework:
• Sencha Touch 2.3.x

Kind regards

Limner

Answer 1

I haven't used Sencha Architect but used an earlier version of Sencha for a phonegap app, maybe some of same considerations apply.

You can use the Chrome Audits tab to find unused css and remove them. It also give a lot more suggestions on how to improve your code.

Few more suggestions: ref

1. Use far-future cache expiration headers. This will prevent the browser from having to send a conditional GET request.
2. Try to limit HTML pages to 25.6KB or less if you want them to be cached, since the previous tests showed that this limit—imposed by iOS 3.2 on the iPad—was the lowest HTML resource limit of the devices tested.
3. Keep CSS and JS components under 1MB. Of course, 1MB is enormous and your components should be much smaller than this, but don’t bother splitting a component into separate requests for the sake of cacheability unless its size approaches 1MB.
4. Consider using the HTML5 application cache if it’s important that your components persist in the cache for a long time, or across power cycles.

Also don't forget the basic stuff, such as turning images to inline svg to cut down on requests made & moving the Javascript includes to the bottom of the page.

If you are doing animations, use css 3d transforms. This makes use of the GPU rather than the 2d transforms. eg: translate3d()

Hope this helps, good luck!

Tarrah

Answer 2

I also use architect 3 for my app, and firstly it's performance is very bad. But now it's mostly normal. Some advises:

1) Don't use css shadows

2) Don't enlarge DOM structure

3) Use build in navigation panel (push, pop methods)

4) If you have big lists in your app:

• show 3-5 of them, other autodestroy, use lazy load for them
• or use list paging plugin
• read about infinite lists

5) Forever destroy not used panels!

For build i use cordova and CLI:

~/ sencha cordova init
~/ sencha app build native

Without cordova app size ~5-6mb. With cordova build ~ 1-1.2mb. Also cordova have good native functional bridge.

Read about theming in sencha architect 3.

---

Sory for my bad english.

Scottie

Additional info: Biggest problem of sencha on android - it's use webview as container. But this problem mostly solved in android 4.4 KitKat, because it use chrome as webview. It's improves performance of sencha and other html5 applications. overviev – Scottie