ASP.NET Minification using WebMarkupMin

The minification process is one of the most important steps to improve the speed of your website. The minification goal is to decrease the size of the files and resources sent to the users. This process implies removing unnecessary symbols, white characters, and redundant code. It also implies rewriting your code to take up as little space as possible. For example, the JavaScript variables are renamed to one or two letters names. 

Most modern websites minify the JavaScript and CSS files. Some of them, like Google and Facebook, even minify the HTML.

I am a big fan of the library Web Markup Minifier of Andrey Taritsyn. This is often updated and is widely used by many websites and frameworks, including the MiniBlog blogging platform of Mads Kristensen. It supports different frameworks including all versions of ASP Dotnet Core, ASP WebForms, and ASP MVC.  You can also use the core library to minify code as you want.

The nicest thing about the WebMarkupMin library is that it minifies your objects at runtime. This means that it can also minify inline JavaScript and CSS. The CSHTML pages contain Razor syntax that is hard to be minified. On the other at runtime, the HTML is already generated so you can minify without problems.

Web Markup Minifier installation

WecMarkupMin is easy to install:

  1. Install the corresponding NuGet package. For this tutorial, I assume that you have a .NET 6 web application:
    Install-Package WebMarkupMin.AspNetCore6
  2. Add the WebMarkupMin services:
    services.AddWebMarkupMin()
        .AddHtmlMinification()
        .AddXmlMinification()
        .AddHttpCompression(); // this line is optional if you want to include the http compression. It will lower the size of the files.

    You can pass an option delegate that will configure the minifiers. You can for example to exclude some pages, or not remove the comments.

        services.AddWebMarkupMin(options =>
    {
        options.AllowMinificationInDevelopmentEnvironment = true;
        options.AllowCompressionInDevelopmentEnvironment = true;
    }).AddHtmlMinification(options =>
    {
        options.MinificationSettings.RemoveHtmlComments = false;
        options.ExcludedPages = new List<IUrlMatcher>
        {
            new WildcardUrlMatcher("/exclude/e*-pages"),
            new ExactUrlMatcher("/exclude-this-particular-page")
        };
    }

    It is highly configurable so take a look at the library classes and methods.

  3.  Add the middleware before calling MapControllerRoute or UseEndpoints
    app.UseWebMarkupMin();
    
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
    
    
        endpoints.MapRazorPages();
    });

WebMarkupMin and the performance of minification

I have checked for a home page of one of my websites:

Before WebMarkupMin, the page source code has 19428 characters

HTML page before WebMarkupMin minification

After WebMarkupMin Minification, the same page has 14429 characters. That means 25% less than the original file.

After minification using WebMarkupMin

2 thoughts on “ASP.NET Minification using WebMarkupMin”

Leave a Comment