Yahoo provides a tool to help you speed up your webpages called YSlow. Actually, this doesn’t actually speed up your site at all but rather performs an analysis against a set of known best-practices and provides a speed rating and some recommendations. The rating is up to 99 and gives a grade from A (good) to F (I guess for ‘Fail’!).

MvcResourceLoader is designed to make it easier to reference and load external page resources in your ASP.NET MVC Application and ensure that requests are served efficiently following the YSlow guidelines:
  • combining files and using minimal requests
  • adding cache-control headers with long expiration times
  • applying HTTP compression
  • loading from a separate domain

It is especially useful for high-volume sites but will improve the load-times of any site and save bandwidth. I have used it on several sites and successfully transformed a YSlow rating of F into an A-score of 90+.

At first glance it is similar to the script-combining feature in ASP.NET except that it is intended to look at the bigger picture and work at the site level rather than creating different combined files for each page requested. Also, it will enable the referenced resources to be loaded from different domains than the one used for the application itself.

It is useful when developing a site to keep the CSS and JavaScript used by different components in separate files and if using client components such as jQuery plug-ins for instance they will typically be provided in this modular way often with a debug / commented version for use while developing and a minified version for at runtime. While developing a site it is also good to be able to work with the original, un-optimized JavaScript files which makes debugging much easier and browser plug-ins such as Firebug will show you the line number and source file that CSS styles are defined in.

However, you need to switch over versions of files when deploying the site (from debug to minified) and having many references to these external files will result in several HTTP requests being sent to the server which will delay page loading and rendering time - browsers limit the number of simultaneous requests to the same server so the requests are performed in series rather than in parallel. Also, if loading from the same domain then any cookies will also be transmitted with each request wasting bandwidth and without specific server configuration the files will not be cached on the client to avoid re-requesting them with subsequent pages.

The same issue arises when referencing images – if you have a lot of <img> elements on the page (or references to images using url() within StyleSheets) when the browser may end up loading these one after another instead of in parallel. Building this optimization into our application can be time-consuming though and interfere with the development process – we typically just use ‘localhost’ when developing but may want images to load from many different domains at runtime (Google maps uses this technique to speed the loading of map tiles).

MvcResourceLoaded provides the following features
  • Ease development with commented and debug-friendly source files
  • Reduces bandwidth use
  • Improves page response and rendering times
  • Combine multiple stylecheet (.css) and javascript (.js) files into a single request / response at runtime
  • Compress and minimize source files to allow maintenance and debugging with full source
  • Cache versioned resources on client and intermediate proxy servers for faster response
  • Load direct resources (e.g. images) from multiple resource domains (CDN) to maximise parallel downloads and reduce blocking
  • Consistently use the same domain for the same resource URL to ensure efficient use of caching
  • Change resource domained based on request scheme so https requests can be loaded from a single domain (avoid multiple certificates)
  • Automatically add conditional comments and combine resource files with the same conditions
  • Easy switch between debug (add original includes, no compression or minimizing) and release mode
  • Version resource files to enable use of far-future expiry dates safely
  • Control cache duration allowing setting to far future dates so combined files are not re-requested
  • Automatically change css url(...) relative references so they are still valid from new resource URL
  • Resource loading application included

MvcResourceLoader allows you to move separate resource references into a separate .config file and the master page can simply add a reference to a single css StyleSheet or .js JavaScript resource using an extension method of the HtmlHelper class (a feature of ASP.NET MVC):

Last edited Jun 7, 2009 at 2:58 PM by intesoft, version 2