html-minifier-terserの全オプションまとめ

本ブログではHTMLをminify（圧縮）してサイトの読み込み速度を上げる方法を紹介していますが、そこで紹介したhtml-minifier-terserの全オプションを解説しようと思います。

▼ サイトの読み込み速度を上げる方法はこちら

html-minifier-terserの使い方をおさらい

コマンドラインベースで利用するのが簡単でおすすめです。

npx html-minifier-terser src/index.html \
  --collapse-boolean-attributes \
  --collapse-whitespace \
  --remove-comments \
  --remove-redundant-attributes \
  --use-short-doctype \
  --remove-attribute-quotes \
  --minify-css true \
  --minify-js true \
  -o dist/index.html

設定ファイルを使う場合は、次のようなjsonファイルを用意してください。

{
  "collapseBooleanAttributes": true,
  "collapseWhitespace": true,
  "removeComments": true,
  "removeRedundantAttributes": true,
  "useShortDoctype": true,
  "removeAttributeQuotes": true,
  "minifyCSS": true,
  "minifyJS": true
}

この場合のコマンドはこちら。

npx html-minifier-terser src/index.html \
  -o dist/index.html \
  -c config.json

コマンドに直接オプションを付ける場合はオプション名をハイフン繋ぎ（ケバブケース）で、設定ファイルの場合は大文字繋ぎ（キャメルケース）で書くので注意してください。

もしくはJavaScriptファイルを作ってnode.jsから実行する方法もあります。一部オプションがCLI経由ではうまく動かないものがあるようなのでこちらも頭の片隅に置いておきましょう。

async function main() {
  const { readFile, writeFile } = require("node:fs/promises")
  const { minify } = require("html-minifier-terser")

  const html = await readFile("index.html", "utf8")

  // ここに任意のオプションを渡す
  const result = await minify(html, {
    collapseWhitespace: true,
    customAttrSurround: [
      [/\{\{#if\s+\w+\}\}/, /\{\{\/if\}\}/],
      [/\{\{#unless\s+\w+\}\}/, /\{\{\/unless\}\}/],
    ],
    collapseBooleanAttributes: true,
    removeAttributeQuotes: true,
  })

  await writeFile("dist/index.html", result)
  console.log("minified!")
}

main()

npmプロジェクトにおいてhtml-minifier-terserをインストールしてから実行してください。

npm install html-minifier-terser
node minify.js

全オプション一覧

caseSensitive

{
  caseSensitive: true;
}

タグ名、属性名の大文字小文字を区別して扱うようにします。主にカスタムタグ用。

通常はタグ名や属性名の大文字は全て小文字に変換されます（下例）が、それをさせないようにできます。

<!-- Before -->
<Tag onClick="handleClick()">Sample Text</Tag>

<!-- After -->
<tag onclick="handleClick()">Sample Text</tag>

caseSensitiveをtrueにするとこの変換が行われません。

規定値：false

collapseBooleanAttributes

{
  collapseBooleanAttributes: true
}

真偽値属性の値を省いて属性名だけにします。

<!-- Before -->
<input type="checkbox" checked="checked" />

<!-- After -->
<input type="checkbox" checked/>

規定値：false

collapseInlineTagWhitespace

{
  collapseInlineTagWhitespace: true
}

display:inline; 要素間の空白を削除します。後述のcollapse-whitespaceと必ず併用する必要があります。

<!-- Before -->
<span>Text</span>     <span>Text</span>

<!-- After -->
<span>Text</span><span>Text</span>

規定値：false

collapseWhitespace

{
  collapseWhitespace: true
}

文章ツリーに影響しない余分な空白・改行をまとめます。要するにHTMLの改行を除去し1行にするということで、一般的なminifyのイメージを実現しているのはこれです。

<!-- Before -->
<ul>
  <li>Sample</li>
</ul>

<!-- After -->
<ul><li>Sample</li></ul>

規定値：false

conservativeCollapse

{
  conservativeCollapse: true
}

空白を完全に削除せず1 個に統一します。これもcollapse-whitespace と併用してください。

<!-- Before -->
<ul>
  <li>Sample</li>
</ul>

<!-- After -->
<ul> <li>Sample</li> </ul>

規定値：false

continueOnParseError

{
  continueOnParseError: true
}

パースエラーがあっても処理を続行するようにします。ただ基本的にパースエラーを無視すると壊れたHTMLが生成されるのであまり指定しない方がいいと思います。

規定値：false

customAttrAssign

// 例
{
  customAttrAssign: ["/\?=/"]
}

カスタム属性割り当て式をサポートできる正規表現の配列を指定し、エラーが出ないようにします。値は正規表現の配列です。

古いバージョンだとVue.jsのディレクティブのような構文でエラーになっていたようですが、今はほぼ気にしなくて良さそうです。ちなみに公式の例で書かれているコード（下例2行目）も今では問題なくminifyされるようになっているようです。

<div v-bind:class="{ isActive === true ? 'active' : '' }"></div>
<div flex?="{{mode != cover}}"></div>

規定値：[]（空配列）

customAttrCollapse

{
  customAttrCollapse: "/^v-bind:/"
}

改行を除去するカスタム属性を正規表現で指定します。値は単体の正規表現です。

通常、HTML標準でない属性部分の改行はそのまま出力されてしまいますが、例えば上記の例のように「v-bind:で始まる属性」を設定するとそれに該当する部分も改行が消えます。

<!-- Before -->
<div
  v-bind:class="{ isActive === true
    ? 'active'
    : ''
  }"
></div>

<!-- After -->
<div v-bind:class="{ isActive === true? 'active': ''}"></div>

規定値：なし

customAttrSurround

独自の囲み表現を正規表現で指定します。これは一部のテンプレートエンジン向けの設定のようです。

例えば次のようなテンプレートエンジン独自の書き方をする部分があった時、通常ではパースエラーを起こしminifyに失敗します。

<input {{#if isActive}}checked="checked"{{/if}} type="checkbox">

これを次のような設定をすることで回避させます。

// json設定ファイルでは使用不可、Node.jsから実行するファイルでのみ使用可能

customAttrSurround: [
  [/\{\{#if\s+\w+\}\}/, /\{\{\/if\}\}/] //開始部分と終了部分をセットにした配列
]

ただしこの設定はNode.jsから実行する形式でのみうまくいきます。コマンドの場合はプログラムに問題があるようでうまくいきません。注意してください。

規定値：[]（空配列）

customEventAttributes

{
  customEventAttributes: ["/^on[a-z]{3,}$/" ,"/^@/"] // @で始まる属性を指定
}

minifyJSオプションが有効時、対象とするカスタムイベント属性を指定するとその中のJavaScriptをminifyします。正規表現で指定します。

<!-- Before -->
<div
  onclick="
    alert('test')
    add(1, 2)
  "
></div>

<!-- After -->
<div onclick='alert("test"),add(1,2)'></div>

デフォルトでonから始まる属性が対象になっています。ここにvue.jsなどで見られる@clickなどを含めたい場合は次のように指定します。設定はマージではなく上書きされるようなので、デフォルトの設定も含めた配列としてください。

{
  customEventAttributes: ["/^on[a-z]{3,}$/" ,"/^@/"] // @で始まる属性を指定
}

規定値：[/^on[a-z]{3,}$/]

decodeEntities

{
  decodeEntities: true
}

可能な限り直接のUnicode文字を使用します。

HTMLでは特殊な文字、入力/表示が難しい文字を安全かつ確実に表現するためのエスケープ表記があります。以下の例を見てください。

<p>HTML では、<p> 要素で段落を定義します。</p>

<p>HTML では、&lt;p&gt; 要素で段落を定義します。</p>

前者のコードは本来一つ目の<p>が開始タグと想定したコードですが、実際には2つ目の<p>も開始タグと認識され以下のように間違って出力されてしまいます。

HTML では、

要素で段落を定義します。

HTML では、<p> 要素で段落を定義します。

こういったことを防ぐためにHTMLエンティティと呼ばれる「&」で始まって「;」で終わる特殊な記法が存在します。書き方には文字実体参照と数値文字参照の2通りあります。例えば以下のような組み合わせ。

表示	文字実体参照	数値文字参照
<	<	<
&	&	&
©	©	©

これをHTMLを壊さない限り実際の文字を使うようにします。

参考：https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax

規定値：false

html5

{
  html5: true
}

HTML5 仕様に従って解析します。デフォルトで有効になっていますが、コマンドライン上でこれを無効にするには
–no-html5オプションをつけてください。

規定値：true

ignoreCustomComments

{
  ignoreCustomComments: ["/^!/", "/^\s*#/"]
}

removeCommentsオプションを設定した時に、残したいコメント正規表現の配列で指定します。初期値では「!」始まりのコメントと「#」始まり（前に空白があってもいい）のコメントはminify時に残ります。

<!-- コメント -->
<!-- #コメント -->
<!--!コメント -->
<!-- !コメント -->

↓

<!-- #コメント -->
<!--!コメント -->

!は余白を許容されていないので4つ目の例は消えてしまいます。

規定値：[ /^!/, /^\s*#/ ]

ignoreCustomFragments

{
  "ignoreCustomFragments": ["/<%[\\s\\S]*?%>/", "/<\\?[\\s\\S]*?\\?>/"]
}

minifyさせないエリアを正規表現の配列で指定します。特定のタグ、ブロック内のエリアを指定する形が多いでしょう。デフォルトではEJSなどの「<%」で始まり「%>」で終わるブロックとPHPなどの「<?」で始まり「?>」終わるブロックがminify対象外になります。

ここに例えば特定のタグを追加したい場合は次のように設定を追加してください。divの部分を他のタグ名に変えれば好きなタグに適用できます。

"ignoreCustomFragments": [
  "/<%[\\s\\S]*?%>/", // デフォルト設定
  "/<\\?[\\s\\S]*?\\?>/", // デフォルト設定
  "/<div[\\s\\S]*?/div>/" // divタグ内を無視する
]

上記例では次のコードがminifyされずそのまま出力されるようになります。

<div>
  <ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ul>
</div>

ただ、正直特定のブロックをminify対象外にするなら<!– htmlmin:ignore –>で囲う方法の方が断然簡単なのでこちらをおすすめします。

<!-- htmlmin:ignore -->
<div>
  <ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ul>
</div>
<!-- htmlmin:ignore -->

規定値：[/<%[\s\S]?%>/, /<\?[\s\S]?\?>/]

includeAutoGeneratedTags

{
  includeAutoGeneratedTags: true
}

ライブラリ内部でHTMLパーサーが不備を見つけてタグを自動生成してくれます。

<!-- Before -->
<p><span>test</p>

<!-- After -->
<p><span>test</span></p>

コマンドラインでこれをオフにしたい場合は–no-include-auto-generated-tagsオプションをつけてください。

規定値：true

keepClosingSlash

{
  keepClosingSlash: true
}

空要素の閉じスラッシュを残します。デフォルトでは削除されます。

<!-- Before -->
<br />

<!-- After -->
<br>

空要素とは例えば<br />などの単体のタグのことで、小要素もなく終了タグもないものを指します。このスラッシュを残したいときはこのオプションを有効にしましょう。

規定値：false

maxLineLength

{
  maxLineLength: 10
}

1行に含めていい最大文字数を指定します。ただし単純にその文字数では改行せずちゃんとHTMLが壊れないような位置で改行をしてくれます。


<!-- Before -->
<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

<!-- maxLineLength: 10の場合 -->
<!-- After -->
<ul><li>
test</li>
<li>test
</li><li>
test</li>
<li>test
</li></ul>

規定値：0（制限なし）

minifyCSS

{
  minifyCSS: true
}

styleタグもしくは各要素のstyle属性内のCSSをminify対象に含めます。

<!-- Before -->
<style>
  body * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
</style>

<!-- After -->
<style>body *{box-sizing:border-box;margin:0;padding:0}</style>

内部的にはclean-cssというライブラリを使用しているのでそちらのオプションを渡すことで詳細な設定ができます。

規定値：false

minifyJS

{
  minifyJS: true
}

scriptタグもしくは各要素のイベント属性（onclickなど）内のJavaScriptをminify対象に含めます。

<!-- Before -->
<script>
  const a = 1
  const b = 2
  const c = a + b
  console.log(c)
</script>

<!-- After -->
<script>const a=1,b=2,c=3;console.log(3)</script>

内部的にはterserというライブラリを使用しているのでそちらのオプションを渡すことで詳細な設定ができます。

上の例を見るとわかりますがコード内容を分析して勝手に処理を変更する場合があります。結果が変わらないとはいえ気になる点ではあるので変更したい場合はterserの設定項目を調べてみてください。

規定値：false

minifyURLs

{
  minifyURLs: "https://example.com"
}

各属性内のURLをminifyします。オプションの値にベースとなるURLを指定すると、それを含むURLを圧縮対象に含めます。

以下はhttps://example.comを指定した場合です。

<!-- Before -->
<a href="https://www.google.com">Google</a>
<a href="https://example.com/test/sample/index.html">sample</a>

<!-- After -->
<a href="//www.google.com">Google</a>
<a href="test/sample/">sample</a>

指定したものは相対パスに置き換えられます。それ以外もプロトコル部分を削除するようです。

基本的には自サイトのドメインを指定することになるでしょう。

規定値：false

noNewlinesBeforeTagClose

{
  "noNewlinesBeforeTagClose": true
}

maxLineLengthを指定した時などminify後に改行が発生した時に、閉じタグ直前には改行を追加しないようにします。

<!-- 設定無効時 -->
<script>
const a=1,b=2,c=3;console.log(3)
</script>

<!-- 設定有効時 -->
<script>
const a=1,b=2,c=3;console.log(3)</script>

規定値：false

preserveLineBreaks

{
  "preserveLineBreaks": true
}

collapseWhitespace設定時、タグ間に改行がある場合に1行分だけ改行を残します。スペースは除去されます。

<!-- minify前 -->
<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

<!-- preserveLineBreaksが無効の時 -->
<ul><li>test</li><li>test</li><li>test</li></ul>

<!-- preserveLineBreaksが有効の時 -->
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>

規定値：false

preventAttributesEscaping

{
  "preventAttributesEscaping": "'"
}

これは後述のquoteCharacterと関連したオプションで、各属性の値をエスケープしないようにします。

quoteCharacterはコード上の引用符を’もしくは”のどちらかに統一させる設定です。

<!-- "quoteCharacter": "'"（シングルクウォーテーション） の時-->
<div class='sample'></div>

<!-- "quoteCharacter": "\""（ダブルクウォーテーション）の時-->
<div class="sample"></div>

ただし場合によって単に文字列置換をしただけではコードが壊れることがあります。例えば次のコードがあった時に”quoteCharacter”: “‘”を指定したとします。

<!-- Before -->
<div v-bind:class="{isActive ? 'active' : ''}"></div>

<!-- After -->
<div v-bind:class='{isActive ? 'active' : ''}'></div>

ただの文字列置換ではシングルクウォーテーションの範囲が壊れていますよね。よってこの場合、実際には次にようにエスケープをした上でminifyが行われます。

 <div v-bind:class='{isActive ? 'active' : ''}'></div>

引用符としてシングルクウォーテーションを使いつつ、値に含まれているものは数値文字参照に変換されます。

preventAttributesEscapingをtrueにすると、この処理がスキップされます。結果として該当部分だけでなくページ全体の引用符指定も効かなくなるようです。

<!-- 入力 -->
<div class="wrapper">
  <div v-bind:class="{isActive ? 'active' : ''}"></div>
  <div class="sample"></div>
</div>

<!-- 1. "preventAttributesEscaping": false, "quoteCharacter": "\"" の時 -->
<div class="wrapper">
  <div v-bind:class="{isActive ? 'active' : ''}"></div>
  <div class="sample"></div>
</div>

<!-- 2. "preventAttributesEscaping": false, "quoteCharacter": "'" の時 -->
<div class='wrapper'>
  <div v-bind:class='{isActive ? 'active' : ''}'></div>
  <div class='sample'></div>
</div>

<!-- 3. "preventAttributesEscaping": true, "quoteCharacter": "\"" の時 -->
<div class="wrapper">
  <div v-bind:class="{isActive ? 'active' : ''}"></div>
  <div class="sample"></div>
</div>

<!-- 4. "preventAttributesEscaping": true, "quoteCharacter": "'" の時 -->
<div class="wrapper">
  <div v-bind:class="{isActive ? 'active' : ''}"></div>
  <div class="sample"></div>
</div>

パターン1、3のように”quoteCharacter”: “\””の時は元のコードの引用符が”なので特に変化はありません、そのまま出力されます。

パターン2、4のように”quoteCharacter”: “‘”の時は、前述の通り”preventAttributesEscaping”: trueだとエスケープ処理に加えて引用符の置換処理自体がスキップされるようです。

規定値：false

processConditionalComments

{
  "processConditionalComments": true
}

条件付きコメント内もminify対象にすることができます。

HTMLには、かつて「条件付きコメント」という仕組みがよく使われていました。特定のブラウザにのみ発動させるHTMLを記述することができます。

<!-- Before -->
<!--[if lt IE 9]>
  <p>この部分はIE9未満のみに表示される</p>
<![endif]--> 

<!-- After -->
<!--[if lt IE 9]><p>この部分はIE9未満のみに表示される</p><![endif]-->

今となってはInternet Explorerもサポートが終了していますし全く知らなくて問題ないのですが、本オプションでminifyの制御ができます。

<!-- Before -->
<!--[if lt IE 9]>
  <p>この部分はIE9未満のみに表示される</p>
<![endif]--> 

<!-- After -->
<!--[if lt IE 9]><p>この部分はIE9未満のみに表示される</p><![endif]-->

規定値：false

processScripts

{
  "processScripts": ["application/ld+json"]
}

指定したtypeのscriptタグ内をminify対象にします。対象に含めたいtypeの文字列を配列で渡してください。

<!-- Before -->
<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "LocalBusiness",
    "name": "サンプル",
    "telephone": "+81-3-1234-5678",
    "address": "東京都新宿区西新宿1-1-1",
    "url": "https://example.com/shop"
  }
</script>

<!-- After -->
<script type="application/ld+json">{ "@context": "http://schema.org", "@type": "LocalBusiness", "name": "サンプル", "telephone": "+81-3-1234-5678", "address": "東京都新宿区西新宿1-1-1", "url": "https://example.com/shop" }</script>

規定値：[]（空配列）

quoteCharacter

{
  "quoteCharacter": "'"
}

属性値の引用符を ' か " で固定します。

<!-- Before -->
<div class="sample"></div>

<!-- After -->
<div class='sample'></div>

規定値：なし

removeAttributeQuotes

{
  "removeAttributeQuotes": true
}

可能なら各属性の引用符を削除します。HTMLにおいて、厳密には属性値の引用符は必須ではありません。したがって除去した方が容量は減ることになります。

<!-- Before -->
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body></body>
</html>

<!-- After -->
<!DOCTYPE html>
<html lang=ja>
  <head>
    <meta charset=UTF-8>
  </head>
  <body></body>
</html>

規定値：false

removeComments

{
  "removeComments": true
}

コメントを削除します。

<!-- コメント -->
<h1>Hello World</h1>

↓

<h1>Hello World</h1>

規定値：false

removeEmptyAttributes

{
  "removeEmptyAttributes": true
}

空または空白だけの属性を削除します。

<!-- Before -->
<div id="" style="" style="">sample</div>
<img src="sample.png" alt="" width="" height="" id="" class="" />

<!-- After -->
<div>sample</div>
<img src="sample.png" alt="" width="" height="" />

上記例のように、全ての属性が削除されるわけではありません。値が空でも必須の属性は削除されず、以下の削除しても安全とされている属性のみが対象となります。

id、class、style、title、lang、dir、onchange、onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup

規定値：false

removeEmptyElements

{
  "removeEmptyElements": true
}

空の内容を持つすべての要素を削除します。

<!-- Before -->
<p></p>
<div></div>

<!-- After -->

規定値：false

removeOptionalTags

{
  "removeOptionalTags": true
}

省略可能なタグを削除します。主にbodyタグ、htmlタグの終了タグが削除されます。

<!-- Before -->
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Heading</h1>
  </body>
</html>

<!-- After -->
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document</title>
  </head>
  <body>
    <h1>Heading</h1>

HTMLの仕様上、実は意外と省略できるタグがあります。詳しくはHTMLの仕様書に譲りますが、削除して問題ない場合に削除してくれるようです。ただ、やはり意図せず壊れる可能性があるのであまりおすすめはしませんね。

規定値：false

removeRedundantAttributes

{
  "removeRedundantAttributes": true
}

デフォルトの値と一致する属性の記述を削除します。

<!-- Before -->
<form action="" method="get">
  <input type="text" />
</form>

<!-- After -->
<form action="">
  <input>
</form>

規定値：false

removeScriptTypeAttributes

{
  "removeScriptTypeAttributes": true
}

scriptタグのtype=”text/javascript”を削除します。

<!-- Before -->
<script type="text/javascript">
  console.log("Hello World")
</script>

<!-- After -->
<script>
  console.log("Hello World")
</script>

規定値：false

removeStyleLinkTypeAttributes

{
  "removeStyleLinkTypeAttributes": true
}

styleタグ、linkタグのtype=”text/css”を削除します。

<!-- Before -->
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
  body {
    background-color: #f0f0f0;
  }
</style>

<!-- After -->
<link rel="stylesheet" href="style.css">
<style>body{background-color:#f0f0f0}</style>

規定値：false

removeTagWhitespace

{
  "removeTagWhitespace": true
}

属性間の空白を削除します。ただしHTML 構文が壊れる可能性あるので注意してください。

<!-- Before -->
<input type="text" id="input" name="input" value="sample" class="sample" />

<!-- After -->
<input id="input"name="input"value="sample"class="sample">

規定値：false

sortAttributes

{
  "sortAttributes": true
}

属性を文書中に出現する頻度順に並べ替えします。

<!-- Before -->
<input type="text" id="input" name="input" value="sample" class="sample" />
<input value="sample" />

<!-- After -->
<input value="sample" class="sample" id="input" name="input" type="text">
<input value="sample">

この例ではvalueが他のものより多いため先頭に来ています。それ以外は同率ですが、同率の時はアルファベット順になるようです。

規定値：false

sortClassName

{
  "sortClassName": true
}

classを文書中に出現する頻度順に並べ替えします。

<!-- Before -->
<div class="Default Active Clear Black"></div>
<div class="Clear"></div>

<!-- After -->
<div class="Clear Active Black Default"></div>
<div class="Clear"></div>

この例ではClearが他のものより多いため先頭に来ています。それ以外は同率ですが、同率の時はアルファベット順になるようです。

sortAttributesとsortClassNameはただの並び替えなので容量は変わりませんが、公式によるとgzipの圧縮率を向上させる場合があるようです。

規定値：false

trimCustomFragments

{
  "trimCustomFragments": true
}

ignoreCustomFragments周辺の空白を削除します。

"ignoreCustomFragments": ["/<div[\\s\\S]*?/div>/"]

上記の設定をしたと仮定します。以下の例を見てください。

<!-- 入力 -->
<div>
  <span>sample</span>
</div>
<div>
  <ul>
    <li>sample</li>
    <li>sample</li>
  </ul>
</div>

<!-- "trimCustomFragments": false の時 -->
<div>
  <span>sample</span>
</div> <div>
  <ul>
    <li>sample</li>
    <li>sample</li>
  </ul>
</div>

<!-- "trimCustomFragments": true の時 -->
<div>
  <span>sample</span>
</div><div>
  <ul>
    <li>sample</li>
    <li>sample</li>
  </ul>
</div>

一応”trimCustomFragments”: true の時は1つ目のdivの終了タグと2つ目のdivの開始タグの間の空白が消えています。正直微々たる差ですがどうせなら指定しておいた方がいいですね。

規定値：false

useShortDoctype

{
  "useShortDoctype": true
}

DOCTYPE宣言を短縮形に置換します。といっても昔のバージョンでの宣言じゃないとほぼ意味ないですね。

<!-- Before -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- After -->
<!doctype html>

規定値：false

特定のコードブロックをminify対象外にする

<!– htmlmin:ignore –>で囲まれた部分はminifyされません。

<!-- htmlmin:ignore -->
<div>
  <ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ul>
</div>
<!-- htmlmin:ignore -->