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.

  • 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

  1. function myFunction()
  2. {
  3. var mytext = "";
  4. var i = 0;
  5. while (i < 10)
  6. {
  7. mytext += "<br>The number is " + i;
  8. i++;
  9. }
  10. document.getElementById("htmlelement").innerHTML = mytext;
  11. }

File2.js

  1. var lstcolors = ["Red", "Green", "Blue", "Orange"];
  2. var mytext = "";
  3. var i;
  4. for (i = 0; i < lstcolors.length; i++)
  5. {
  6. mytext += lstcolors[i] + "<br>";
  7. }
  8. document.getElementById("Colors").innerHTML = mytext;

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

  1. function myFunction()
  2. {
  3. var mytext = "";
  4. var i = 0;
  5. while (i < 10)
  6. {
  7. mytext += "<br>The number is " + i;
  8. i++;
  9. }
  10. document.getElementById("htmlelement").innerHTML = mytext;
  11. }
  12. var lstcolors = ["Red", "Green", "Blue", "Orange"];
  13. var mytext = "";
  14. var i;
  15. for (i = 0; i < lstcolors.length; i++)
  16. {
  17. mytext += lstcolors[i] + "<br>";
  18. }
  19. 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:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Optimization;
  7. /// <summary>
  8. /// Summary description for MyBundleConfig
  9. /// </summary>
  10. public class MyBundleConfig
  11. {
  12. public MyBundleConfig()
  13. {
  14. //
  15. // TODO: Add constructor logic here
  16. //
  17. }
  19. public static void RegisterBundles(BundleCollection bundles)
  20. {
  22. bundles.Add(new StyleBundle("~/Style/myStyle").Include(
  23. "~/css/bootstrap.min.css",
  24. "~/css/main.css",
  25. "~/css/responsive.css",
  26. "~/styles/shCoreDefault.css",
  27. "~/Content/Auto/Global.css"
  28. ));
  30. bundles.Add(new ScriptBundle("~/Scripts/myJsFiles").Include(
  31. "~/en-gb.res.axd",
  32. "~/Scripts/Auto/01-jquery-1.9.1.min.js",
  33. "~/Scripts/Auto/02-jquery.cookie.js",
  34. "~/Scripts/Auto/04-jquery-jtemplates.js",
  35. "~/Scripts/Auto/05-json2.min.js",
  36. "~/Scripts/Auto/blog.js",
  37. "~/scripts/mycss.js",
  38. ));
  40. BundleTable.EnableOptimizations = true;
  41. }
  43. public static void AddDefaultIgnorePatterns(IgnoreList ignoreList)
  44. {
  45. if (ignoreList == null)
  46. throw new ArgumentNullException("ignoreList");
  48. ignoreList.Ignore("*.intellisense.js");
  49. ignoreList.Ignore("*-vsdoc.js");
  51. //ignoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
  52. //ignoreList.Ignore("*.min.js", OptimizationMode.WhenDisabled);
  53. //ignoreList.Ignore("*.min.css", OptimizationMode.WhenDisabled);
  54. }
  55. }

Now register this class in Global.asax file.

Global.asax

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

In your ASPX Page

  1. <%# System.Web.Optimization.Styles.Render("~/Style/myStyle")%>
  2. <%# 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.

Bundling Using Web Essentials

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

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

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

Original JavaScript File

  1. function myFunction()
  2. {
  3. var mytext = "";
  4. var i = 0;
  5. while (i < 10)
  6. {
  7. mytext += "<br>The number is " + i;
  8. i++;
  9. }
  10. document.getElementById("htmlelement").innerHTML = mytext;
  11. }
  12. var lstcolors = ["Red", "Green", "Blue", "Orange"];
  13. var mytext = "";
  14. var i;
  15. for (i = 0; i < lstcolors.length; i++)
  16. {
  17. mytext += lstcolors[i] + "<br>";
  18. }
  19. document.getElementById("Colors").innerHTML = mytext;

Minified JavaScript File

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

Minification Level

First Level:

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

Minification using Web Essentials

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

Minification using Web Essentials1

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.

Sprite Images1

And the following are the network requests,

Sprite Images2

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

Sprite Images3

To create sprite Image we can follow these procedures:

Create a Sprite Image

Select all the Images and right click on it.

Create a Sprite Image

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

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

Open the link1

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

all images

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

