HubSpot CMSから出力されるHTMLを圧縮する

HubSpot CMS では CSS、JavaScript については、条件によって自動で結合・圧縮がかかりますが、HTML の圧縮は基本してくれません。

web サイト高速化において HTML の圧縮は確かに CSS、JavaScript よりも効果は微々たるものですが、厳密な高速化対応が求められたり、なんかこう、気持ち的に HTML も圧縮しておきたいときもあると思います。

そういったときに使える、HTML を圧縮する技をご紹介します。

といっても基本方針は至ってシンプルで、「macro でコードを呼び出す際に、フィルタを使って改行や連続する空白を取り除く」というのが基本方針になります。コードとしては次のような形です。

{{ hoge()|cut('\n')|regex_replace(' {2,}', ' ') }}

まずはフィルタの解説ですが、cutフィルタは引数で指定された文字列を削除します。ここでは改行コードを指定することで、改行を削除しています。

続くregex_replace フィルタでは、第 1 引数に置換対象とする文字列を正規表現で指定し、第 2 引数に置換する文字列を指定します。ここでは 2 つ以上の半角スペースが続く場合は、1 つの半角スペースに置換しています。

仕組みとしてはこれだけのシンプルなものなのですが、コードが macro 化されていることが前提です。弊社が開発する HubSpot CMS テンプレートは SFC（Single File Components）ライクに構築しているため、ほぼ全てのコードを圧縮することができるのですが、SFC になっていないテンプレートから出力される HTML を圧縮するのはなかなか手間のかかる作業だと思います。

そこで SFC に限らず、手っ取り早くコード圧縮できるのがヘッダー・フッターなどの共通インクルードパーツです。例えばヘッダーを次のように 1 つのパーシャルテンプレートとして切り出し、他の各テンプレートからインクルードする、という構成は一般的なものかと思います。

page.html（ページを生成するファイル）

{%- include 'header.html' -%}

header.html

<header>
  ヘッダーの内容が入ります
</header>

手っ取り早く圧縮してみるには、この header.html のファイル内で macro を作成し、即座に呼び出すようにします。以下のようなコードになります。

header.html（変更後）

{%- macro header() -%}
  <header>
    ヘッダーの内容が入ります
  </header>
{%- endmacro -%}
{{ header()|cut('\n')|regex_replace(' {2,}', ' ') }}

このようにすることで、まずは手っ取り早く、全ページに渡りヘッダーのコードの圧縮をすることができます。コード圧縮だけに限らず、執筆時現在はテンプレート開発のベストプラクティスを SFC ライクにすることだと考えていますが、その話はまたいずれどこかでしたいと思います。