and trying to enhance database performance. The goal behind all of these complicated actions is the ultimate goal: A Faster Site.
These actions are necessary and handy to decrease your site response time, however, there are a lot of stuff that we, developers, usually ignore. Those are the optimizations required to happen on the client side. These client side optimizations are as important (probably more imprtant) as the server side optimizations.
There are a lot of techniques to optimize the client side performance. These techniques include:
- Making Less HTTP Requests
- Optimizing CSS
And many more. For full details about all the possible techniques, check out Google's page speed initiative.
Now suppose that I have an html document that looks like the following:
This document shall do a very little job actually. Simply a user keys his name in the textbox and clicks salute me which we will display a simple alert saying hello to this user.
Below are two buttons -hide, and show. As the name of each button implies, the hide button will hide the area including the label, text box, and the Salute me button.
To do this I'm gonna make use of jQuery 1.3.2. Here's the code needed to achieve the required functionality:
Now let's run Closure Compiler and try to minify this.
Closure Compiler is a java application, which means that you will need jre (Java Runtime Engine) to run it. You can download it from here
Now I got my files (sample.html, script.js, compiler.jar) in one directory. To run the compiler, launch your terminal, and enter the follwoing command:
java -jar compiler.jar --js script.js --js_output_file scriptMini.js
Check your directory. You should find a new file with the name "scriptMini.js" created. The new script file is 55 KB in size, which is less the half size of the original file. To make sure it's working, change the script src attribute in the sample document to point to the new file. You should see that the app is still functioning properly.
If you examin the newly created file, you will find that it doesn't contain any comments or spaces, all the optional semi-colons are removed, variable names are changed to shorter names (usually one character long).
The closure complier is a fascinating tool, it's really handy and easy to use.