MySprite.png

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

  1. /*
  2. This is an example of how to use the image sprite in your own CSS files
  3. */
  4. .Images - android
  5. {
  6. /* You may have to set 'display: block' */
  7. width: 40 px;
  8. height: 40 px;
  9. background: url('MySprite.png') - 1 px - 1 px;
  10. }.Images - apple
  11. {
  12. /* You may have to set 'display: block' */
  13. width: 40 px;
  14. height: 40 px;
  15. background: url('MySprite.png') - 1 px - 42 px;
  16. }.Images - Blackberry
  17. {
  18. /* You may have to set 'display: block' */
  19. width: 40 px;
  20. height: 40 px;
  21. background: url('MySprite.png') - 1 px - 83 px;
  22. }.Images - Facebook
  23. {
  24. /* You may have to set 'display: block' */
  25. width: 40 px;
  26. height: 40 px;
  27. background: url('MySprite.png') - 1 px - 124 px;
  28. }.Images - Google Plus
  29. {
  30. /* You may have to set 'display: block' */
  31. width: 40 px;
  32. height: 40 px;
  33. background: url('MySprite.png') - 1 px - 165 px;
  34. }.Images - Live TV
  35. {
  36. /* You may have to set 'display: block' */
  37. width: 40 px;
  38. height: 40 px;
  39. background: url('MySprite.png') - 1 px - 206 px;
  40. }.Images - Mobile
  41. {
  42. /* You may have to set 'display: block' */
  43. width: 40 px;
  44. height: 40 px;
  45. background: url('MySprite.png') - 1 px - 247 px;
  46. }.Images - Nokia
  47. {
  48. /* You may have to set 'display: block' */
  49. width: 40 px;
  50. height: 40 px;
  51. background: url('MySprite.png') - 1 px - 288 px;
  52. }.Images - pinterest
  53. {
  54. /* You may have to set 'display: block' */
  55. width: 40 px;
  56. height: 40 px;
  57. background: url('MySprite.png') - 1 px - 329 px;
  58. }.Images - Rediff
  59. {
  60. /* You may have to set 'display: block' */
  61. width: 40 px;
  62. height: 40 px;
  63. background: url('MySprite.png') - 1 px - 370 px;
  64. }.Images - RSS
  65. {
  66. /* You may have to set 'display: block' */
  67. width: 40 px;
  68. height: 40 px;
  69. background: url('MySprite.png') - 1 px - 411 px;
  70. }.Images - SMS
  71. {
  72. /* You may have to set 'display: block' */
  73. width: 40 px;
  74. height: 40 px;
  75. background: url('MySprite.png') - 1 px - 452 px;
  76. }.Images - Twitter
  77. {
  78. /* You may have to set 'display: block' */
  79. width: 40 px;
  80. height: 40 px;
  81. background: url('MySprite.png') - 1 px - 493 px;
  82. }.Images - Windows
  83. {
  84. /* You may have to set 'display: block' */
  85. width: 40 px;
  86. height: 40 px;
  87. background: url('MySprite.png') - 1 px - 534 px;
  88. }

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:

MySprite.png.min.css

And the minified is:

  1. .Images - android
  2. {
  3. width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 1 px
  4. }.Images - apple
  5. {
  6. width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 42 px
  7. }.Images - Blackberry
  8. {
  9. width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 83 px
  10. }.Images - Facebook
  11. {
  12. width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 124 px
  13. }.Images - Google Plus
  14. {
  15. width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 165 px
  16. }.Images - Live TV
  17. {
  18. width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 206 px
  19. }.Images - Mobile
  20. {
  21. width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 247 px
  22. }.Images - Nokia
  23. {
  24. width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 288 px
  25. }.Images - pinterest
  26. {
  27. width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 329 px
  28. }.Images - Rediff
  29. {
  30. width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 370 px
  31. }.Images - RSS
  32. {
  33. width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 411 px
  34. }.Images - SMS
  35. {
  36. width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 452 px
  37. }.Images - Twitter
  38. {
  39. width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 493 px
  40. }.Images - Windows
  41. {
  42. width: 40 px;height: 40 px;background: url('MySprite.png') - 1 px - 534 px
  43. }

Now implement it into your .aspx page:

Add CSS reference

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

Old Code

  1. <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" />
  2. <img src="Images/Live%20TV.png" /> <img src="Images/Mobile.png" /> <img src="Images/Nokia.png" /> <img src="Images/pinterest.png" />
  3. <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" />

New Code

  1. <div class="Images-android" style="float:left; width:41px;"> </div>
  2. <div style="float:left; width:15px;"> </div>
  3. <div class="Images-apple" style="float:left; width:41px;"> </div>
  4. <div style="float:left; width:15px;"> </div>
  5. <div class="Images-Blackberry" style="float:left; width:41px;"> </div>
  6. <div style="float:left; width:15px;"> </div>
  7. <div class="Images-Facebook" style="float:left; width:41px;"> </div>
  8. <div style="float:left; width:15px;"> </div>
  9. <div class="Images-GooglePlus" style="float:left; width:41px;"> </div>
  10. <div style="float:left; width:15px;"> </div>
  11. <div class="Images-LiveTV" style="float:left; width:41px;"> </div>
  12. <div style="float:left; width:15px;"> </div>
  13. <div class="Images-Mobile" style="float:left; width:41px;"> </div>
  14. <div style="float:left; width:15px;"> </div>
  15. <div class="Images-Nokia" style="float:left; width:41px;"> </div>
  16. <div style="float:left; width:15px;"> </div>
  17. <div class="Images-pinterest" style="float:left; width:41px;"> </div>
  18. <div style="float:left; width:15px;"> </div>
  19. <div class="Images-Rediff" style="float:left; width:41px;"> </div>
  20. <div style="float:left; width:15px;"> </div>
  21. <div class="Images-RSS" style="float:left; width:41px;"> </div>
  22. <div style="float:left; width:15px;"> </div>
  23. <div class="Images-SMS" style="float:left; width:41px;"> </div>
  24. <div style="float:left; width:15px;"> </div>
  25. <div class="Images-Twitter" style="float:left; width:41px;"> </div>
  26. <div style="float:left; width:15px;"> </div>
  27. <div class="Images-Windows" style="float:left; width:41px;"> </div>
  28. <div style="float:left; width:15px;"> </div>

It will display webpage as follows:
display

And all images loaded in single request

display1