Combining your scripts and style sheets with SquishIt

One of the rules mentioned in most performance-analyzing tools is “Combine your JavaScript.” Basically this means that instead of this:

<script type="text/javascript" src="/scripts/one.js></script>
 
<script type="text/javascript" src="/scripts/two.js></script>
 
<script type="text/javascript" src="/scripts/three.js></script>
 
<script type="text/javascript" src="/scripts/four.js></script>
 
<script type="text/javascript" src="/scripts/five.js></script>

You want to do this instead:

<script type="text/javascript" src="/scripts/complete.js></script>

So what’s the problem with approach number 1? When your browser parses the HTML and reaches the script tag, it makes an http request to fetch the script referenced in the src attribute. The rendering of the page blocks, until the script is loaded. Combining the five scripts into one removes the overhead of doing four http requests. The combined script will of course get the same size as the five individual scripts, but the browser only needs to do one request to get it.

You can manually combine your scripts, but this is tedious and error prone. Instead you should use a tool like SquishIt by Justin Etheredge. Justin explains the concept in great detail here. The basic idea is to keep you scripts and style sheets separate and combine them at runtime. All you need to do is download SquishIt, reference the SquishIt.Framework.dll in your project, import the SquishIt.Framework namespace in your master page, and add the following line instead of the above five script imports:

<%= Bundle.JavaScript()
.Add("/scripts/one.js")
.Add("/scripts/two.js")
.Add("/scripts/three.js")
.Add("/scripts/four.js")
.Add("/scripts/five.js")
.Render("/scripts/combined_#.js")
%>

SquishIt will generate a file name combined followed by a hash of the five files. All at runtime! It doesn’t get much better than this. We still have our scripts in separate logical files, but the clients only have to request one file. The same API is used for style sheets as well. Here you need to call the Css() method on the bundle class instead.