Improve Application Performance Using Bundling And Minification

Article

Most of the major Web Browsers have a limit to process the scripts or CSS files simultaneously from the top order. Since the Browsers have a limit to process the scripts or CSS files, the remaining files will be queued by the Browser, which leads to performance issues. Let's take a sample Application with a few JavaScript files, CSS files and execute the sample Application. The image, given below, tells when we click F12 in the Browser, the Browser opens the developer tool, where we can find a network tab, which shows the timing for JavaScript and CSS files for the sample Application.

In the screenshot, shown above, the Maroon bar tells the time, the specific file is being queued by the Browser to process it.

The Yellow bar tells the time taken for the first byte. I mean, the time taken to send the request and get the first response from the Server. The Blue bar tells the time taken to receive the complete response from the Server. You can double click on one JavaScript or CSS file to get the detailed timing information, as shown in the screenshot, given below:

Thus, having the six JavaScript or CSS files in the Application is not a problem, but having hundreds of JavaScript and CSS files leads to a performance issue to the Application. The performance of your Web Application has a great impact on the end user prospective. If your Application is very slow, it results in many issues like bad rating or feedback from the end user, which causes people to use your Application less and of course, it impacts your business a lot. Now the question is, how can we avoid it?

Bundling is one of the techniques, through which we can achieve it. As we know the bundling feature, by default, supports MVC Application, whereas from VS 4.5 framework onwards, it supports for Web forms as well. Bundling improves the load time by reducing the number of requests to the Server and reducing the size of the requested JavaScript and CSS files by combining or bundling the multiple files into a single file.

The following screenshot shows the same timing view of the about view, shown in the image previously, but this time, with the bundling.

Observe the time difference, using the same JavaScript and CSS files, given in the two screenshots, above. To implement bundling in .NET Framework 4.5 and Visual Studio 2015, open a new Web Form project. We will find a BundleConfig.cs file in App_Start Folder.

In BundleConfig.cs, we can add all JavaScript and CSS files into one bundle, as shown below:

In the code, mentioned above, adding all JavaScript and CSS files into the bundles/WebformJs and all AJAX files into the bundles/MsAjaxJs, using ScriptBundle, coming to CSS files, we used StyleBundle.

The template creates the code to hook up the bundle registration in the Application_Start method in the Global.asax file, as shown below:

code

Next step is to give the bundle references in .master or .ASPX pages, as shown below. The reference is kept in ScriptReference tag in Name property and the should postfix with the bundle, highlighted in the screenshot, given below:

code

Execute the code, the output will be screenshot#2. Check the difference in the performance and timing, shown in the screenshot#1.

You can minify your CSS files, using .less files as well, which is another technique to minify your CSS files. You can go through one of my articles, with the link, given below, to get more details.