Question

I have developed a .net 3.5 c# web application and want to make some performance improvements to it. The app has a large number of javascript files and css files.

Following are some techniques I am looking at implementing:

• Combining javascript files
• Combining css files
• Minimize files
• Change any images in the css files to
  be base64 encoded strings or sprites

The above are some examples of what I want to achieve but my questions are around how I can go about doing such.

I was looking at creating a MSBuild task to do this. But the complication I have is as follows.

I have a large number of pages which containing a number of javascript files. What I would like is when the application is in debug mode, use the individual files, if in release mode, use the combined files. So the first part of the complexity will be that run time decision.

Next issue is for the build task to know which files to combine. Is there anyway that a build task can look at the javascript used on each page and combine the files based on this at runtime?

I have used javascript as an example but the same will apply to css.

The other issue I have is that some user controls also have javascript so they would to be taken in to account also. I am not too concerned though if this cant be achieved.

Final step would be at runtime to output any the build number or some unique number with the javascript/css files as a parameter to invalidate cache in new releases.

I am aware that my question is sketchy but just looking for some advice on this if possible.

Thanks.

Answer 1

I advise against the separate (debug) vs combined (release); this creates additional variables to fight and you will eventually get bitten by this – but only in production. Minified vs original is less clear-cut, but we have seen occasions when the js minifier simply gets it wrong; the minifier version behaves differently. Likewise some CSS minifiers will fail (emitting an empty CSS, typically) if it doesn’t like the input (even if that same CSS works in your browser). For these reasons I’d say develop on the minified version to spot this sooner.

Other thoughts:

• ensure you support gzip/deflate
• ensure you support expiration headers
• image spriting
• a CDN or similar for static content (no cookies; expiry headers enabled; web server in static file mode – no CPU overhead)

(and yes, you will want to combine that with a cache-breaker)