Win 10 Free Copies of this EBook
Win 10 Free Copies of this EBookUpdate: This GiveAway has ended. Our 10 Twitter winners who have won this eBook are @ankitwww @julitogtu @shijucv @sebastiantecsi @gnosys @TheManalishi @dlberkshire @bvrhovnik @CoderDennis @brianmains. Thanks Everyone for participating!
The winners will be contacted via Twitter. If you have won this eBook, claim it by providing your Name, Email and Twitter handler at suprotimagarwal[at]dotnetcurry[dot]com. Once I receive your details, please allow 5 business days to contact the publisher and deliver your eBook.
When I look closely at the HTML of some of my web pages, I am often faced with a few different JavaScript files, and possibly one or more CSS files. This makes my life quite easy when I am developing and debugging a website, but when the website goes live and into production, it isn’t always great for our users. Having multiple file references means more HTTP requests and, in our quest to improve the overall speed of a website, we need to reduce the requests that a web page makes in order to speed it up. In this article, we will look at two techniques that will help us reduce the number of HTTP requests that a web page makes and also reduce the size of the actual files themselves. If we have smaller files and fewer HTTP requests, our web pages will be considerably faster!
What is minification?
Minification can be applied to both CSS and JavaScript files and it simply involves removing any unnecessary whitespace within the code. It might also involve trimming long variable and method names. However, your code will still run exactly as intended, but, due to the fact that it has been drastically reduced in size, it will run a lot faster. It is important to understand that, while humans might struggle to read this minified code, the browser will have no trouble at all processing the code. This is a necessary evil because the removal of whitespace and the obfuscation that needs to take place will ultimately help the file load faster. The built-in support for minification that comes with Visual Studio 2012 is also intelligent enough that, while you are in development, you will be able to see the full, un-minified code. When you run your website in release mode, the code will automatically get minified on the fly for you.
HTTP caching and compression will drastically improve the speed at which a web page loads. However, if we run a typical web application as it stands against the Google PageSpeed tool, you might notice that there are still a few things that need to be done in order to improve the PageSpeed score. Quite often, you may run the Google PageSpeed tool against your website and notice that it recommends that you Minify JavaScript in order to boost the page load time.
Figure 1 The outstanding improvements that need to be applied according to the Google PageSpeed tool
If we take a typical CSS file and minify it, the results compared to the original version are very different in both appearance and file size. Listing 1 shows a CSS snippet before it has been minified.
Listing 1 CSS code before minification
/*This is a comment*/
h1 {
font-size: 30px;
line-height: 36px;
}
h1 small {
font-size: 18px;
}
h2 {
font-size: 24px;
line-height: 36px;
}
h2 small {
font-size: 18px;
}
h3 {
font-size: 18px;
line-height: 27px;
}
h3 small {
font-size: 14px;
}
As you can see from the CSS in listing 1, it contains unnecessary spaces and line breaks. Although this makes the code a lot easier to read and prettier on the human eye, ultimately it adds extra weight to the overall size of the file. By minifying this file, we can definitely reduce the size of the file.
Listing 2 CSS code after minification
h1{#1 font-size:30px; line-height:36px}h1 small{font-size:18px}h2{font-
size:24px;line-height:36px}h2 small{font-size:18px}h3{font-size:18px;line-
height:27px}h3 small{font-size:14px}
If we compare the code in listing 2 against the code in 1, the differences are immediately visible. The code has no spaces, the comments have been removed and the line breaks have been removed making the code snippet a lot smaller. These two code snippets ran through a small piece of code, but imagine the difference that this could make if it was applied to both the CSS and the JavaScript in your application!
This technique can also be applied to JavaScript files to reduce the overall size of the file. Let’s take a look at the following JavaScript code in Listing 3 before it has been minified.
Listing 3 JavaScript code before minification
$(document).ready(function () {
//Detect enter key
$('#barcodeValue').keyup(function (event) {
if (event.keyCode == 13) {
validateString($("#barcodeValue").val(),
$("#barcodeType option:selected").val());
}
});
// Hide the value textbox
$("#barcodeValue").hide();
$("#CreateButton").hide();
$("#alertBox").hide();
$("#progressBar").hide();
$("#infoLink").hide();
// Drop down changed
$("#barcodeType").change(function () {
// show the value textbox
$("#barcodeValue").show();
$("#CreateButton").show();
// Prepend the textbox if necessary
shouldPrepend();
});
});
Listing 4 JavaScript code after minification
$(document).ready(function(){$("#barcodeValue").keyup(function(a){if
(a.keyCode==13){validateString($("#barcodeValue").val(),$("#barcodeType
option:selected").val())}});$("#barcodeValue").hide
();$("#CreateButton").hide();$("#alertBox").hide();$("#progressBar").hide
();$("#infoLink").hide();$("#barcodeType").change(function()
{$("#barcodeValue").show();$("#CreateButton").show();shouldPrepend()})});
The code in listing 4 has been obfuscated and minified, and, compared to listing 3, there is a big difference in the readability of this file. Although the code in listing 4 isn’t that readable, there is no reason why we can’t use it once we put the website live. It will be smaller than the original version and will also execute faster!
In order to make our lives as developers easier, it is better to keep both versions of the files while your project is still in development. By keeping one version of the file for debugging and one for deployment in a live environment, you can ensure that you are able to switch between development modes. You may have noticed this before with the naming of popular JavaScript frameworks. For example, when you visit the jQuery website, you will notice that there is an option to download a minified version of jQuery. The file name will often end in .min.js and this has become a standard way of naming the files. For example, the un-minified version will be named something like jquery-1.8.0.js, while the minified version will be called jquery-1.8.0.min.js. This makes it easy to identify the different files while you are developing your application.
Let’s compare the results of minification showing the differences in file sizes of popular frameworks that are used in development today.
As you can see from the results in table 1, the size savings vary across the different files considerably and this can be due to factors such as whitespace, comments, and line breaks. The table contains a list of common JavaScript and CSS frameworks and the differences in file sizes before and after minification. If we can achieve this level of file size savings with no changes to our code, it seems obvious that minifying the code is a free and easy win.
You can automatically apply minification to your files using the new built-in features in ASP.NET 4.5 and Visual Studio 2012. However, if you prefer to manually minify your files, there are many online tools available that allow you to do so.
The online YUI compressor uses the Yahoo! YUI compressor to minify both JavaScript and CSS. All that you need to do is paste the contents of the file into the required textbox and you will be presented with an option to download the minified file. The web application is available at http://refresh-sf.com/yui/.
Another tool that is available to use with JavaScript is the Google Closure Compiler. It is used in many of Google's JavaScript apps, including Gmail, Google Web Search, Google Maps, and Google Docs. There is an online version of the tool available at http://closure-compiler.appspot.com, which allows you take advantage of these features. Again, this tool simply allows you to copy and paste the contents of the file online.
There are many other tools available on the web, but it is important to understand that each of them might use a different algorithm and a slightly different method of minification. What’s important is that they all use minification techniques that significantly reduce the size of these files. The only downside to using these online tools is that the minification process is very manual; you will have to upload each version of your CSS and JavaScript and wait for the download before adding it back into your project. Later in the chapter, we are going to look into the built-in support that Visual Studio 2012 offers that will automatically handle this for you and apply this technique to a web application.
What is bundling?
Bundling CSS and JavaScript is an effective way to reduce the number of HTTP requests that a web page needs to make. The more HTTP requests that a browser needs to make, the longer it takes for a web page to load. This is because each HTTP requests takes time and, quite often, your browser will only be able to download a certain number of files in parallel. By combining all JavaScript files into a single script and similarly combining all CSS into a single StyleSheet, you can severely reduce the number of HTTP requests that your web page makes. For example, if there are two CSS files on a webpage, simply by combining the two files into one you are effectively reducing the number of HTTP requests that a browser needs to make from 2 to 1. There is no reason why combining two JavaScript files together into one should stop them from working just as effectively as if they were two separate files.
In fact, you can actually bundle and minify files together to achieve a greater effect. Together, they not only save on the size of the file, but they also reduce the overall HTTP requests that are needed. As we know, both of these factors work toward reducing the size and number of HTTP requests that a webpage makes.
Bundling is a free and simple win that can significantly improve the overall load time of your webpages. It seems a waste not to take advantage of this ability to speed up your webpage with very little effort.
Summary
In this excerpt, based on chapter 5 of Fast ASP.NET Websites,, we very briefly have covered the all-important aspect of bundling and minifying your CSS and JavaScript files. By applying bundling and minification to a web page, we have effectively reduced the number of requests that each webpage needs to make and also drastically reduced the size of the files that are being requested.
Tweet
About The Author
1 comment:
I prefer an online tool to combine and minify all in one shot.
I use www.blimptontech.com it uses UglifyJS to combine any that you need combined and then minifies or will just minify you JS files.
Post a Comment