One of the first tasks we’ve undertaken on my new project is a performance review of the legacy web application. Performance improvements are very rarely obtained by changing a single setting on a server (although this has been known) but are more generally the aggregated total of a number of minor performance improvements. The “shavings” we’ll focus on are around the size of files being downloaded.
Firstly, run Fiddler against the site – this generates a report of all the requests made, their sizes and whether they are marked as cached or are compressed. Fiddler has a neat feature which allows to “turn on” HTTP compression for a given request to estimate how much the file size is reduced. For more information on using Fiddler, see the Fiddler Power Toy articles Part 1 & Part 2 on MSDN.
HTTP Compression will make a huge amount of difference in transfer speeds – especially if you are using ASP.NET and have a lot of session state. There are several good articles that describe enabling HTTP Compression on IIS and ISA Server. Make sure you enable compression for the following file types:
- .js
- .css
- .htm
- .html
- .aspx
- .axd (an easy one to forget – but this is important if you are using ASP.NET 2.0 as resources such as DetailsView.js, Focus.js, GridView.js, Menu.js, SmartNav.js, TreeView.js, WebForms.js, WebParts.js and WebUIValidation.js are served via a HTTP Handler – WebResource.axd)
Next, look at the files that were actually being downloaded – the site had two CSS files which were separated purely for ease of maintenance; they were about 60 kb in size. These were then merged into a single file and were passed through a free tool called CSSTidy which can reduce CSS file size by stripping out unnecessary whitespace and optimising style statements; for example:
{margin-top:10px; margin-bottom:10px; margin-left:10px; margin-right:10px;}
becomes
{margin:10px;}
It will also perform optimisations across multiple classes – which is where the big savings are generated. The tool showed that we could reduce the file size by ~60%, but once optimised it would be very difficult to update or add to, so we added this optimisation as a step in our nightly build process – so the optimisations were only applied to our test and live environments – not development. The MSBuild step used is listed below:
<Exec Command="C:\Tools\CssTidy.exe C:\Inetpub\wwwroot\test\Style.css -template=highest_compression C:\Inetpub\wwwroot\test\Style.css"/>
Apply the same process to the JavaScript files, but this time using a free tool called Jazmin – the JavaScript minimizer, which strips out unnecessary whitespace and comments. Again this was added to the nightly build process using an MSBuild Exec task. Again this tool managed to reduce file sized by anything up to 40%.