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.

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.

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

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.

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

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

Bundling & Minification in Asp.net MVC

Bundling and minification are two techniques you can use in ASP.NET to improve page load performance for your web application. By using bundling you can combine multiple files into one file and by using minification you can optimize your CSS and javascript file to a greater extent. Using bundling and minification improves load time performance by reducing the number of requests to the server and reduced the file size of requested assets(i.e. Javascript and CSS files)

Sections:

• Overview
• Implementation of Bundling
• Implementation of Minification
• Benefits of using bundling and minification 

Overview :

Bundling and minification primarily improves the performance of page, So by using this all server side files are combined and minify into one so it reduces the number of requested to the server and provide better performance to your web application this process is done at the run time and it also maintains key which indicates the version of file. 

Implementation of Bundling :

As we discussed above by use of bundling we can bundle or combined all javascript and CSS file into a single file to achieve this there are 4 simple steps.

Step 1: Open your solution in visual studio and go to App_Start folder and select BundleConfig.cs (if this file is not present in the App_Start folder, So you should manually add this class and take a reference to System.Web.Optimization). Below is the screen shot for your reference.

Solution Explorer

Open this file and put this code inside you BundleConfig.cs

public static void RegisterBundles(BundleCollection bundles)

{

      bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

                        "~/Scripts/jquery-{version}.js"));

      bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

                        "~/Scripts/jquery.validate*"));

      bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

                        "~/Scripts/modernizr-*"));

      bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(

                      "~/Scripts/bootstrap.js",

                      "~/Scripts/respond.js"));

      bundles.Add(new StyleBundle("~/Content/css").Include(

                      "~/Content/bootstrap.css",

                      "~/Content/site.css"));

 }

you can put any number of CSS and javascript file in a single bundle and you also create bundles as per your requirement, Below are the screen shot of BundleConfig.cs file.

BundleConfig.cs

Your 1st step is complete and the longer one is finished.

Step 2 : After all this you need to register this BundleConfig.cs file in Global.asax file under Application_Start event like BundleConfig.RegisterBundles(BundleTable.Bundles);

protected void Application_Start()

{

       AreaRegistration.RegisterAllAreas();

       FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);

       RouteConfig.RegisterRoutes(RouteTable.Routes);

       BundleConfig.RegisterBundles(BundleTable.Bundles);

 }

Step 3: Render this bundle into view by using a small code.

Render Javascript bundle in view you need to call like this @Scripts.Render("~/bundles/modernize")

Render CSS bundle in view you need to call like this @Styles.Render("~/Content/CSS")

The name which is present under Script.Render and Styles.Render is the same name which you have provided at the time of creating a bundle name in bundleconfig.cs

Step 4: To enable bundling you need to follow one more step under the web.config file you need to change compilation debug=" true" to false like this

compilation debug="false" targetFramework="4.5" 

by doing this your bundling will start and you can see this by running your project.  

Implementation of Minification: Minification is a technique where unwanted spaces and commented code have been removed due to this we can reduce the size of file content.

The process of minifying CSS and javascript is same as bundling only one keyword is required to process this. 

BundleTable.EnableOptimizations = true;

put this line in bundle config.cs, After that, your minification will work in run time and run the project in debug="false" then you can see the js and CSS files are bundled and minify also.

below I have attached the screen shot of bundleconfig.cs file.

BundleConfig.cs file after minification code.

Benefits of using bundling and minification: There are a lot of benefits of using bundling and minification it will take less time to get files from the server.

If we are not using bundling and minification technique so it will take a lot of time to get those file below image will show this.

Before bundling and minification, it will take lot of HTTP request

In the above image, we can see there are so many CSS and javascript file coming from the server and each file takes our time to render. So if we combine those CSS and javascript file and minify those file so it will take less and file size will also reduce, See below image for your reference.

After bundling and minification reduce server HTTP request

In the above image, we can see we can combine all CSS and javascript file into one so less HTTP request is there and it will take less time to render.

Hey, friends thanks for reading this article the motive of this article is how we can improve our website performance by using this technique definitely your website performance will increase and give better output.

This is only a one step to increase the performance of the website, In future, i will provide lot's of technique which will help you for increasing performance.

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

KEEP CALM and READ ON!!!!.    

Ankur Omar