Menu

Minify HTML in ASP.NET MVC, Web Forms and Umbraco

Updated: February 13, 2017

Ali Taheri


I have recently created a website to find nearest Persian businesses in London to help me learn more about the Microsoft Azure cloud platform and some of its great features. I have worked on many aspects to improve the performance of the site and one of them was to minify HTML to reduce the load time as suggested by Google PageSpeed Insights.

By minifying the HTML of your site, you are reducing the size of the pages that users of your website must download this means a faster website and happier customers.


In this article and in just a few steps, I will show you how you can minify HTML in your ASP.NET project by using the Web One Click Publishing feature of Visual Studio 2015.
 

As a developer you need to consider all available options and choose what works best for your project.

The following options will be discussed in this article: 

1. Minify HTML on the fly

By using this approach the web server must compress HTML every time a page is served, you can reduce this by utilise caching. The advantage of this approach is that, if your project is CMS based, the content will be minified too.  

 

2. Minify views/partial views before deployment

This approach minifies views and partial views by using a simple command line called ASP.NET HTML Minifier before the code is deployed to UAT or Live site. This tool strips out any whitespaces or comments in your HTML files. (works for Web Forms and MVC).

Having said that, it means the source code will always have your unminified version of views which is needed by developers. Another advantage of this approach is that the web server is not overheaded for minifying the files.

The only disadvantage of this approach is that, the content coming from CMS is not minifed unlike the other approach. 

To implement this approach follow the below instructions

1. Download the HTML minifier command line tool from the Github repository.

2. Navigate to the Tool folder and copy "HtmlMinifier.exe" to your project folder. You can copy it to the root level or any folder you like but for simplicity I am going to put it in the root folder of my project.

3. Find the publish profile under Properties -> PublishProfiles-> Example - Web Deploy.pubxml in Visual Studio 2015. 

 Publishing Profile Withing Visual Studio 2016

4. Double click on the Publish Profile to open it (Example - web deploy.pubxml)

5. Add the below XML tag after </PropertyGroup> tag.

 <!-- Minify the HTML-->
  <Target Name="CustomAction" AfterTargets="CopyAllFilesToSingleFolderForPackage" 
         BeforeTargets="MSDeployPublish">
    <Message Text="Minifying files....." />
    <!-- $(SolutionDir) is a the path to the root folder of your project -->
    <Exec Command="&quot;$(SolutionDir)&quot;\htmlminifier.exe $(_PackageTempDir)\Views" 
         IgnoreExitCode="true" />
  </Target>

In this example only cshtml files in the view folders are minified; if your views are stored somewhere else, feel free to update the path. 

I came across the above technique in this article published by Dean Hume and I thought it was worth a separate write-up as I couldn't make it work in Visual Studio 2015. 

Tags

Umbraco Performance HTML Minification
comments powered by Disqus

© 2017 - Ali Sheikh Taheri