Bundling Javascripts & CSS Files

If you are using jQuery for your site, it is possible that eventually your page header section may look like this:

 
<link href="stylesheets/ui.all.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/admin.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/maincontent.css" rel="stylesheet" type="text/css" />

<script src="scripts/jquery-latest.min.js" type="text/javascript"></script>
<script src="scripts/ui.core.js" type="text/javascript"></script>
<script src="scripts/mycustom.js" type="text/javascript"></script>

Now in those lines of code, there are 6 requests being made separately to the server and this can become a bottle neck for your site performance. Both YSlow and PageSpeed (read here and here) recommend reducing the number of requests being made as a way to create a high performance site.

Easy, right? Just combine the files with a simple text editor - both javascript files and css files are plain text anyway! Yes - you can do that. But this approach will yield a nightmare-ish maintainability and just plain ugly.

Justin Etheredge made a small framework to precisely do this - he called it Bundler.Framework. You can read his latest blog post about it here and download the code here. It is very simple to use and I have had excellent results with it. The framework itself is pretty self-explanatory and Justin's posts highlight on how to use it pretty well.

Through this post, I just want to highlight some of the small things I have to do to eventually get it working (and it has been working awesomely).

• Add a refence to Bundler.Framework.dll
• For the code to actually create a single js file (or css), you will need to make sure that your site's compilation is configure to NOT debug. You can do this in web.config, or else your js files will just be listed on one by one instead of being combined:

  <compilation debug="false" targetFramework="4.0">
  

• Bundler also provide options to compress your css and also to minify your js with different minifiers.

   
  <%
      Response.Write(
          Bundler.Framework.Bundle.Css()
              .Add("~/stylesheets/ui.all.css")
              .Add("~/stylesheets/admin.css")
              .Add("~/stylesheets/maincontent.css")
              .WithCompressor(Bundler.Framework.Css.Compressors.CssCompressors.YuiCompressor)
              .RenderOnlyIfOutputFileMissing()
              .Render("/JJCMS/Content/Stylesheets/combined.css")
      ); 
  %>
  <compilation debug="false" targetFramework="4.0">
  

• Bundler also provide options to only render combined js or css file if the rendered file is non-existent. You use the "RenderOnlyIfOutputFileMissing" option. See code above for example.

So now, with Bundler, your js and css will be rendered like this:

 
<script type="text/javascript" src="/scripts/combined.js?r=67EFAB2205D48FBBB390A6F11C8A4002E"></script>
<link rel="stylesheet" type="text/css" href="/stylesheets/combined.css?r=A84FC8E0836CD939A781066B0BBDE028" />

-- read more and comment ...

Installing Visual Studio GDR R2

Visual Studio 2008, by default, will work with SQL 2005 database project, BUT NOT SQL 2008 based. Microsoft provided a GDR (General Distribution Release) to make VS 2008 work with SQL Server 2008. You can work the latest version of the GDR here.

Reading the description in the download link, the requirements are VS2008 SP1, nothing CTP or Beta or Power Tools install. So, I think my box met all those requirements, and I ran the install. To my surprise, it failed and it gives me this message: "Visual Studio Team System 2008 Database Edition GDR Does Not Apply or is blocked by another condition on your system. Please click the link below for more details.".

To which I was not sure of what to do. So by reading the forums and blog postings, I found out that the installer actually write a log file, located in your local data temp file dir. Mine (running on Win 7) is located in: "C:\Users\\AppData\Local\Temp". The files should be labeled like "Visual Studio Team System 2008 Database Edition GDR ... .html". If open one of those, you should see the log generated by the installed and you can detect where it failed.

By examining the log file, my installation failed because it was looking for the SP1 flag in the registry. So even though I have SP1 installed, it did not matter, the installer is just looking in to the flag in the registry and if it does not find it, it abort the installation.

Eventually I have to run the SP1 Preparation Tool and the SP1 itself.

After the SP1 re-installation, the registry setting for SP1 is properly marked as 1 (or true). So the next step is to run again the GDR installer - and it went successfully this time. All is happy now.

Update: Gert Drapers wrote a much more extensive blog post about this here. -- read more and comment ...

Need wallpapers?

Want some themes or wallpapers for your multi-monitors running Windows 7? Here are some sites that I think have some cool wallpapers:

• Visual Studio 2010 Wallpapers
• I Love Windows Phone Wallpaper 
• Personalization Galery from Microsoft
• Simpsons Theme
• Avatar & other bunch

Do you have any particular sites that I can add into this list? Let me know in the comments. And here is the rest of it. -- read more and comment ...

Enabling Expiration/Cache in IIS7

Adding "expiration header" into your static files help the browser to cache those files - therefore reducing the payload in the network in which then increase the performance perceived by user. Both YSlow and PageSpeed highly recommend this approach in their high performance website articles.

You can do this programatically, this post is about enabling this in IIS7 - which is pretty easy.

1. Open IIS Manager
2. Navigate using the tree-view on the left pane to the folder where your static files are located. In most cases these are your static html, image, css, and javascript files. For example, I put all my images in 1 folder called "images" - so I highlighted that folder and on the right pane, in the "Feature View", double click on "HTTP Response Header".
3. Under "Actions" - located top right, click "Set Common Headers"
4. Check "Expire Web Content" checkbox and specify how long you want the files to be cache. I usually set this to 30 days. Or you set a particular date & time too if you want. Hit "OK". Do the same thing for all the folders whose files you want to cache.
5. That's it! Now if you browse your site and look using YSlow or Fiddler or PageSpeed, you will see that the files under the folders are cache by the browser and not retrieved from the server every time.

-- read more and comment ...

How to Turn on IIS7 Compression

One thing you can do to speed up your site is by turning on compression on your web server. This approach is highly recommended by Yahoo in their website performance analysis tool YSLOW as well as Google via PageSpeed.

In essence, compression helps in reducing data payload transmitted between the web server and the client browser. With machines (both the server and client machine) that are relatively powerful nowadays to handle compression easily - this than becomes a very viable and efficient solution to reduce network bottlenecks, thus increasing the perceived response to the browsing experience.

Here is how to do it in IIS7:

1. Open IIS Manager and In "Features" view, double-click Compression. 
2. Choose one or both of the following: 


• Enable dynamic content compression to configure IIS to compress dynamic content. 
• Enable static content compression to configure IIS to compress static content. 


3. Open the configuration file at "C:\Windows\System32\inetsrv\config\applicationhost.config" and make sure your compression settings are correct or if you want to add/remove any compression settings.

Mine looks like this:

 
<httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
    <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
    <dynamicTypes>
        <add mimeType="text/*" enabled="true" />
        <add mimeType="message/*" enabled="true" />
        <add mimeType="application/x-javascript" enabled="true" />
        <add mimeType="*/*" enabled="false" />
    </dynamicTypes>
    <staticTypes>
        <add mimeType="text/*" enabled="true" />
        <add mimeType="message/*" enabled="true" />
        <add mimeType="application/javascript" enabled="true" />
        <add mimeType="*/*" enabled="false" />
    </staticTypes>
</httpCompression>

That's it! Easy!

Now one caveat is that it seems that IIS7 does not compress javascript file immediately, so it may need a few hits before you can detect it using fiddler or firebug etc. I waited for about 2-3 days before eventually YSLow and PageSpeed both detect that all my javascript files are compressed.

-- read more and comment ...