---
title: HubSpot CMSから出力されるHTMLを圧縮する｜Tips｜日本トップクラスのHubSpotテック企業 株式会社パンセ
description: HubSpot CMS では HTML の圧縮は基本してくれません。web サイト高速化において HTML の圧縮は確かに CSS、JavaScript よりも効果は微々たるものですが、厳密な高速化対応が求められたり、気持ち的に HTML も圧縮しておきたいときもあると思います。そういったときに使える技をご紹介します。
image: https://demo.100inc.co.jp/hubfs/Imported%20images/logo.png
---

[![株式会社100ロゴ](https://demo.100inc.co.jp/hs-fs/hubfs/Imported%20images/logo.png?width=60&height=45&name=logo.png)](https://demo.100inc.co.jp)

Jun 6, 2019, 12:00:00 AM[CMS Hub](https://demo.100inc.co.jp/blog/tag/cms-hub)

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

## 目次

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

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

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

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

```
     

  
```

まずはフィルタの解説ですが、[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（ページを生成するファイル）**

```
     

  
```

**header.html**

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

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

**header.html（変更後）**

```
     

   

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

  
```

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

- [シェア](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fdemo.100inc.co.jp%2Fblog%2Ftips%2Fminify-html)
- [ツイート](https://twitter.com/share?text=HubSpot+CMS%E3%81%8B%E3%82%89%E5%87%BA%E5%8A%9B%E3%81%95%E3%82%8C%E3%82%8BHTML%E3%82%92%E5%9C%A7%E7%B8%AE%E3%81%99%E3%82%8B%EF%BD%9CTips%EF%BD%9C%E6%97%A5%E6%9C%AC%E3%83%88%E3%83%83%E3%83%97%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%AEHubSpot%E3%83%86%E3%83%83%E3%82%AF%E4%BC%81%E6%A5%AD+%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%91%E3%83%B3%E3%82%BB&url=https%3A%2F%2Fdemo.100inc.co.jp%2Fblog%2Ftips%2Fminify-html)

執筆者：[Admin](https://demo.100inc.co.jp/blog/author/admin)

## 関連記事

## 人気の記事

- Nov 22, 2019, 12:00:00 AM
    - [CMS Hub](https://demo.100inc.co.jp/blog/tag/cms-hub)
  
  
  [カスタムモジュールのリピートコンテンツの入力が面倒な場合の対処法](https://demo.100inc.co.jp/blog/tips/resolve-hassle-of-repeater)
- Dec 30, 2022, 3:22:31 PM
    - [#sample](https://demo.100inc.co.jp/blog/tag/sample)
  
  
  [テストpost（複製）](https://demo.100inc.co.jp/blog/アカデミー練習-1-0)
- Jun 20, 2019, 12:00:00 AM
    - [CMS Hub](https://demo.100inc.co.jp/blog/tag/cms-hub)
  
  
  [CSSやJSの修正をすぐに確認したければ、プレビューURLで](https://demo.100inc.co.jp/blog/tips/check-update-on-preview-url)
- Dec 11, 2017, 12:00:00 AM
    - [ブログ](https://demo.100inc.co.jp/blog/tag/ブログ)
  
  
  [INBOUND 2017参加レポート サブセッション編](https://demo.100inc.co.jp/blog/tips/inbound-2017-subsessions)
- May 9, 2024, 1:20:53 PM
    - [#通常のタグ](https://demo.100inc.co.jp/blog/tag/通常のタグ)
  
  
  [test](https://demo.100inc.co.jp/blog/test-shida)

© Pensees