Sencha Touch bundled css file size is over 800k, how to reduce it?

Question

I am using Sencha Touch 2.4.1, with the example app generated by "sencha app generate", I got the production css file with size over 800k, it is too big for mobile users even with 3G intenet, even though it can be cached after the first visit.

How can I reduce the css file size?

Answer 1

You could always use a css minifier such as http://cssminifier.com/ I would think that would save you some valuable space :)

Answer 2

Try these links and follow the steps first:

http://www.sencha.com/blog/4-tricks-for-smaller-css-in-touch-22/

http://www.ladysign-apps.com/developer/category/css/#.VGL8SYfTYUU

http://druckit.wordpress.com/2013/08/12/sencha-touch-2-theming-apps-for-multiple-devices/

Google Chrome Audits is also useful as Tony mentioned, as when you run it it can show how much CSS is unused. You have to be careful with that one though as there may be some rules there that are specific to compatibility with other devices, and it does not seem to be that accurate with Sencha apps as my app is clearly using styles it mentions are not used.

I would suggest also downloading the Sencha Touch app inspector for Chrome, there may also be some features in there. There is an option in that that can tell you if you are over-nesting items (the side tab on the right hand side).

You can go even further by downloading the free tool ImageOptim (if you are on a Mac, there are probably similar tools for windows). It reduces PNGs and JPGs down quite significantly, without compression as it removes unnecessary metadata etc. I even tried it on the app icons and loading screens that Sencha provides and it reduced the sizes of each by around 18%.

:-)