Tuesday, 20 September 2016

Minify HTML content in Asp.net and MVC


I have previously blogged about the importance of serving good speed to you user. Poor web performance reduces your customers. As you continue to improve your web performance of your web application, So you will need to look in different ways and save milliseconds for your page load time.

In Previously I have talked about the minification and bundling concept in Asp.net but minifying HTML content is also very important for your web application. 

Generally, i have used Google PageSpeed Insights to check my website performance, as it provides tips to improve overall performance and page load time below is the image of that website.


Check website performance in this website
Google PageSpeed Tool

I have also used GTmetrix to check my website performance it will provide almost every information which I have required to enhance my web application performance.


Check website performance in this website
GTmetrix to check website performance

If you are Asp.net developer, So there is some options are available to minify your HTML content the one of best I have used is Asp.net HTML Minifier.

The Asp.net HTML Minifier is a tool which is simple command line tool that simply removes white spaces in your HTML. The great thing about this tool it is useful for Asp.net webforms, Asp.net MVC Razor view and MVC web forms and plain HTML files. You just provide the path of your website it simply minifies all your content.

I found this tool from one of my favorite blog of deanhume.com it will provide this tool along with source code, So here is the address of that blog.


After downloading this project along with source code extract that project and go to tool folder in that folder you can get HtmlMinifier.exe we can use this .exe in our visual studio so at the time of publishing it will provide the minified version of HTML.

So let's start the implementation of HtmlMinifier.exe

Step 1: Place this .exe file in our project solution So you can access this .exe file and every time when you publish your website so it will minify your content.

Step 2: Open solution explorer in visual studio and go to properties under this PublishProfiles is present open that file, below is a screen shot for your reference.


Solution explorer
Solution Explorer

Open that file with the extension of .pubxml and placed this code after property group.

  Minify the HTML
  Target Name="CustomAction" AfterTargets="CopyAllFilesToSingleFolderForPackage"
      Message Text=" Minifying files....." 
      Exec Command="c:\htmlminifier.exe $(_PackageTempDir)" IgnoreExitCode="true"
  Target

Don't forget to replace your htmlminifier.exe file path with your original file path.

publish profile
pubxml file

That's it you are ready to publish your profile, Save your pubxml file and publish your project so it will run htmlminifier.exe and only minify the HTML files that get deployed. If you see your output window, so it will look like this

Minify output window
Minify Output window

The secret to getting this to work is "CopyAllFilesToSingleFolderForPackage" step in the built.

If you have any query or suggestion, So I'll be happy to help you.

KEEP CALM and READ ON!!!!.    

Ankur Omar

1 comment:

  1. Nice article. It's very helpful to me. Thank you for share with us. Can you please check my article Fix Autoptimize WP plugin JavaScript optimize issue

    ReplyDelete