Compress and Cache the CSS and JS file using ASP.NET
HTTPCombiner
Credit goes to : http://code.msdn.microsoft.com/HttpCombinerIn my last article i have discussed how to compress .aspx pages. Now we are going to see how to compress the Javascript and CSS file.
Once the JS and CSS file is requested to the server and has been Cached. On next time You get it from Cache.If i have 10 Javascript file and 10 Stylesheets , every time when you request the page - each time it requested the server for JS and CSS file ie: 10 request to server for CSS and 10 request to Server for JS, to avoid the issue we have to combine all the CSS as one file and all JS as one file. Therefore only one request is sent to the server to get the JS file so totally two request has been sent to the server one for JS and CSS.
There is some JS and CSS compressor tools available for free, these tools will compress or minify your JS or CSS file this is the one waybut we have to do manually.
If you want to compress the file at runtime, here i am using HTTPCombiner to make the all the CSS as 1 CSS and all the JS and 1 JS file.
Add these two line to include all your Css and Js file on your appSettings tag on your web.config, You can get the file name using key part of the appSettings.
<add key="Set_Css" value="App_Themes/Default/Css1.css,App_Themes/Default/Css2.css"/> <add key="Set_Javascript" value="Javascripts/Js1.js,Javascripts/Js2.js, http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"/>
After that you have to give the cSS and JS path on the Page1.aspx.
<link type="text/css" rel="Stylesheet" href="HttpCombiner.ashx?s=Set_Css&t=text/css&v=1" /> <script type="text/javascript" src="HttpCombiner.ashx?s=Set_Javascript&t=type/javascript&v=2" > </script>
Thats all, now you upload the file to server and check the JS,CSS file compressed (check the file length before and after applying this technique) using Fiddler tool or any other tools.
These are some tools to check Page response time.
http://www.aptimize.com/
http://websiteoptimization.com/services/analyze/
http://www.fiddler2.com/
Read more »