Minify HTML with .NET MVC ActionFilter

To make our site a tight as possible, I thought we’d explore the idea of removing the white space in our generated HTML.

I’ve had this idea for a long time, but after reading @hugoware post about removing white space, I decided to implement it in my own projects. As with any good code, let’s stand on the shoulder of giants and make it fit our needs.

Normally, if we did a “View Source” on our web page we would see something like this:

Now a lot of good HTML developers like to leave closing html comments and notes in their code. This helps them track end elements in nested code.  For example:

<div id="wrap">
    <div id="content">
     content goes here, with more elements of <>
    </div> <!--end content-->
</div> <!--end wrap -->

The issue we may face on larger pages is there can be a lot of notes and end line comments which can add to the overall size of your page, which the user doesn’t care about but the developer needs for easy editing later.

So how do we achieve this?

We need to minify the generated HTML, thus removing the comments and whitespace as the page is run. Very much the same process we did when minifying our CSS and JavaScript in an earlier post.

As we are working on an .NET MVC project we will look at building an ActionFilter.

The tools

• Microsoft Visual Studio 2010 or Trail editions (Download via Web platform installer)
• A little time to look good.

Creating the ActionFilter

We will start as always with a standard vanilla MVC (Model View Controller) .NET application install, good old “File > New Project > ASP.NET MVC Web Application”

 

Next we will create a folder to hold our ActionFilter, mm what should I call it?

 

Right click on this folder and add a new class called ‘RemoveWhiteSpace.cs’ or whatever you thing is best for you. Your class should look something like this.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace RemoveWhiteSpace.ActionFilters
{
         public class WhiteSpaceFilter
         {

         }
}

Now to add our Inheritance on the Stream and change our ‘Using’ statements to only the ones we need. Thus

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace RemoveWhiteSpace.ActionFilters
{
         public class WhiteSpaceFilter : Stream
         {

         }
}

The Stream requires we implement inherited abstract members, so let’s add the basics to our class and alter the constructor to allow for stream input and filter params

<pre>using System;
using System.IO;
using System.Text;
using System.Web.Mvc;
using System.Text.RegularExpressions;

namespace RemoveWhiteSpace.ActionFilters
{
    public class WhiteSpaceFilter : Stream
    {

        private Stream _shrink;
        private Func<string, string> _filter;

        public WhiteSpaceFilter(Stream shrink, Func<string, string> filter)
        {
            _shrink = shrink;
            _filter = filter;
        }

 
        public override bool CanRead { get { return true; } }
        public override bool CanSeek { get { return true; } }
        public override bool CanWrite { get { return true; } }
        public override void Flush() { _shrink.Flush(); }
        public override long Length { get { return 0; } }
        public override long Position { get; set; }
        public override int Read(byte[] buffer, int offset, int count)
        {
            return _shrink.Read(buffer, offset, count);
        }
        public override long Seek(long offset, SeekOrigin origin)
        {
            return _shrink.Seek(offset, origin);
        }
        public override void SetLength(long value)
        {
            _shrink.SetLength(value);
        }
        public override void Close()
        {
            _shrink.Close();
        }

        public override void Write(byte[] buffer, int offset, int count)
        {
            // capture the data and convert to string 
            byte[] data = new byte[count];
            Buffer.BlockCopy(buffer, offset, data, 0, count);
            string s = Encoding.Default.GetString(buffer);

            // filter the string
            s = _filter(s);

            // write the data to stream 
            byte[] outdata = Encoding.Default.GetBytes(s);
            _shrink.Write(outdata, 0, outdata.GetLength(0));
        }
    }
}

Next we need to add the ActionFilter Attribute. This allows us to decorate our controller later with our minify filter.

<pre>public class WhitespaceFilterAttribute : ActionFilterAttribute
    {

        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {

            var request = filterContext.HttpContext.Request;
            var response = filterContext.HttpContext.Response;

            response.Filter = new WhiteSpaceFilter(response.Filter, s =>
                    {
                        s = Regex.Replace(s, @"\s+", " ");
                        s = Regex.Replace(s, @"\s*\n\s*", "\n");
                        s = Regex.Replace(s, @"\s*\>\s*\<\s*", "><");
                        s = Regex.Replace(s, @"<!--(.*?)-->", "");   //Remove comments

                        // single-line doctype must be preserved 
                        var firstEndBracketPosition = s.IndexOf(">");
                        if (firstEndBracketPosition >= 0)
                        {
                            s = s.Remove(firstEndBracketPosition, 1);
                            s = s.Insert(firstEndBracketPosition, ">");
                        }
                        return s;
                    });
                   
            }

    }</pre>
  

We are almost done, we just need to put it all together and decorate our HomeController.cs with the new ActionFilter.   First we need to add another ‘Using’ to HomeController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using RemoveWhiteSpace.ActionFilters;  //Minify HTML Filter
  

Now to minify our HomeController, you can decorate either on the whole controller or just on an ‘ActionResult’

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using RemoveWhiteSpace.ActionFilters; //Minify HTML Filter

namespace RemoveWhiteSpace.Controllers
{
    [HandleError]
    [WhitespaceFilter]
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewData["Message"] = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult About()
        {
            return View();
        }
    }
}

 With the Filter running we can now see our HTML source code looks a lot different.

This is just a basic page, but comparing the standard HTML page against the minified version we can see we have reduced the download file size even before we add Gzip/Deflate
Before:

After:

Finally

In the last few posts we have covered some of the basics of speeding up your web-site. Putting all these together can really make your pages fly. Now it doesn’t end there, it might be worth you looking at sockets and other alternative options, base64 image in-line to reduce the number http calls. Speed is an ever moving target.

I hope what I shown you over the last few posts helps.

Full project code is available for download (See right hand navigation)

If you found this helpful and would like to buy me a beer to say thanks, please

@ArranM