Reduce the weight of stylesheets by 35% at runtime
It is always desirable to produce the smallest amount of client-code at any given time. That includes HTML, JavaScript and CSS files. The more client-code you produce, the longer it takes to download and render the web page. Let’s see how easy it is to reduce CSS files by 35 % at runtime, but first we have to set some rules for the feature.
- No changes to the original .css files must be made
- Must work on all .css files without exception
- No negative performance impact
- Use both the client's and the server's cache
- Update the cache when the .css files change
- Simplest possible implementation
We are going to use a generic handler (.ashx) to reduce the .css files and serve them to the browser. The handler has to do 2 things. It must reduce the files and add them to the browsers cache. The method that reduces the file, removes all unnecessary whitespace and comments. The more whitespace and comments you use, the more it will reduce the file.
<%@ WebHandler Language="C#" Class="css" %>
using System;
using System.Web;
using System.IO;
using System.Text.RegularExpressions;
using System.Web.Caching;
public class css : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string file
= context.Server.MapPath(context.Request.QueryString["path"]);
ReduceCSS(file,
context);
SetHeaders(file,
context);
}
/// <summary>
/// Removes
all unwanted text from the CSS file,
/// including comments and whitespace.
/// </summary>
private void ReduceCSS(string file, HttpContext context)
{
FileInfo fi
= new FileInfo(file);
//
Make sure that it only accesses .css files
if (!fi.Extension.Equals(".css", StringComparison.OrdinalIgnoreCase))
{
throw new System.Security.SecurityException("No
access");
}
string body
= fi.OpenText().ReadToEnd();
body
= body.Replace(" ", String.Empty);
body
= body.Replace(Environment.NewLine, String.Empty);
body
= body.Replace("\t", string.Empty);
body
= body.Replace(" {", "{");
body
= body.Replace(" :", ":");
body
= body.Replace(": ", ":");
body
= body.Replace(", ", ",");
body
= body.Replace("; ", ";");
body
= body.Replace(";}", "}");
body
= Regex.Replace(body, @"/\*[^\*]*\*+([^/\*]*\*+)*/", "$1");
body
= Regex.Replace(body, @"(?<=[>])\s{2,}(?=[<])|(?<=[>])\s{2,}(?= )|(?<=&ndsp;)\s{2,}(?=[<])", String.Empty);
context.Response.Write(body);
}
>
>
>
/// <summary>
/// This
will make the browser and server keep the output
/// in
its cache to eliminate negative performance impact.
/// </summary>
private void SetHeaders(string file, HttpContext context)
{
context.Response.ContentType
= "text/css";
//
Server-side caching
context.Response.AddFileDependency(file);
context.Response.Cache.VaryByParams["path"]
= true;
//
Client-side caching
context.Response.Cache.SetETagFromFileDependencies();
context.Response.Cache.SetLastModifiedFromFileDependencies();
}
>
>
>
public bool IsReusable
{
get
{
return false;
}
}
}
Implementation
Download the css.ashx file below and add it to the root of your website. Then change the path to the stylesheet in the header of the web page to point to the css.ashx with the original .css file name as parameter:
<link rel="stylesheet" type="text/css" href="css.ashx?path=common.css" />
<link rel="stylesheet" type="text/css" href="css.ashx?path=folder/menu.css" />
Comments
Comments are closed