ASP.Net Web Optimization Framework

The ASP.Net Web Optimization Framework was introduced by Microsoft to optimize the ASP.NET web application performance. So in order to optimize a web application, this framework uses the following two techniques:

1. By reducing the number of requests to the server
2. By reducing the size of the requested resources

Now one question that might have occured to you is why should we use this framework and what is the necessity of this framework. So first let's try to understand this. There are multiple reasons for using this framework; some of them are the following:

1. Now a days in a single web pages we used many JavaScript libraries for various functionalities like calendar, model popup and so on. Or we can say because of a richer visual content demand, the cost of downloading various resources like CSS and images grows significantly. So fewer and smaller requests can save bandwidth, reduce latency and lengthen battery life. Battery life I mentioned specially for mobile applications.
2. Most current browsers limit the number of simultaneous connections per hostname to six (for more information about it click browserscope). It means that if more than 6 requests are being processed then an additional request will be queued by the browser.

Currently the following two services are provided by this framework:

1. Bundling: This feature was introduced in ASP.NET 4.5 that reduces the number of requests to the server. It combines multiple resources like scripts, CSS files and so on into single resources. So that there will be fewer requests by the browser. It improves page load performance.
   
   
   
   
   
   
2. Minification: This feature reduces the size of requested resources in order to optimize code by shortening the variable names, remove whitespace, tabs, comments and so on. Let's take an example and see how it works.
   
   function (firstNumber, secondNumber) { ///<signature>

           //<summary> Adds two integer

           // </summary>

           //<param name="firstNumber" type="Integer">First Number.</param>

           //<param name="secondNumber" type="Integer">Second Number.</param>

           ///</signature>

           var thirdNumber = firstNumber + SecondNumber;

       }

The following shows how after minification this JavaScript code will change:

function(n,p)
{
    var i=n+p;
}

Now you have a better understanding of how this framework actually does the optimization to improve web performance.

Now let's see how to implement this:

1. In Web Form
2. In Web page Site
3. In ASP.NET MVC

I know in this article, it is not possible to explain all three but here I can cover some things that are common in all three implementations.

Enable or Disable Bundling and MInification

The following are two ways to enable or disable Bundling and Minification:

1. Using Web.config: In the web.config you can set the debug attribute of the compilation element as in the following:
    

   <system.web>

     <compilation debug="true" />

   </system.web>
    

2. By setting EnableOptimizations: set this to true for bundling and minification as in the following:
    

   public static void RegisterBundles(BundleCollection bundles)

   {

       bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

       BundleTable.EnableOptimizations = true;

   }

If you have set both values then EnbaleOptimizations overrides the debug attribute.

For bundling this framework provide a Bundle Class. So let us have a look at this class and it's methods because this will be used in all three implementations.

Bundle Class

This class has an Include method that takes an array of strings, where each string is a virtual path to a resource. We can add multiples files as in the following:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(

"~/Content/themes/base/jquery.ui.autocomplete.css",

"~/Content/themes/base/jquery.ui.accordion.css",

"~/Content/themes/base/jquery.ui.selectable.css",

"~/Content/themes/base/jquery.ui.code.css",

"~/Content/themes/base/jquery.ui.button.css",));

But if you want to include all files of a specific directory then this class provides a more method called IncludeDirectory. You can use this method as in the following:

public Bundle IncludeDirectory(

string dvirtPath, // The Virtual Path for the directory.

string pattern, // The search pattern.

bool subDirectory) // true to search subdirectories.  

We can use patterns while searching files or subdirectories by using the “*” wildcard character like the following:

Include(“~/Scripts/Common/*.js”) ===> this will include all js files.

IncludeDirectory(“~/Scripts/Common”,”T*.js”) ===> this will include all js files whose name starts from T.

Now the next question is, we have created bundules, now how will we include it in a view or aspx file?

We will use Styles.Render for CSS and Scripts.Render for a script file as in the following:

@Styles.Render(“~/Content/theme/base/css”,”~/Content/css”);
@Scripts.Render(“~/bundles/jquery”);

So here I covered all the basic details about this framework. Now how to implement this in ASP.NET, I will cover that in the next articles.