To load a web page faster, we should minify the scripts used that are responsible for displaying that page and for any event action, that is, minify CSS and JavaScript as much as possible. The process of removing unwanted characters, such as whitespaces, newline, and comment, which don't alter its functionality is termed as minification.
Minified code is very efficient and makes the website faster, when deployed over the Internet. Minifying the code is required for JavaScript, CSS, and even HTML.
The compression ratio mostly depends upon the removal of comments, whitespaces, and block delimiters that are used, which may go up to a 60-percent compression ratio in a best scenario.
Use external script as much as possible for JavaScript, that is:
<script src = "path-to-javascript-files" type = "text/javascript"></script>
For CSS scripts, use the following code snippet:
<link rel="stylesheet" href="path-to-css-file" type="text/css" />
Minify each JavaScript file manually or by using any of the following ways:
Using online JavaScript minifier tools such as JSCompress.com (http://jscompress.com/), Packer (http://dean.edwards.name/packer/).
In case of CSS scripts, use csscompressor (http://www.csscompressor.com/).
Using third-party tools such as yuicompressor (http://yui.github.com/yuicompressor/) by Yahoo!, Microsoft Ajax Minifier (http://ajaxmin.codeplex.com/) by Microsoft, jsmin (http://crockford.com/javascript/jsmin), or Minify (http://code.google.com/p/minify/).
The same works for CSS scripts, with tools used such as yuicompressor (http://yui.github.com/yuicompressor/) by Yahoo!, minify, and CSSTidy (http://csstidy.sourceforge.net/).
The last option could be to minify and combine all JavaScript code or CSS script into one file.
When you try to minify CSS it will remove comments, whitespaces, and will merge all duplicate properties. If you use CSSTidy to minimize CSS scripts, the following things will be taken care of. For example, consider the following code:
a{
property:x;
property:y;
} This code becomes a{property:y;}, where all duplicate properties are merged.
Next, consider margin:1px 1px 1px 1px;, which will become margin:1px;.
The rest goes on in the same manner, with margin:0px; becoming margin:0;, a{margin-top:10px; margin-bottom:10px; margin-left:10px; margin-right:10px;} becomes a{margin:10px;}, margin:010.0px; becomes margin:10px;, and so on.
We often try to minimize the size of the scripts, which would not only reduce the number of bytes downloaded but would also reduce the number of requests sent to the server, which usually makes it more efficient and loads the page faster.
Let's analyze the web page before minifying any scripts using the browser-plugin YSlow (http://developer.yahoo.com/yslow/) powered by Yahoo!, which suggests to you the best way to load the web page faster by analyzing all important web optimization factors that we would cover in this book.
I assume that you are using either Firefox or Safari or Opera or Chrome to analyze the web page. On these browsers you will find the YSlow add-on shown at the bottom-right corner with a speedometer icon. Once you click on the icon, you will see something like the following screenshot (I am using Firefox for this purpose):
Now, click on Run Test to analyze any desired website. I am testing www.aliencoders.com here and the result shows Grade D with all other details, as shown in the following screenshot:
It analyzes the top 23 web optimization techniques and grades them individually. It even suggests solutions to fix such issues.
So, minimize all your JavaScript and CSS files using the previously mentioned steps and combine all JavaScript files into one file and follow the same for all CSS files as well.
Note
The minified jQuery (http://code.jquery.com/jquery-1.9.1.min.js) file size is 90.4 KB, while and the simple jQuery (http://code.jquery.com/jquery-1.9.1.js) script bears the same content, but with a file size of 271 KB.
Minifying scripts has several advantages:
Users can quickly download all minified files, which are now smaller in size
Bandwidth consumption of the website will be reduced
Combining various JavaScript files or CSS files into one single file will also reduce a number of HTTP requests to the server, which in turn will allow more users to access the website faster
Comments, whitespaces, block delimiters, and so on are not particularly required for JavaScript or CSS execution, so it will surely enhance execution time by manifolds
Minify will combine multiple CSS or JavaScript files into one CSS or JavaScript file respectively with all other minified concepts being implemented. It even serves them with the gzip encoding technique.
The Microsoft Ajax Minifier (http://ajaxmin.codeplex.com/) includes the following components:
ajaxmin.exe: This is a command-line tool for minifying JavaScript filesajaxmintask.dll: This is an MSBuild task for minifying JavaScript files in a Visual Studio projectajaxmin.dll: This is a component that you can use in your C# or VB.NET applications to minify JavaScript files
You can add the Microsoft Ajax Minifier as a custom MSBuild task to a Visual Studio project, which will allow the user to automatically minify all of the JavaScript files under the mentioned project.
Note
Apart from minimizing JavaScript or CSS, one can even obfuscate the source code but it's a bit complex than minification, and there are more chances that you introduce bugs rather than making an efficient, functional website. So, use the obfuscation technique at your own risk.
Don't confuse the minification technique of the scripts with the more general data compression technique. The minified script can be interpreted and executed immediately without any uncompressing application and interestingly the same interpreter can work with both the original and the minified source, yielding the same result.