Improve web application loading

So you have a web application, and it contains HTML in it. The size for each page around 300kb or some have 800kb .Whatever the size your application server generate dynamically, it needs time to load, consume network bandwidth in server, memory usage in server, also consume resource in routers, firewalls, client modem, client CPU and memory and so on.

You can say for client is not to big. They have cache locally , every web browser now have local cache. But still the browser need to check with the web server if there are any change in the content before load it from the cache. It still consume resource.

Now shift to the server point of view, the Web Server and application server. Even a little size squeeze in the HTML output will give a significant resource savings in every part of the infrastructure which process it.

Let say 300Kb HTML page loading for 1 request. What if there were 100 connection, 10k connection. The number become large enough and can become serious bill in the end of the month.

Some developer say bandwidth is cheap, CPU is cheap, but i don't agree with this after reading a book "Release IT" . I remember the CPU cost is cheap told in a Framework community in CakePHP for the excuse of slow performance framework. That not said the PHP language slowliness compared to other language.

So what can we do to improve our web application loading. What i have done is remove all white space in the HTML. All the unneeded white space, tabs, new line, can give significant improvement in size delivered by your server.

Only from white space and new line also tabs, which is common in HTML page to be used and created by Developer and designer, from 200Kb trimmed into 150Kb size. 50Kb is a lot if you serving 10k connections from your web servers.

So what is the tools out there to be use, here are some of my tools i found be useful :

1. Use Htmlmin from Grunt package
   What is Grunt, it will be another topics to blog. It ease the work of you as developer. Smart developer are lazy for sure. In Grunt there were many package for this type of work. One is Htmlmin
2. Use Cssmin from Grunt package
   Besides trimming HTML file, you can also trimming CSS files in your web application.
3. Activate Gzip compression in your WebServer
   In NGINX you can activate the Gzip module so it will sent a compressed file to the browser, and most modern browser support this. More bandwidth to save and make your web application loading faster
4. Remove Hidden White space image
   Many web designer use image for a white space, use &nbsp which is more small bytes to use.

Even the bandwidth and CPU is more cheaper, there is no excuse to not optimize every bit of the infrastructure. Bigger file in web application means bigger memory to load the application, more CPU cycles in processing, more time in user waiting the application to load, and waste more money.

So try to make improvement in every aspect of the application. It worth a lot even your application only have small user, but will serve better when your site get slashdotted.

Posted in: WebDesign