Compressing Script Files using GZIP

• Download source code

Introduction

With this tip, I have tried to share my experience with my friends on how to compress multiple JavaScript files and CSS files into a single file and send to the client browser. By doing this, we can improve the performance of page loading in the browser.

Background

For the past couple of weeks, I was working with JavaScript, CSS and jQuery extensively. I was using Chrome developer tool to debug (which I felt comfortable), and by the time I clicked the network tab of the Chrome developer tool, I found that a lot of JavaScript file requests are going to the server because of the number of JavaScript files. I noticed that a considerable amount of time is taken to load each and every JS and CSS file to the client browser. From that time, I thought of reducing the file-load time which in turn reduces the page-load time. This took me to an existing solution to compress the JS and CSS files using GZIP, and send that compressed file to the client browser in lesser time.

Using the Code

What I saw when I checked the network tab is displayed in the below image:

From the above image, you can see that more than 20 JavaScript scripts are loaded in my application page and also the time taken to load those files and the size of the files displayed. To reduce this, I have employed an HTTP Handler which compresses all the JavaScript files into one and sends to the client as only one single file except WebResource.axd which you see above.

What do we have to do to get this implemented?

First, we have to specify the JS files to be compressed in the Web.config file as CSV instead of specifying each and every file separately.

Change the above type specifying the JS files in Pages to web.Config file as below:

We have to call the Handler from the page in which we would like to use the JS file mostly in Master pages as shown below:

The Handler will read the JS files, then compress them using GZipStream and send back to the client browser. See the below image which is the result of compression.

You can see only one call to the HttpCombiner handler .. that is the request which combines all the files and sends back to the client browser. If you compare the loading time and size of the file, it might be 1/4 of the exact.

Conclusion

I suggest using this mechanism to those who are using JS and CSS files extensively. To implement this, I have also done a Google search and found the handler doing the compression. I have tried to show the power of GZIP compression what I got during testing and I found this very helpful.

I am also attaching a link to the handler which I used to implement this mechanism. You can also use this same Handler to implement this by doing the above mentioned modifications.

And a big thanks to the guy who wrote this Handler.