Optimising your ASP.Net Website with Combres

I work on a lot of websites that are heavily designed, this means there are a lot of images, CSS and Javscript files. Once you start including all the Javascript plugins with their associated CSS files the page can have over 10 or 15 http requests and that does not include any of the other assets. Too many http request isn’t great and can really slow down the loading of your site. You really want your users to have rich user experience and you want to deliver it to them as quick as possible.

I recently discovered a cool open source library called Combres. It basically takes all the hard work out of managing your CSS and Javascript files.

The way it does this is by combining all the configured JS/CSS files into a single file and then applying your selected choice of compression to them. This means you can turn your 6 Javascript files and your 5 CSS files into 2 compressed http requests. The benefits are that your files have reduced in size due to the compression and your requests have gone from 11 to just 2. Sounds appealing doesn’t it!

It’s relatively easy to setup, you group and configure your files in a XML file in the app_data folder. It does not blanket group all your files, so you are still able to use the conventional way of referencing CSS and JS files.

Combres is however not a silver bullet that will fix all your website performance issues. You still need to ensure your using the appropriate image types and quality when saving your images. Another good way of reducing the http requests is by combing images into one sprite for your CSS referenced images. A very interesting article about this and optimising your website is Best Practices for Speeding Up Your Web Site.

In summary Combres does the following:

• Reduces http requests for CSS & JS files
• Compresses files in a few different formats (YUI Compressor, Minifier, Closure or no compression)
• Suitable for Web Forms, MVC and Azure
• Can be toggled on and off for debugging

Keep posted as I will be writing up a detailed explanation of how to set it up on your website.