Compress and Cache the CSS and JS file using ASP.NET

Posted by Venkat | Labels: ,

HTTPCombiner
Credit goes to : http://code.msdn.microsoft.com/HttpCombiner

In 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.

It has one file ie: HTTPCombiner.ashx - to Compress the CSS and JS file.Place the file on your project.
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/

Compressing Asp.Net Pages

Posted by Venkat | Labels: ,

Good Evening to All.
Here I am going to cover how to compress the .aspx pages.
so there are no.of ways to compress the pages in asp.net
1) using IIS.
2) using Code ie: through HTTPCompress.dll i got the source code from codeproject.com.
so i am going to share with you.
There are two type of Compression ie: Deflate , GZIP. here i am going to use GZIP compression to compress the asp.net pages.
First Place the DLL file ie::HTTPCompress.dll to the Bin folder of your project.
Then you have to include some tag on web.config file

<configsections>
  <sectiongroup name="Flanders">
   <section name="HttpCompress" type="Flanders.Library.Modules.HttpCompress.Configuration, HttpCompress">
  </section>
 </sectiongroup>
<flanders>
  <httpcompress compressiontype="GZip">
   <excludedpaths>
    <add path="NoCompression.aspx">
   </add>
   <excludedmimetypes>
    <add mime="image/jpeg">
   </add>
  </excludedmimetypes></excludedpaths>
</httpcompress>
</flanders>
</configsections>
Here i am using GZiP Compression technique. there are two more inner Tags ie: ExcludePaths, ExcludeMimeTypes.
ExcludePaths - It includes the Page Name that don't want to compress.
ExcludeMimeTypes - Include the mime types that dont want to compress the images..
By default images are compressed so no need to compress the image while using compression so our ExcludedMimeTypes tag should be like this.

<excludedmimetypes>
  <add mime="image/jpeg">
  <add mime="image/jpg">
  <add mime="image/png">
  <add mime="image/gif">
</add>
</add>
</add>
</add>
</excludedmimetypes>
Finally we need to add the httpModules

<httpmodules>
   <add> name="HttpCompressModule" type="Flanders.Library.Modules.HttpCompress.HttpModule,HttpCompress"/>
 </add>
</httpmodules>
Download Source Code

Credit goes to :
Ref: http://www.codeproject.com/KB/aspnet/HttpCompress.aspx

PayOffers.in