Resourceful ASP.NET MVC: Multiple approaches to optimizing CSS
I’ve written several posts based on the goal of achieving the best balance between performance and maintainability when serving static CSS resources. Now that I’ve covered the various ways CSS makes it way to the browser (through ASP.NET themes, linked externally in <link> tags, written inline in <style> tags, or injected, either through <link> or <style> tags by a third party at runtime), I want to provide a working example of all of this code.
To do that I decided first to make it an example in ASP.NET MVC, as it is a new topic for me and one I find very exciting, and second to synchronize the example code with another project, the Dimebrain Web Framework, which is where I intend to check in all blog source code moving forward. I like this way of sharing source better than linking to archived files in the post, simply because I can build on previous examples while the most current code is always readily available, and that I can use the blog as a way of moving a project forward rather than have it blast you with random bits of (hopefully) useful information.
I will present all of the topics previously covered in other posts as they apply to a working ASP.NET MVC example, built on top of the default ASP.NET MVC project template. When I use the term “C4″, I don’t mean explode, I mean “crunch, combine, cache, and compress”, which is a common optimization strategy for script resources.
Note: The minifier we’ll use is my C# port of CssMin, a part of Yahoo’s YUI Compressor
Example Topics
I want to C4 my ASP.NET Themes dynamically
ASP.NET Themes, when used, are automatically inserted into the <head> of your pages by the ASP.NET runtime. I like using ASP.NET Themes and breaking out CSS files by component. This usually results in multiple CSS files, complete with comments, which is a large payload to deliver to the browser. The example application uses an ASP.NET Theme, and a ViewPageBase class that handles the PreRender event and swaps out all of the ASP.NET Theme links with a link to a CSS handler that does its magic. The original article explaining how this works is here.
I want to C4 any CSS files I have added to the page <head> section
If any external CSS in <link> tags are added to the head section, the ViewPageBase will automatically send these to the same CSS handler that is C4′ing our ASP.Themes. No additional effort is required! In the example application, a file named External.css is referenced in a link. In the final page, it is a handler query that delivers the resource.
Before
After
I want to C4 styles that are directly written on my pages:
This one is a little trickier, if only that you would normally not desire to inline CSS directly in the <head> section, since separating markup from content is always a good design decision. To accomplish this we’ll use ASP.NET MVC’s ActionFilterAttribute, which is a handy way to get access to the request and response as the page is executing. In classic ASP.NET 2.0 we’d use an IHttpModule to attach a stream filter (which I wrote about here), but we only need to provide a custom filter attribute in ASP.NET MVC and apply a minification filter directly to the output stream:
namespace Dimebrain.Web.Mvc.ActionFilterAttributes
{
public class InlineResourcesAttribute : ActionFilterAttribute
{
// Details elided...
public InlineResourcesAttribute()
{
_type = ResourceType.CascasingStyleSheets;
_options = ResourceOptions.ToMinifier;
}
public override void OnActionExecuting(FilterExecutingContext filterContext)
{
var response = filterContext.HttpContext.Response;
// Details elided...
response.Filter = new InlineStylesMinifyStream(response.Filter);
}
}
}
Now we can add the attribute to our base controller:
namespace Dimebrain.Demo.Mvc.Controllers
{
[InlineResources]
public class ControllerBase : Controller
{
}
}
This will cause the inline CSS to get minified before rendering on the page. We’ll leave compressing and combining to the actual page its on, and combining doesn’t apply in this case. Since this minification occurs on every request, it isn’t recommended. You should place your inline CSS in an external file. This still may be a useful option for you if you use third party libraries that inject inline styles against your will.
Before
After (all three approaches)
Hopefully these methods of C4′ing your CSS resources will help you deliver the best possible web applications. Support for similar handling of JavaScript files will make its way into the codebase in the future.
Download: Archived Example
