Once you've implemented all your JavaScripts files you can define a link in your HTML code in order to let it to be downloaded via browser. This is obvious.
At first glance you could create many links for each library that you've coded. You should know it would add an overhead because you would have unnecessary HTTP requests.
Let's follow YSlow's rules!
One of the rules of YSlow is to minimize the HTTP requests.
What would you do in order to follow this rule?
The first thing that I've done was putting all JS Scripts in the same file.
It can be done by using the YSlow plugin on the Firefox.
If your page has more than one JavaScript, YSlow will get all them and ouput as a unique file. So, you would be making fewer HTTP requests now!
You can see it on the following image:
YSlow in action
If you click on the link named "All JS", it will open a new browser window and show you all JavaScripts together. So, you're able to get its content and save in a file.
If you are using ASP.NET AJAX you have to remove all Ajax JavaScript content from the generated file.
If you don't do that, all of libraries will be requested twice because they are automatically put in the page via ASP.NET AJAX.
So, You've create just one file that has all of your JavaScript's needs. Is everything right?
If so, you've followed just the first YSLow rule: 1: Minimize HTTP Requests
You can now go to the 10th rule: Minify JavaScript. To do that you can use JSMIN.
As its documentation says "JSMin is a filter which removes comments and unnecessary whitespace from JavaScript files. It typically reduces filesize by half, resulting in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate self-documentation.".
So, now you can reduce the file size of your JavaScript file.
It can be used in many programming languages as you can see on the download page.
We're going to use in C#. It can be downloaded by taking a look at this page: JSMIN in C#. You will see a C# code that can be compiled in your machine after downloading.
After that, you're able to execute it and generate a new JavaScript file from the one created via YSlow.
Take a look at the following image and see the file size from my JavaScript file.
The first file size
We can use JSMIN in order to decrease its file size. You can see it by looking at the following image.
JSMIN in action
The first parameter is the original file name (in red), the second one is the file name that will be minified (created) by JSMIN.
After this command is complete you can now see how good JSMIN for decreasing JavaScripts files is.
the file size has drecreased
Wow! the file size has decreased a lot. From 97KB to 54 KB!
You could learn that both YSlow and JSMIM can improve the web site's performance according to YSlow's rules.
Other things you still can do is GZip and add an expire header to this file. I'll explain how to do it on the next posts.