Click here to Skip to main content
Click here to Skip to main content

Compressing Script Files using GZIP

, 30 May 2013
Rate this:
Please Sign up or sign in to vote.
How to compress JavaScript and CSS files in a web application to reduce page loading time, using GZIP.

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:

Uncompressed JS files

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.

Compressed

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

K K Kodoth
Software Developer (Senior)
United States United States
Currently working as Systems Analyst in a Leading MNC in India,
I love writing what i know about and learning from the mistakes which i make...

Comments and Discussions

 
Questioncompress js PinmemberMember 1048795125-Dec-13 23:02 
GeneralMy vote of 5 PinmemberMember 378807230-May-13 2:37 
GeneralMy vote of 5 Pinmembersreerajs160030-May-13 2:35 
GeneralMy vote of 5 Pinmemberfelix maximus30-May-13 1:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140718.1 | Last Updated 30 May 2013
Article Copyright 2013 by K K Kodoth
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid