HTML minify your Episerver site with WebMarkupMin

With this awesome httpmodule your html output will be 10-20%* smaller. This is what you need to do with Episerver installations.

icon of user profile

Published 22th of december 2018
Episerver > 9

Did you know this code is valid HTML?

<!DOCTYPE html>
<title>Gosso Devblog</title>
<p>Awesome!

Yes! According to HTML Specs and The Google Style Guide for HTML, omitting all optional tags is recommended. Meaning also end tags on optional tags can be removed. That includes <html>, <head>, <body>, <p>, <tr>,<td> and <li>.

yeah, but you dont want to do that in your IDE… do you?

WebMarkupMin to your help!

WebMarkupMin minifies the HTML at runtime:

The Web Markup Minifier (abbreviated WebMarkupMin) – a .NET library that contains a set of markup minifiers. The objective of this project is to improve the performance of web applications by reducing the size of HTML, XHTML and XML code.

WebMarkupMin absorbed the best of existing solutions from non-microsoft platforms: Juriy Zaytsev’s HTML Minifier (written in JavaScript) and Sergiy Kovalchuk’s HtmlCompressor (written in Java).

Minification of markup produces by removing extra whitespace, comments and redundant code (only for HTML and XHTML). In addition, HTML and XHTML minifiers supports the minification of CSS code from style tags and attributes, and minification of JavaScript code from script tags, event attributes and hyperlinks with javascript: protocol.

Why minify?

Minification is a performance optimisation, designed to reduce the amount of data being transferred over the network.

Episerver init config

If you minify the Episerver UI, is won’t look good anymore, therefor you need to exclude your UI path from that using a InitializationModule like this:

 [InitializableModule]
    [ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
    public class WebInit : IInitializableModule
    {
        public void Initialize(InitializationEngine context)
        {
            HtmlMinificationManager.Current.ExcludedPages.Add(new WildcardUrlMatcher("/episerver/*"));
            HtmlMinificationManager.Current.ExcludedPages.Add(new WildcardUrlMatcher("/utils/*"));
            HtmlMinificationManager.Current.MinificationSettings.WhitespaceMinificationMode = WhitespaceMinificationMode.Safe;
        }

        public void Uninitialize(InitializationEngine context)
        {
        }
    }

I needed to exclude “utils” because i had some UI files pointing there.

Other configs/Tips:

If you somehow need to have your white space and new lines in some part of your output because you css coded that way, you may ignore the minifycation with a comment code:

<!–wmm:ignore–> do not minify <!–/wmm:ignore–>

 <!--wmm:ignore-->@Html.DisplayFor(m => m.CurrentPage.MainIntro)<!--/wmm:ignore--><!-- ignore row break-->

When using css “white-space: pre-line;” you want the browser to <br> on line-break.

What about Angular, KnockoutJS, React JS component comments?

Yes it is taken care of! magic.

More config options with HtmlMinificationManager.Current.MinificationSettings.

It´s all configurable, these are the settings:

WhitespaceMinificationMode
RemoveHtmlComments
RemoveHtmlComments­FromScriptsAndStyles
RemoveCdataSections­FromScriptsAndStyles
UseShortDoctype
PreserveCase
UseMetaCharsetTag
EmptyTagRenderMode
RemoveOptionalEndTags
PreservableOptionalTagList
RemoveTagsWithoutContent
CollapseBooleanAttributes
AttributeQuotesRemovalMode
RemoveEmptyAttributes
RemoveRedundantAttributes
RemoveJsTypeAttributes
RemoveCssTypeAttributes
PreservableAttributeList
RemoveHttpProtocol­FromAttributes
RemoveHttpsProtocol­FromAttributes
RemoveJsProtocol­FromAttributes
MinifyEmbeddedCssCode
MinifyInlineCssCode
MinifyEmbeddedJsCode
MinifyInlineJsCode
ProcessableScriptTypeList
MinifyKnockout­BindingExpressions
MinifyAngular­BindingExpressions
CustomAngularDirectiveList

WebMarkupMin.AspNet4.Mvc package

Rather have control over where to minify? use the controller approach:

 public class HomeController : Controller
{
        …
        [CompressContent]
        [MinifyHtml]
        [OutputCache(CacheProfile = "CacheCompressedContent5Minutes")]
        public ActionResult Index()
        {
            …
        }
}

Link: https://github.com/Taritsyn/WebMarkupMin/wiki/ASP.NET-4.X-MVC

How to enable/test it on localhost

Enable it locally by setting the compilation attribute debug=false in web.config

Installation

In Package Manager Console:
Install-Package WebMarkupMin.AspNet4.HttpModules

Inserts the following:

  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true">
      <add name="HtmlMinificationModule" type="WebMarkupMin.AspNet4.HttpModules.HtmlMinificationModule, WebMarkupMin.AspNet4.HttpModules" />

Live example:

Copy and paste: “view-source:https://blogg.kriminalvarden.se/” to view source with WebMarkupMin.AspNet4.HttpModules enabled

Try your HTML kb savings here

http://webmarkupmin.apphb.com/minifiers/html-minifier

* the percent to save here is fluctual, the more html lines, the more to save using minification.

Further reading
SEO Terms
  • Google speedtest minify html css javascript
  • How to minify your episerver web site

About the author

Luc Gosso
– Independent Senior Web Developer
working with Azure and Episerver

Twitter: @LucGosso
LinkedIn: linkedin.com/in/luc-gosso/
Github: github.com/lucgosso