Resource Optimization (Bundling And Minification) Boost Your Website Performance

To load your website faster you must do the resource optimization. There are a lot of reasons we need resource optimization. I mean to say the optimization of number of requests sent from your browser and data served by the server. We can do the resource optimizations in many ways and it is not limited to Bundling, Minification & Sprite Images, we can do a lot of other optimization too.

These are the 3 popular concepts of resource optimization:

1. Bundling (Bundling of .js,.css, .resx, .html…)
2. Minification (Minification of .js, .css,.html…)
3. Sprite (Image Sprite)

Why we need resource optimization

The number of requests a browser can made is limited. Each browser does not have same requests limits but it is always limited. There are some newer browsers like Microsoft Edge which have higher request limit.

Bundling

Bundling is a technique which is used to improve performance and decrease the request loading time as it reduces the number of http requests.

Bundling Java Script Files

File1.js

File2.js

MyBundle.js (File1.js + File2.js)

You can use it in your MVC or ASP.NET project as in the following:

Let's take a real JavaScript file rather than file1.js & file2.js

Add a new class, I have renamed it MyBundleConfig.cs

For which here's the complete code:

Now register this class in Global.asax file.

Global.asax

In your ASPX Page

We can also do bundling using Web Essential.

Bundling Using Web Essentials.

Select the JavaScript files, Web Essentials, then create JavaScript bundle file.

To know how to install Web Essentials please go to Sprite Image section of this blog.



It will create a file like “MyBundle.js.bundle” which have MyBundle.js, “MyBundle.min.js” & “MyBundle.min.js.map”.



You can see it has automatically bundled file and .min file also. So it is doing bundling and Minification both.

In the same way we can do the bundling of css and HTML files.

Bundling of CSS Files



Minification

Minification improve loading time of the web page. It also decreases the size of a file and it can be used for any interpreted language. Ordering matters in case of Bundling, but it does not matter in case of Minification.

Minification can be performed on Bundled files or it can be used on a single unbundled files too. It means Minification can be used with Bundled files or without bundling feature.

For Minification of a javascript file we do the following things:

• Remove the white spaces from file(s).
• Remove line breaks to shorten file size.
• Remove final semicolon.
• Renaming local variable name and provide it a short name e.g. a variable like “isProcessExecutedSucessfully” can be renamed to “ipes” or simply a single character variable like ‘s’ indication of success or failure.
  

Original JavaScript File

Minified JavaScript File

Minification Level

First Level:

• Removing comments
• Removing white spaces