Improving performance by using JSMin and YSlow

Introduction

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:

If you click on the link named "All JS", it will open a new 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.

We can use JSMIN in order to decrease its file size. You can see it by looking at the following image.

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.

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.

Conclusion

As you can see it is not hard to give your web site some features to make it better. Much more improvements can be applied. What I'd say would be the following: try to apply one by one, don't try to work all YSlow rules at a time. Select the best one according your needs and your skills.

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPL)

About the author