HttpCombiner - combine, compress and cache multiple CSS, Javascript or URL

NEW POST: Feedback

AhShawky — Tue, 06 Oct 2009 09:48:02 GMT

yea ; its success with me
and it make me to load more than 5 JS files in one request and one response ,
it improve the performance of my application and reduced http requests and size

NEW POST: Url gets encoded while requesting the server.

AnkushBindlish — Tue, 15 Sep 2009 08:58:52 GMT

Usage

<link type="text/css" rel="Stylesheet" media="all" href="HTTPCombiner.ashx?s=CSS_KEY&t=text/css&v=1" />

Problem 1

http://mysite.com/HTTPCombiner.ashx?s=CSS_KEY& amp;t=text/css& amp;v=1 - which doesn't work.

Please read & amp; as without space.

Thanks in advance
Ankush

NEW POST: strange characters when combining files

Cris — Thu, 02 Jul 2009 16:51:35 GMT

Hi, I’m trying to use the handler with no success. It keeps writing these strange characters at the beginning of each combined file. I guess it has something to do with encoding / BOM, because of the sequence ï»¿ but I can’t figure it out how to fix it. Here’s some sample output:

.selsort { background: #fef63b; border:1px solid #8aa5bf; margin-left:10px; } .selprod { background: #fef63b none repeat scroll 0 0; border:1px solid #8aa5bf; font-weight: bold; } #checklens { border-right:1px solid #000; border-left:1px solid #000; padding:0 10px; color: #000; font-weight: bold; } #checknew { border-right:1px solid #000; padding:0 10px 0 0; color: #000; font-weight: bold; } .color-n7 { height:1px; border-color: #f0e837; border-style:solid none; border-width:1px 0; clear:both; margin: 0 12px; } .new-line { clear: both; } .float-left { float:left; }ï»¿.pre-gateway { margin:2px 5px;} #by { margin-right:-14px;} #by, .pre-gateway, .srch { float:right; } #adv {float:inherit; } .isrch {cursor:pointer;} #srch2, #srch3 {margin-right:20px} .checklens { border-right:1px solid #000; border-left:1px solid #000; padding:0 10px; color: #000; font-weight: bold; } .checknew { border-right:1px solid #000; padding:0 10px 0 0; color: #000; font-weight: bold; } #dvPgs { width:100%; height:100%; position:relative; display:none; text-align:center; vertical-align:middle; } ï»¿

Thanks in advanced

NEW POST: Thanks for the great tool

bebonham — Fri, 10 Apr 2009 18:30:06 GMT

This was so quick and easy to integrate into our website. The example you provided made it super easy to undertand what was going on
Thanks,
Bob Bonham

NEW POST: Feedback

johnsons — Fri, 19 Dec 2008 17:13:27 GMT

Has anyone had success with this?

NEW POST: JScript file - jQuery also loaded, cool

RBC — Sat, 13 Sep 2008 17:39:20 GMT

Hi,

I like to move all JScript code outside of my web page.

How do I move the code below to the JScript file also in this sample?

<script type="text/javascript">
$(function()
{
$("#jquery").html("jQuery also loaded, cool!");
});
</script>

1) I removed the present code from my web page
2) I created a new JScript file; moved this code into the JScript file:
$(function()
{
$("#jquery").html("jQuery also loaded, cool!");
});
3) Added the JScripte file in Web.Config
4) Run the code and got following error:
JScriptTextC.js http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' is not a valid virtual path.
5) I assume the error reference to my clde left in my web form: <p id="jquery"></p>

It look like it some problem with: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
Because I still have the same problem after restore my old code...
But I still like to move the code to JScript file...

I also need help to select the CSS and JScript file; otherwise the sample include all files in the web.config.
Below I need to pick the JScript and CSS file by Name

<script
type="text/javascript"
src="HttpCombiner.ashx?s=Set_Javascript&t=type/javascript&v=09" >
</script>

<link type="text/css"
rel="Stylesheet"
href="HttpCombiner.ashx?s=Set_Css&t=text/css&v=09" />

Thank you,
Rune

UPDATED WIKI: Home

oazabir — Thu, 28 Aug 2008 22:18:52 GMT

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

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 but when browser requests those javascript and css files, it makes one Http request per file. Every Http Request results in a network roundtrip form 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 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. Browser cannot show the page properly until Css and Javascripts are fully loaded. So, the more latency you have, the slower page loads.

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> tag, 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.

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

Read this post for details:
http://msmvps.com/blogs/omar/archive/2008/08/28/http-handler-to-combine-multiple-files-cache-and-deliver-compressed-output-for-faster-page-load.aspx

RELEASED: HttpCombiner v1 (Aug 29, 2008)

Thu, 28 Aug 2008 21:56:44 GMT

CREATED RELEASE: HttpCombiner v1 (Aug 29, 2008)

Thu, 28 Aug 2008 21:56:44 GMT

UPDATED WIKI: Home

oazabir — Thu, 28 Aug 2008 21:55:48 GMT