---
title: HubSpot CMSから出力されるHTMLを圧縮する
description: HubSpot CMS では HTML の圧縮は基本してくれません。web サイト高速化において HTML の圧縮は確かに CSS、JavaScript よりも効果は微々たるものですが、厳密な高速化対応が求められたり、気持ち的に HTML も圧縮しておきたいときもあると思います。そういったときに使える技をご紹介します。
---
HubSpot CMSから出力されるHTMLを圧縮する
# HubSpot CMSから出力されるHTMLを圧縮する
[半田 惇志](https://demo.100inc.co.jp/category-test/author/半田-惇志) Jun 6, 2019, 12:00:00 AM
HubSpot CMS では CSS、JavaScript については、条件によって自動で結合・圧縮がかかりますが、HTML の圧縮は基本してくれません。
web サイト高速化において HTML の圧縮は確かに CSS、JavaScript よりも効果は微々たるものですが、厳密な高速化対応が求められたり、なんかこう、気持ち的に HTML も圧縮しておきたいときもあると思います。
そういったときに使える、HTML を圧縮する技をご紹介します。
といっても基本方針は至ってシンプルで、「macro でコードを呼び出す際に、フィルタを使って改行や連続する空白を取り除く」というのが基本方針になります。コードとしては次のような形です。
{%- raw -%}
```
{{ hoge()|cut('\n')|regex_replace(' {2,}', ' ') }}
```
まずはフィルタの解説ですが、[cutフィルタ](https://designers.hubspot.com/docs/hubl/hubl-supported-filters#cut)は引数で指定された文字列を削除します。ここでは改行コードを指定することで、改行を削除しています。
続く[regex\_replace フィルタ](https://designers.hubspot.com/docs/hubl/hubl-supported-filters#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.html のファイル内で macro を作成し、即座に呼び出すようにします。以下のようなコードになります。
**header.html（変更後）**
```
{%- macro header() -%}
{%- endmacro -%}
{{ header()|cut('\n')|regex_replace(' {2,}', ' ') }}
```
このようにすることで、まずは手っ取り早く、全ページに渡りヘッダーのコードの圧縮をすることができます。コード圧縮だけに限らず、執筆時現在はテンプレート開発のベストプラクティスを SFC ライクにすることだと考えていますが、その話はまたいずれどこかでしたいと思います。
[CMS Hub](https://demo.100inc.co.jp/category-test/tag/cms-hub)
[CMS Hub](https://demo.100inc.co.jp/category-test/tag/cms-hub)