Coding Tips & Tricks


Home > Performance

A Simple HTML Minifier for ASP.NET

I have previously blogged about the importance of serving your users web pages with speedy load times. Poor web performance equals lost revenue and customers. As you continue to build and improve on the web performance of your site, you will need to look for ingenious ways to squeeze those precious milliseconds from your page load time.

I often use the Google PageSpeed plugin to check the performance of my websites, as it provides handy tips to improve the overall performance and page load times. Whilst I was recently using the Google PageSpeed plugin, I spotted a rule that I haven't paid much attention to - up until now.

Google PageSpeed Minify HTML

The Google PageSpeed best practices state that "Compacting HTML code, including any inline JavaScript and CSS contained in it, can save many bytes of data and speed up downloading, parsing, and execution time". This means that in the same way that you might minify your external JavaScript and CSS files, your page load times will also benefit from having minified HTML. Minifying HTML might seem like overkill, but on larger HTML pages it can be a great way to save on those precious bytes.

If you are an ASP.NET developer, there are currently a few options available to you. Mads Kristensen created an HTTP Module for ASP.NET that minifies HTML on the fly, and there is also a Nuget Package that minifies ASP.NET MVC Razor views. However, most of these options require you to process the HTML on the fly. I wanted to find a way to minify the files before I deployed them, so that there is zero overhead on the website. This is where the ASP.NET HTML Minifier comes in.

The ASP.NET HTML Minifier is a simple command line tool that simply strips out any whitespace in your HTML. The great thing about this tool is that it isn't only for MVC Views, it can be used for ASP.NET Web Forms, ASP.NET Views (Razor & Webforms) and plain HTML files. You simply need to specify the folder of your website, and it will crawl and minify all the appropriate files.

The best approach is to actually use the ASP.NET HTML Minifier as part of your build process and hook into the MSBuild files. In this article, you will learn how to use the ASP.NET HTML Minifier as part of your build process to effectively reduce the size of your HTML files.

Before we dive into the implementation, let's take a look at the before and after results of minification. I took a standard HTML file and ran it through the ASP.NET HTML Minifier.

Minify HTML

In the table above, you can see the before and after results of the minification. By simply minifying the HTML, I managed to save around 20% off the original file size - awesome! This might not be the case with every file that you minify, but it can certainly make a difference on larger HTML files.

You also wouldn't want to minify your views or web pages while you are still in development, that is why it is better to use this tool and minify when you build and deploy the code.

Minifying on publish in Visual Studio 2012

First, start off by downloading the HTML minifier command line tool from the Github repo. You can place this in a generic location as it can be shared amongst your different web applications as you need it. In order to add it to your build file, you will need to edit the publish profile in Visual Studio 2012. To do this, expand the properties folder in your Solution Explorer, then expand the PublishProfiles folder.

Visual Studio Solution Explorer

If you have previously deployed an application using the Publish Web feature in Visual Studio, you will notice that there is a file in this folder. In my case, there is a file called ExampleApplication.pubxml. You will need to edit this file and add a new target.

You will need to replace the Command location with the location that you copied the HTML Minifier to. That's it. Save the pubxml file and the next time that you publish the web project, the HTML Minifier will run and only minify the HTML files that get deployed. When publishing your application using Web Publish, you should notice the output window look something similar to the one below.

Visual Studio Output Window

The secret to getting this to work is the "CopyAllFilesToSingleFolderForPackage" step in the build. For more information on MSBuild and the powerful features that it offers, check out the MSBuild page on the MSDN site

Get the source code

If you would like to view the source code, please take a look on the Github repo. Although it is a simple project, if you have any ideas for features please also feel free to contribute to the repo.








Comments

Vasi - 10/9/2013
The binary exe ignores the command-line arguments, because the target directory path for this tool is hard-coded to "C:\Users\d.hume\Desktop\file", see https://github.com/deanhume/html-minifier/blob/master/ViewMinifier/Program.cs#L13

Jeremy - 10/9/2013
What are the differences in page size after you factor in compression? Pretty interesting technique, and one I haven't really considered... Also, wouldn't the nuget package that minimize the razor views only need to do it at runtime once? I'm pretty sure it is only parsed once.

Dean Hume - 10/9/2013
@Vasi - Good spot! My mistake, and I've updated the code and release. https://github.com/deanhume/html-minifier/blob/master/ViewMinifier/Program.cs

Dean Hume - 10/9/2013
@Jeremy - Good point. yes compression would lighten the page weight even further. Also, on complex sites, the Nuget package would need to process multiple instances for dynamic web pages.....all this means extra work at runtime!!

devtools.korzh.com - 10/20/2013
Oh, good advice, thnx.

devtools.korzh.com - 10/20/2013
Oh, good advice, thnx.

Rodrigo Moreno - 12/12/2013
Hi, I used the minifier, but i'm having a lot of problems with my commentaries. When there is a part of my code with "//", the rest of the line will get commented. How do you guyz deal with this?

Murilo - 2/27/2014
Hi, I used the minifier, but I am having many problems with accents in words. Example: a word written "Seja Sócio" becomes "Seja Sócio". What do I fix this?

Fabricio - 4/21/2014
Just to inform that the program only minimizes files in subfolders, skiping files in the root folder, such as Default.aspx and Index.aspx. I put a /../ on the command line and works. Also noticed that the Master pages are not included, believe that only add the .master in extensions. Tks

Fabricio - 4/21/2014
@Murilo, use Entidades HTML, por exemplo, no caso,

Martin - 5/5/2014
This works great for file deploy, but how to do this for Web Deploy?

Lukasz - 5/9/2014
There's problem with IE conditionals, which are comments: (i can't paste example here - first example from web: http://www.quirksmode.org/css/condcom.html) I can modify regex to support these kind of comments, but how to optimize inner body of such comment?

Murilo - 6/12/2014
@Fabricio não posso utilizar Entidades HTML, o sistema está pronto, impossível modificar tudo.

dd - 7/28/2014
For Web Deploy you add this target attribute: BeforeTargets="MSDeployPublish"

Todd - 7/31/2014
So correct me if I am wrong but this will only work if you do not compile your MVC views correct? If I remember correctly the cshtml files are all empty placeholders when you compile the MVC views. So if this is correct I wonder how we can actually use both, minifiy the html and then compile views

vimalprakash - 8/15/2014
How to i setup for azure projects, while package

Andrey Taritsyn - 9/16/2014
Hello, Dean! What can you say about the WebMarkupMin (http://webmarkupmin.codeplex.com)?

roydukkey - 12/12/2014
How can this be done from deploy if the site is precompiled?


Add your comment

300 Characters left


Please fill this in to confirm that you are human