Click here to Skip to main content
15,867,906 members
Articles / Web Development / XHTML
Article

HTTP Handler to Combine Multiple Files, Cache and Deliver Compressed Output for Faster Page Load

Rate me:
Please Sign up or sign in to vote.
4.89/5 (64 votes)
28 Aug 2008CPOL5 min read 261.5K   191   56
An HTTP handler that combines multiple CSS, JavaScript or URL into one response for faster page load. It can combine, compress and cache response which results in faster page load and better scalability of web application

Introduction

It's a good practice to use many small JavaScript and CSS files instead of one large JavaScript/CSS file for better code maintainability, but bad in terms of website performance. Although you should write your JavaScript code in small files and break large CSS files into small chunks, when a browser requests those JavaScript and CSS files, it makes one HTTP request per file. Every HTTP request results in a network roundtrip from your browser to the server and the delay in reaching the server and coming back to the browser is called latency. So, if you have four JavaScripts and three CSS files loaded by a page, you are wasting time in seven network roundtrips. Within the USA, latency is average 70ms. So, you waste 7x70 = 490ms, about half a second of delay. Outside USA, average latency is around 200ms. So, that means 1400ms of waiting. The browser cannot show the page properly until CSS and JavaScripts are fully loaded. So, the more latency you have, the slower the page loads.

How Bad is Latency

Here's a graph that shows how each request latency adds up and introduces significant delay in page loading:

image_16.png

You can reduce the wait time by using a CDN. Read my previous blog post about using CDN. However, a better solution is to deliver multiple files over one request using an HttpHandler that combines several files and delivers as one output. So, instead of putting many <script> or <link> tags, you just put one <script> and one <link> tag, and point them to the HttpHandler. You tell the handler which files to combine and it delivers those files in one response. This saves browser from making many requests and eliminates the latency.

image_18.png

Here you can see how much improvement you get if you can combine multiple JavaScripts and CSS into one.

In a typical web page, you will see many JavaScripts referenced:

JavaScript
<script type="text/javascript" src="http://www.msmvps.com/Content/JScript/jquery.js">
</script>
<script type="text/javascript" src="http://www.msmvps.com/Content/JScript/jDate.js">
</script>
<script type="text/javascript"
    src="http://www.msmvps.com/Content/JScript/jQuery.Core.js">
</script>
<script type="text/javascript"
    src="http://www.msmvps.com/Content/JScript/jQuery.Delegate.js">
</script>
<script type="text/javascript"
    src="http://www.msmvps.com/Content/JScript/jQuery.Validation.js">
</script>

Instead of these individual <script> tags, you can use only one <script> tag to serve the whole set of scripts using an Http Handler:

JavaScript
<script type="text/javascript" 
    src="HttpCombiner.ashx?s=jQueryScripts&t=text/javascript&v=1" >
</script>

The HTTP Handler reads the file names defined in a configuration and combines all those files and delivers them as one response. It delivers the response as gzip compressed to save bandwidth. Moreover, it generates a proper cache header to cache the response in the browser cache, so that, the browser does not request it again on future visits.

In the query string, you specify the file set name in the "s" parameter, then the content type in the "t" parameter and a version number in "v" parameter. As the response is cached, if you make changes to any of the files in the set, you will have to increase the "v" parameter value to make browsers download the response again.

Using this HttpHandler, you can deliver CSS as well:

HTML
<link type="text/css" rel="stylesheet"
 href="HttpCombiner.ashx?s=CommonCss&t=text/css&v=1" ></link>

Here's how you define the sets in web.config:

<appSettings>
    <add key="jQueryScripts" 
        value="~/Content/JScript/jquery.js,
            ~/Content/JScript/jDate.js,
            ~/Content/JScript/jQuery.Core.js,
            ~/Content/JScript/jQuery.Delegate.js,
            ~/Content/JScript/jQuery.Validation.js"    
    />
    <add key="CommonCss"
        value="~/App_Themes/Default/Theme.css,
            ~/Css/Common.css,
            ~/Controls/Grid/grid.css"
    />
</appSettings>

Example Website that Uses HttpCombiner

I have made a simple test website to show you the use of HttpCombiner. The test website has two CSS and two JS files. The default.aspx requests both of them using only one <link> and <script> tag via the HttpCombiner.ashx.

image_4.png

Here's the content of the Default.aspx:

image_12.png

Here you see, there's one <link> tag sending a request to HttpCombiner.ashx to deliver the set named Set_Css and a <script> tag asking for a set Set_Javascript.

Files that belong to these two sets are defined in the web.config file:

image_30.png

Here's how the handler works:

  • First it reads the file set name passed in the "s" parameter
  • Then it gets the files defined in the web.config for the set
  • It reads individual files and stores in a buffer
  • The buffer is then gzip compressed
  • The compressed buffer is sent to the browser
  • The compressed buffer is stored in ASP.NET cache so that subsequent requests for the same set can be directly served from cache without reading the individual files from file system or external URL

Benefits of the handler:

  • It saves network roundtrip. The more files you can put in one set, the more you save in network latency. This improves performance.
  • It caches the total combined response as compressed and thus saves reading file from file system and compressing it again and again. This improves scalability.

How the HttpHandler Works

First the handler reads the set, type and version to use from the query string:

image_20.png

