Wednesday 19 March 2014

CloudStack UI speed

I do some CloudStack development in my free time and the user interface is my favourite part from CloudStack. It looks nice and practical when in use and it is very clean in the inside, something to learn from. It is a Single-page web-application, so you will not have to wait for full page reloads.

There is a drawback though. When you load the user interface, all the templates and javascripts are loaded. At the moment (cloudstack-4.5.0-SNAPSHOT) this is 5.4 MB, quite a lot for a login page...

Solution 1: Dynamic compression


John Kinsella wrote an excelent blog post on how to make the page loading faster by configuring Apache httpd to do so. The drawback of this solution is that it will try to compress all the 5.4 MB data when you are downloading it.

Solution 2: Static compression


Well, dynamic compression is usually good, but why do you want to compress that big lot of javascript and css again and again? You can compress those files at packaging and serve the compressed version if the browser accepts it. This is a win-win situation because no CPU-time is wasted while network bandwidth is saved. This is what my patch is doing.

I wanted to show you some results...
Without compression: 5.4 MB

With static gzip compression: 1.2 MB

4.4 MB saved each time you go to your cloud, and more importantly a few seconds from your users lives. I hope you like it :-) But I have to admit there is an obvious drawback: static compression does not compress dynamic content. This is not only true the ajax interactions, but also for the index html page dynamically generated by some JSP files, it weights about 200 KB.

Right solution: combine dynamic and static

I think the combination of static and dynamic compression is the perfect solution for the size problem. No more wasting CPU-time on static compression, no more wasting network on uncompressed dynamic content. Now you have both.