Microsoft ASP.NET is today the most powerful and fastest growing platform for Web development. ASP.NET powers some of world's largest Web sites and most demanding applications. And now, ASP.NET 4.5 can optimization your website performance.

Typical web site contains CSS files, Images and Javascript files along with you HTML elements. CSS files, Images and JS files will take some time to load into the browser though the loading time is in milliseconds but matters. The HTML is not taking much time but other elements are taking time to load in to the browser. The Typical ASP.NET web site might look like as below in Visual Studio. It may contain Scripts  folder, Images Folder, Styles Folder and a Default aspx page.

The first problem that we can see that too many HTTP requests which are going to images, CSS files and to JavaScript files.

ASPHostPortal.com is Microsoft No #1 Recommended Windows and ASP.NET Spotlight Hosting Partner in United States. Microsoft presents this award to ASPHostPortal.com for ability to support the latest Microsoft and ASP.NET technology, such as: WebMatrix, WebDeploy, Visual Studio 2012, ASP.NET 4.5, ASP.NET MVC 4.0, Silverlight 5 and Visual Studio Lightswitch. Click here for more information

We can use Bundling and Minifying the files to reduce those requests. In ASP.NET 4.5 you have the built-in features to these. Write one line of code in Global.asax to bring these HTTP Requests down.

The above line enables the minification for CSS and Javascript files, only these two. Minifying means removing whitespaces, comments and everything that browser does not need to understand. We can really compress these files using this technique.

Basically this bundling technique looks at the folder and takes all the files inside and bundles them into one file, no matter how many are in the folder. This all happens at runtime. It only happens at once.

The order of bundling of your files goes as first it takes all Jquery scripts first and then it takes custom scripts alphabetically from your solution explorer.

Instead of doing the references to individual files, You can do this

Styles/CSS is the convention. Folder name / CSS bundles all the css files on that folder. We can do the same foe JavaScript like this

Suppose if you want to bundle the files by taking from different directories in

In above code we are registering our own bundle named mycss and then we are adding file styles.css and a directory styles.

Compress components with gZip. we can enables this on IIS. You tell the server everything that respond to client that text based zip it. You can do this by changing the couple of attribute values in web.config file

In IIS 7.5 it enables for you by default, if you running on windows server 2008 then you need to set the attribute values to true.

Encoding the Images to Base64 Images

Above code shows before and after encoding the image.

You may not want to encode all images in your project but if you want the images that you want to embed along with style sheets then you can write some regular expressions as shown below.

We can even transform your response further using coffee script as shown below

You can optimize the images in your folder by using Visual Studio extension tool named Optimize Images and then you can refresh folder and compile.