Click here to Skip to main content
15,116,354 members
Articles / Web Development / CSS
Posted 30 May 2013


12 bookmarked

Compressing Script Files using GZIP

Rate me:
Please Sign up or sign in to vote.
4.67/5 (5 votes)
30 May 2013CPOL3 min read
How to compress JavaScript and CSS files in a web application to reduce page loading time, using GZIP.


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.


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.

Image 2

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

Image 3

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:

Image 4

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.


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.


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


About the Author

KK Kod
Software Developer (Senior)
United States United States
Currently working as Application Development Consultant in USA
I love writing what i know about and learning from the mistakes which i make...

Comments and Discussions

QuestionHow to compress .css ? Pin
Ja-ck-al29-Aug-18 20:20
MemberJa-ck-al29-Aug-18 20:20 
GeneralComment Pin
Member 1222065422-Dec-15 0:25
MemberMember 1222065422-Dec-15 0:25 
Questioncompress js Pin
Member 1048795126-Dec-13 0:02
MemberMember 1048795126-Dec-13 0:02 
GeneralMy vote of 5 Pin
Member 378807230-May-13 3:37
MemberMember 378807230-May-13 3:37 
GeneralMy vote of 5 Pin
sreerajs160030-May-13 3:35
Membersreerajs160030-May-13 3:35 
GeneralMy vote of 5 Pin
felix maximus30-May-13 2:59
Memberfelix maximus30-May-13 2:59 

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

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