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



A single web page may have multiple JavaScript or CSS files included for different different functionalities. Web browser downloads that each and every reference file. So minification helps us to create smaller requests by removing unnecessary white spaces, comments and more importantly it shortens the variable names from each reference file to one character. Which leads to reduction in file size and the bandwidth is properly utilized. It also helps in mobile applications to minimize battery consumption.

Lets take an example of following javascript function:

function (iNumber1, iNumber2)
/* This function adds to numbers and return their result*/
var iNumber3=iNumber1+iNumber2;
return iNumber3;

JavaScript function after minification:

function(a,b){var c=a+b; return c;}

Minification Result


  • Open IE F12 developer tools.

  • Select Script tab and then select the Start debugging button.

  • Select the js bundle containing the JavaScript function you want to debug.

  • Input the name of JavaScript function in the Search Script input box.

You will see the minified JavaScript function.


Add some of the .js files to your solution.

Solution Explorer:

Sol Explorer


<compilation debug="false" />


Now you have to give reference of your bundle(created in first part) 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 and Minification </title>
<%: System.Web.Optimization.Scripts.Render("~/bundle/js") %>
<form id="form1" runat="server">
<h2>Asp.net Web Optimization using Bundling and Minification </h2>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Page Without Bundling and Minification</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>
<form id="form1" runat="server">
<h2>Asp.net Web Page without Bundling and Minification </h2>

Performance Analysis:

Here you can easily see the difference between the sizes of .js files/resources on both the web pages.

TestForm.aspx [Page with Bundling and Minification]:

Only 286.20 KB size for all the .js files inside a bundle/js.

Page With Bundling and Minification

TestForm2.aspx [Page without Bundling and Minification]:

Toal 902.34 KB size for all the seperate 4 .js files.

Page without bundling and minification


Hope I had explained all the details regarding minification in a proper way. Please try it for improving your website performance and you will see the difference. Please post if any suggestions or feedback.

Thanks for reading.

Related Articles

Usage of HttpHandler

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

More articles: Web application Asp.net Tips Performance enhancements


No responses found. Be the first to comment...

  • 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: