Resource Optimization (Bundling And Minification) Boost Your Website Performance

Banketeshvar Narayan
Nov 07, 2015

10.6k
0
6
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

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:

Bundling (Bundling of .js,.css, .resx, .html…)
Minification (Minification of .js, .css,.html…)
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.

Internet Explorer
Internet Explorer 7: 2
Internet Explorer 8: 6
Internet Explorer 9: 6
Internet Explorer 10: 8
Google Chrome: 6
Opera 12: 6
Safari 6: 6
Mozilla Firefox 3+: 6

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

function myFunction()
{
var mytext = "";
var i = 0;
while (i < 10)
{
mytext += "<br>The number is " + i;
i++;
}
document.getElementById("htmlelement").innerHTML = mytext;
}

File2.js

var lstcolors = ["Red", "Green", "Blue", "Orange"];
var mytext = "";
var i;
for (i = 0; i < lstcolors.length; i++)
{
mytext += lstcolors[i] + "<br>";
}
document.getElementById("Colors").innerHTML = mytext;

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

function myFunction()
{
var mytext = "";
var i = 0;
while (i < 10)
{
mytext += "<br>The number is " + i;
i++;
}
document.getElementById("htmlelement").innerHTML = mytext;
}
var lstcolors = ["Red", "Green", "Blue", "Orange"];
var mytext = "";
var i;
for (i = 0; i < lstcolors.length; i++)
{
mytext += lstcolors[i] + "<br>";
}
document.getElementById("Colors").innerHTML = mytext;

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:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;
/// <summary>
/// Summary description for MyBundleConfig
/// </summary>
public class MyBundleConfig
{
public MyBundleConfig()
{
//
// TODO: Add constructor logic here
//
}
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/Style/myStyle").Include(
"~/css/bootstrap.min.css",
"~/css/main.css",
"~/css/responsive.css",
"~/styles/shCoreDefault.css",
"~/Content/Auto/Global.css"
));
bundles.Add(new ScriptBundle("~/Scripts/myJsFiles").Include(
"~/en-gb.res.axd",
"~/Scripts/Auto/01-jquery-1.9.1.min.js",
"~/Scripts/Auto/02-jquery.cookie.js",
"~/Scripts/Auto/04-jquery-jtemplates.js",
"~/Scripts/Auto/05-json2.min.js",
"~/Scripts/Auto/blog.js",
"~/scripts/mycss.js",
));
BundleTable.EnableOptimizations = true;
}
public static void AddDefaultIgnorePatterns(IgnoreList ignoreList)
{
if (ignoreList == null)
throw new ArgumentNullException("ignoreList");
ignoreList.Ignore("*.intellisense.js");
ignoreList.Ignore("*-vsdoc.js");
//ignoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
//ignoreList.Ignore("*.min.js", OptimizationMode.WhenDisabled);
//ignoreList.Ignore("*.min.css", OptimizationMode.WhenDisabled);
}
}

Now register this class in Global.asax file.

Global.asax

//you can register multiple classes here
//BundleConfig.RegisterBundles(BundleTable.Bundles);
MyBundleConfig.RegisterBundles(BundleTable.Bundles);

In your ASPX Page

<%# System.Web.Optimization.Styles.Render("~/Style/myStyle")%>
<%# System.Web.Optimization.Scripts.Render( "~/Scripts/myJsFiles")%>

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.

Based on the above strategies we can shorten javascript file as follows.

Original JavaScript File

function myFunction()
{
var mytext = "";
var i = 0;
while (i < 10)
{
mytext += "<br>The number is " + i;
i++;
}
document.getElementById("htmlelement").innerHTML = mytext;
}
var lstcolors = ["Red", "Green", "Blue", "Orange"];
var mytext = "";
var i;
for (i = 0; i < lstcolors.length; i++)
{
mytext += lstcolors[i] + "<br>";
}
document.getElementById("Colors").innerHTML = mytext;

Minified JavaScript File

function myFunction()
{
for (var e = "", t = 0; 10 > t;) e += "<br>The number is +t,t++;document.getElementById("
htmlelement ").innerHTML=e}var lstcolors=["
Red ","
Green ","
Blue ","
Orange "],mytext="
",i;for(i=0;i<lstcolors.length;i++)mytext+=lstcolors[i]+" < br > ";document.getElementById("
Colors ").innerHTML=mytext;

Minification Level

First Level:

Removing comments
Removing white spaces

This approach is safe and successful i.e. this stage provide the surety of success and this is error free.

Second Level:

Removal of extra semicolon and curly braces.

This approach is not 100% safe and it has lower level of risk.

Third Level:

Renaming local variable name and provide it a shorter name.

As said earlier in this approach variable like “isProcessExecutedSucessfully” can be renamed to “ipes”. It has very lower risk.

Fourth Level:

Removing Unused, unnecessary and unreachable code.

Fifth Level:

Shortening function name and other strategies to shorten file size.

Minification using Web Essentials

Let’s take any JavaScript file and minify it. I am taking “angular1.4.7.js”.

You can see that size of the JavaScript file has been decreased drastically.

Sprite Images

Sprite images is used to load images faster on your websites and reducing the number of requests. Have a look at the following screenshots.

And the following are the network requests,

Here 14 separate requests are being made for loading 14 icons. Let's have a look of sprite Image Network details for requests made.

To create sprite Image we can follow these procedures:

Create a Sprite Image

Select all the Images and right click on it.

You can see there is no option available here to create Sprite Image. To add this option we need to install “Web essentials”.
I am using Visual studio 2015, so I will search for “web essentials 2015”.

Create a Sprite Image1

Open the link

Download and install it. You can also install it from Tools menu of Visual studio 2015 (also available in Visual Studio 2013).

Search for “web essentials 2015”.

Open the link2

Now download & install it. It will ask to restart Visual studio to take effect. Start Visual Studio 2015.

Now select all images, Web Essentials, then click Create image sprite...

It create an Image MySprite.png and it looks like the following:

Note: This Image has been created vertically but I keep it here for horizontally because it took extra spaces on this blog.

It creates and save a file with extension .sprite,

.sprite

It also generate a .css file.

Complete css file

/*
This is an example of how to use the image sprite in your own CSS files
*/
.Images - android
{
/* You may have to set 'display: block' */
width: 40 px;
height: 40 px;
background: url('MySprite.png') - 1 px - 1 px;
}.Images - apple
{
/* You may have to set 'display: block' */
width: 40 px;
height: 40 px;
background: url('MySprite.png') - 1 px - 42 px;
}.Images - Blackberry
{
/* You may have to set 'display: block' */
width: 40 px;
height: 40 px;
background: url('MySprite.png') - 1 px - 83 px;
}.Images - Facebook
{
/* You may have to set 'display: block' */
width: 40 px;
height: 40 px;
background: url('MySprite.png') - 1 px - 124 px;
}.Images - Google Plus
{
/* You may have to set 'display: block' */
width: 40 px;
height: 40 px;
background: url('MySprite.png') - 1 px - 165 px;
}.Images - Live TV
{
/* You may have to set 'display: block' */
width: 40 px;
height: 40 px;
background: url('MySprite.png') - 1 px - 206 px;
}.Images - Mobile
{
/* You may have to set 'display: block' */
width: 40 px;
height: 40 px;
background: url('MySprite.png') - 1 px - 247 px;
}.Images - Nokia
{
/* You may have to set 'display: block' */
width: 40 px;
height: 40 px;
background: url('MySprite.png') - 1 px - 288 px;
}.Images - pinterest
{
/* You may have to set 'display: block' */
width: 40 px;
height: 40 px;
background: url('MySprite.png') - 1 px - 329 px;
}.Images - Rediff
{
/* You may have to set 'display: block' */
width: 40 px;
height: 40 px;
background: url('MySprite.png') - 1 px - 370 px;
}.Images - RSS
{
/* You may have to set 'display: block' */
width: 40 px;
height: 40 px;
background: url('MySprite.png') - 1 px - 411 px;
}.Images - SMS
{
/* You may have to set 'display: block' */
width: 40 px;
height: 40 px;
background: url('MySprite.png') - 1 px - 452 px;
}.Images - Twitter
{
/* You may have to set 'display: block' */
width: 40 px;
height: 40 px;
background: url('MySprite.png') - 1 px - 493 px;
}.Images - Windows
{
/* You may have to set 'display: block' */
width: 40 px;
height: 40 px;
background: url('MySprite.png') - 1 px - 534 px;
}

As I have already discussed the feature of Minification we can minify this css file using Web Eseentials.

minify css file

It creates a new file MySprite.png.min.css:

And the minified is:

.Images - android
{
width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 1 px
}.Images - apple
{
width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 42 px
}.Images - Blackberry
{
width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 83 px
}.Images - Facebook
{
width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 124 px
}.Images - Google Plus
{
width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 165 px
}.Images - Live TV
{
width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 206 px
}.Images - Mobile
{
width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 247 px
}.Images - Nokia
{
width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 288 px
}.Images - pinterest
{
width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 329 px
}.Images - Rediff
{
width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 370 px
}.Images - RSS
{
width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 411 px
}.Images - SMS
{
width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 452 px
}.Images - Twitter
{
width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 493 px
}.Images - Windows
{
width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 534 px
}

Now implement it into your .aspx page:

Add CSS reference

<link href="Images/MySprite.png.css" rel="stylesheet" />

Old Code

<img src="Images/android.png" /> <img src="Images/apple.png" /> <img src="Images/Blackberry.png" /> <img src="Images/Facebook.png" /> <img src="Images/Google%20Plus.png" />
<img src="Images/Live%20TV.png" /> <img src="Images/Mobile.png" /> <img src="Images/Nokia.png" /> <img src="Images/pinterest.png" />
<img src="Images/Rediff.png" /> <img src="Images/RSS.png" /> <img src="Images/SMS.png" /> <img src="Images/Twitter.png" /> <img src="Images/Windows.png" />