If the set has already been cached, the it's written directly from cache. Otherwise the files in the set are loaded one by one and stored in a MemoryStream. The MemoryStream is compressed using GZipStream if browser supports compressed output.

image_22.png

After combining all the files and compressing it, the combined bytes are cached so that subsequent requests can be directly served from cache.

image_24.png

The GetFileBytes function reads a file or URL and returns the bytes. So, you can use Virtual Path to files within your website or you can use URL to external Javascript/CSS files hosted on another domain.

image_26.png

The WriteBytes function has much wisdom in it. It generates a proper header based on whether the bytes are in compressed form or not. Then it generates proper browser cache header to make browser cache the response.

image_28.png

How to use this handler::

  • Include the HttpCombiner.ashx in your project
  • Define the file sets in the <appSettings> section of your web.config
  • Change <link> and <script> tags throughout your website to point to HttpCombiner.ashx in this format:
    HttpCombiner.ashx?s=<setName>&t=<contentType>&v=<versionNo>

Conclusion

That's it! Make your website faster to load, get more users and earn more revenue.

You should also read my earlier articles about deferring and combining script loading for faster perceived speed and how to make best use of browser cache.

License

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


Written By
Architect BT, UK (ex British Telecom)
United Kingdom United Kingdom

Comments and Discussions

 
GeneralNot working with Url Rewriting Pin
Ravenet25-Dec-09 0:09
Ravenet25-Dec-09 0:09 
GeneralRe: Not working with Url Rewriting Pin
Omar Al Zabir25-Dec-09 0:13
Omar Al Zabir25-Dec-09 0:13 
GeneralRe: Not working with Url Rewriting Pin
Ravenet25-Dec-09 0:28
Ravenet25-Dec-09 0:28 
GeneralRe: Not working with Url Rewriting Pin
Ravenet25-Dec-09 0:43
Ravenet25-Dec-09 0:43 
GeneralMinify and obfuscate with YUI Compressor Pin
Kellros5-Oct-09 1:59
Kellros5-Oct-09 1:59 
QuestionCannot update file after caching Pin
Member 53116015-Sep-09 4:17
Member 53116015-Sep-09 4:17 
AnswerRe: Cannot update file after caching Pin
Omar Al Zabir15-Sep-09 5:42
Omar Al Zabir15-Sep-09 5:42 
GeneralRe: Cannot update file after caching Pin
Member 53116015-Sep-09 6:17
Member 53116015-Sep-09 6:17 
Hi Omar,
I did try to change version. Initially I was using version number like 2009.09.14.05 and did not work. Then I changed version number like 22 (two digit number) and still same problem. Basically my intention was that if I change file in future then I can change version number to 2009.09.15.01 (today's date 2009.09.15.xx) so I don't get caching problem. You think using version number like 2009.09.14.05 causing problem? And if so, how can I remove from cache and refresh with updated file manually?

I appreciate for your quick response.
Let me know.

Best,
ubuser
GeneralMedium Trust Pin
Zach Floyd4-Sep-09 6:21
Zach Floyd4-Sep-09 6:21 
QuestionWhat is the difference between Scripts.ashx & HttpCombiner.ashx? Pin
Member 19851656-Jun-09 0:00
Member 19851656-Jun-09 0:00 
Generalfirefox 3 issues with combining CSS files Pin
swyche6-Feb-09 5:51
swyche6-Feb-09 5:51 
GeneralRe: firefox 3 issues with combining CSS files Pin
komemi4-Jan-10 9:17
komemi4-Jan-10 9:17 
GeneralDynamic list of files Pin
User 4886918-Jan-09 22:35
User 4886918-Jan-09 22:35 
GeneralUnable to download the code Pin
maxcom5-Dec-08 22:22
maxcom5-Dec-08 22:22 
QuestionHow to implement your code if using friendly adapters and ajax net framework? Pin
Member 325727511-Sep-08 12:58
Member 325727511-Sep-08 12:58 
GeneralReal Great Pin
cwp424-Sep-08 22:23
cwp424-Sep-08 22:23 
QuestionAre there any benchmarks? Pin
Filipe Martins3-Sep-08 5:43
Filipe Martins3-Sep-08 5:43 
AnswerRe: Are there any benchmarks? Pin
Omar Al Zabir4-Sep-08 1:24
Omar Al Zabir4-Sep-08 1:24 
GeneralBackground Images Pin
novelProjects3-Sep-08 3:41
novelProjects3-Sep-08 3:41 
QuestionHow about including Javascript and CSS compressor/minifier/obfuscator ? Pin
seaplanner3-Sep-08 0:09
seaplanner3-Sep-08 0:09 
GeneralCombine CSS with many different themes Pin
Guillaume342-Sep-08 3:06
Guillaume342-Sep-08 3:06 
GeneralRe: Combine CSS with many different themes Pin
mmengel8-Sep-08 5:50
mmengel8-Sep-08 5:50 
GeneralDevelopment Process Pin
Member 31061881-Sep-08 4:03
Member 31061881-Sep-08 4:03 
GeneralMicrosoft JScript runtime error object expected Pin
Member 310618831-Aug-08 7:40
Member 310618831-Aug-08 7:40 
GeneralRe: Microsoft JScript runtime error object expected Pin
Member 31061881-Sep-08 3:40
Member 31061881-Sep-08 3:40 

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.