In a normal webpage there is a lot of whitespace. We put it there in form of tabs and carriage-returns in order to make the document more maintainable and easier to read. But it has its price in terms of adding to the overall weight of the document in kilobytes and it takes longer for the browser to render a page with a lot of whitespace. This is especially true for IE6, which renders whitespace a lot slower than its counterparts.

The problem is, we don’t want to write html without whitespace. It would make it impossible to maintain. What we are looking for is an automatic way to filter the whitespace at runtime. In ASP.NET this is easy. You can override the page’s Render method and do the filtering in there. We also want to be able to turn the filtering on and off easily, because when we develop we often want to look at the rendered html code and make sense of it.

Here is an example that does just that. It overrides the render method of the page and is turned on/off in the web.config.

Implement this on the aspx page or even better on the master page if you use ASP.NET 2.0:

//Add this to the top of the page
    using
System.Configuration;
    using System.Web.UI;
    using System.Text.RegularExpressions;

//Overrides the Render method
    protected override void Render(HtmlTextWriter writer)
    {
        using (HtmlTextWriter htmlwriter = new HtmlTextWriter(new System.IO.StringWriter()))
        {
            base.Render(htmlwriter);
            string html = htmlwriter.InnerWriter.ToString();

            if ((ConfigurationManager.AppSettings.Get("RemoveWhitespace") + string.Empty).Equals("true", StringComparison.OrdinalIgnoreCase))
            {
                html = Regex.Replace(html, @"(?<=[^])\t{2,}|(?<=[>])\s{2,}(?=[<])|(?<=[>])\s{2,11}(?=[<])|(?=[\n])\s{2,}", string.Empty);
                html = Regex.Replace(html, @"[ \f\r\t\v]?([\n\xFE\xFF/{}[\];,<>*%&|^!~?:=])[\f\r\t\v]?", "$1");
                html = html.Replace(";\n", ";");
            }

            writer.Write(html.Trim());
        }
    }

and add this to the web.config appsetting section:

<add key="RemoveWhitespace" value="true"/>

It's as easy as that and the overhead is reasonable. I use this on the most of the websites I build and have never noticed any negative impact in any way.

Update, May 4th 2006
Some have had their problems with this method, complaining that it screws up the HTML and embedded JavaScript. I've modified the method to address these issues and created a safe whitespace removal method.

Comments


Comments are closed