Optimizing ASP.NET Web application performance through Bundling and Minification Part-1


In this article I am going to cover Bundling part. Bundling helps us to minimize the number of HTTP requests sent from browser to improve ASP.NET web page performance. Minification will be covered in Part-2.

Bundling



Usefullness


ASP.NET 4.5 framework introduced some of the new features to improve the performance of web sites, Bundling is one of those which is provided in library System.Web.Optimization. Bundling enables us to combine multiple JavaScript or CSS files into one bundle and thereby reducing the number of HTTP requests which in turns improves performance of the site. Important thing about bundling is that you have to set compilation elements debug attribute to "false" from web.config to enable bundling.

Set Up


To install Microsoft ASP.NET Web Optimization Framework, run the following command in the Visual Studio Tools==> Library Package Manager==> Package Manager Console
PM> Install-Package Microsoft.AspNet.Web.Optimization

After this you can see that System.Web.Optimization.dll reference is added to your solution.

Code


Add some of the .js files to your solution.

Solution Explorer:


Solution Explorer

Web.config:



<system.web>
<compilation debug="false" />
</system.web>


Global.asax:


First you need to register bundles in Global.asax.

protected void Application_Start(object sender, EventArgs e)
{
/* Here I am creating a bundle of .js files */
/* You can directly create ScriptBundle for script files or StyleBundle for .CSS files */
Bundle a = new Bundle("~/bundle/js");
a.Include("Scripts/jquery-1.7.1.js");
a.Include("Scripts/jquery-1.7.1.min.js");
a.Include("Scripts/jquery-ui-1.8.20.js");
a.Include("Scripts/jquery-ui-1.8.20.min.js");
/* You can directly add all these .js files in a bundle using a single line as follows
a.Include("~/Scripts/*.js");*/

BundleTable.Bundles.Add(a);
}


TestForm.aspx [Page with Bundling]:


Now you have to give reference of your bundle to your aspx page to access all those .js file functions.
		
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Page With Bundling</title>
<%: System.Web.Optimization.Scripts.Render("~/bundle/js") %>
</head>
<body>
<form id="form1" runat="server">
<div>
<B>Asp.net Web Optimization using Bundling </B>
</div>
</form>
</body>
</html>


TestForm2.aspx [Page without Bundling]:



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Page Without Bundling</title>
<script src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/jquery-ui-1.8.20.js"></script>
<script src="Scripts/jquery-ui-1.8.20.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<B>Asp.net Web Page without Bundling </B>
</div>
</form>
</body>
</html>


Performance Analysis:


Here you can easily see the difference between number of requests both the web pages have sent to server.

TestForm.aspx [Page with Bundling]:


Single request for all the .js files as bundle/js.
Page With Bundling

TestForm2.aspx [Page without Bundling]:


4 seperate requests for 4 .js files.
Page Without bundling

Summary:


Hope I had explained all the details regarding bundling in a proper way. Please try it for improving your website performace and you will see the difference. You can find attached source code for your reference. Please post if any suggestions or feedback.


Attachments

  • Soruce Code (46364-4-Soruce-Code.zip)
  • Related Articles

    Optimizing ASP.NET Web application performance through Bundling and Minification Part-2

    In the first article we had seen how Bundling helps us to minimize the number of HTTP requests sent from browser to improve ASP.NET web page performance. Now I am going to cover Minification Part which helps to reduce the size of requested resources to improve ASP.NET web page performance in terms of load time of CSS or JavaScript files(resources).

    Usage of HttpHandler

    HttpHandler can be very handy in scenario when you don't require complete page cycle.

    More articles: Performance enhancements Asp.net Tips Web application

    Comments



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: