12,064,498 members (57,008 online)
Here's a graph that shows how each request latency adds up and introduces significant delay in page loading:
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.
Instead of these individual
<script> tags, you can use only one
<script> tag to serve the whole set of scripts using an Http Handler:
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.
HttpHandler, you can deliver CSS as well:
<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
<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>
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
<script> tag via the
Here's the content of the Default.aspx:
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
Files that belong to these two sets are defined in the
Here's how the handler works:
Benefits of the handler:
First the handler reads the set, type and version to use from the query string:
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 is compressed using GZipStream if browser supports compressed output.
After combining all the files and compressing it, the combined bytes are cached so that subsequent requests can be directly served from cache.
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.
How to use this handler::
HttpCombiner.ashxin your project
<appSettings>section of your
<script>tags throughout your website to point to
HttpCombiner.ashxin this format:
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.