I've been looking into improving the performance of a web site that I'm working on and decided to experiment with JavaScript minification and the asp.net <CompositeScript> tag. What exactly does <CompositeScript> actually do? Does it merely combine the Javascript files that appear within the tag or does it also minify them? If it does minify them how good a job does it do?
I decided to look at four scenarios;
- Use the Javascript files as is, that is, no <CompositeScript> and no minification.
- Use the Javascript files as is but with the <CompositeScript> tag.
- Minify the Javascript files using jsmin but with no <CompositeScript> tag
- Minify the Javascript files using jsmin and include the <CompositeScript>.
The jsmin tool can be downloaded from here. It's a command line tool and is rather simple to use.
The following listing contains the Javascript files I used to test with. As you can see the majority of the files are jQuery and jQuery plug-ins. The only exception is the custom master.js file.
27 <Scripts>
28 <asp:ScriptReference Path="~/js/jquery-1.3.2.js" />
29 <asp:ScriptReference Path="~/js/jquery-blockUI.js" />
30 <asp:ScriptReference Path="~/js/jquery-timers.js" />
31 <asp:ScriptReference Path="~/js/jquery-valid8.js" />
32 <asp:ScriptReference Path="~/js/master.js" />
33 </Scripts>
In the first scenario we inject the Javascript as is with no minification or combining. The resulting size of the Javascript files is shown in the following figure. I used Firebug to obtain this listing.
The total size of the five Javascript files is 147KB.
In the second scenario we use the <CompositeScript> Tag and this markup is shown in the listing below.
27 <CompositeScript>
28 <Scripts>
29 <asp:ScriptReference Path="~/js/jquery-1.3.2.js" />
30 <asp:ScriptReference Path="~/js/jquery-blockUI.js" />
31 <asp:ScriptReference Path="~/js/jquery-timers.js" />
32 <asp:ScriptReference Path="~/js/jquery-valid8.js" />
33 <asp:ScriptReference Path="~/js/master.js" />
34 </Scripts>
35 </CompositeScript>
And the output from Firebug is show here. Notice that the five Javascripts have been combined into a single resource and is only 47KB. Is <CompositeScript> minifying the Javascript? Not really, after examining the Headers from Fiddler it appears that the size reduction is a result GZIP. I've included the outpit from Fiddler as well.
The question still remains will minification of the Javascript files prior to composing result in any performance gains.
In scenario 3 we minify the Javascript files using jsmin and remove the use of the <CompositeScript>. The Firebug results are shown here.
The total size of the five Javascript files is 75KB.
The last scenario involves minifying the Javascript files using jsmin and also including the <CompositeScript> tag. The Firebug results are shown below.
Incredible we are now down to 28KB. It appears that there is an advantage to performing minification prior to using the <CompositeScript> tag. Again as before the <CompositeScript> is compressing the Javascript using GZIP. We starting with a Javascript payload of 147KB and reduced it down to 28KB. Minify your Javascript prior to using the <CompositeScript> tag.
One last point I should make is that I only used jsmin to minify jquery-blockUI.js, jquery-timers.js, jquery-valid8.js and master.js. I downloaded the official minimized version of jquery-1.3.2.js from the jQuery site.