HTML・CSS・JavaScriptをすべて1つのHTMLファイルにまとめた、いわゆる「単一HTML」のサイトを作ることがあります。
単一HTMLは便利です。
- ファイルが1つだけなので配布しやすい
- GitHub Pagesなどに置くだけで動く
- CSSやJavaScriptの読み込みパスを気にしなくてよい
- オフライン保存もしやすい
一方で、CSSやJavaScriptをHTML内にすべて書いていくと、ファイルサイズがどんどん大きくなります。
今回は、その単一HTMLを「自己解凍形式」にしてみると、実際の使用感がどう変わるのかを試してみました。
今回試したもの
今回、圧縮対象として使用したサイトはこちらです。
圧縮前のサイトはこちらです。
コードはこのような内容です。
圧縮後のサイトはこちらです。
コードはこのような内容です。
結果
ファイルサイズは以下のようになりました。
| 状態 | サイズ |
|---|---|
| 圧縮前 | 214KB |
| 圧縮後 | 48KB |
214KBから48KBなので、かなり小さくなりました。
単純計算では、約22%程度のサイズまで縮んでいます。
ただし、実際にブラウザで開いたときの体感速度は、ほとんど変わりませんでした。
自己解凍形式とは
ここでいう自己解凍形式とは、ざっくり言うと次のような構成です。
- 元のHTML全体を圧縮する
- 圧縮済みデータを別のHTML内に埋め込む
- ブラウザで開いたときにJavaScriptで展開する
- 展開したHTMLを表示する
つまり、HTMLファイル自体は1つのままです。
ただし中身は、元のHTMLをそのまま書くのではなく、圧縮されたデータと、それを復元するためのJavaScriptを持つ形になります。
イメージとしては、以下のような感じです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自己解凍HTML</title>
</head>
<body>
<script>
// 圧縮済みデータを読み込む
// JavaScriptで解凍する
// 元のHTMLとして表示する
</script>
</body>
</html>
実際には、圧縮データや解凍処理が入るため、もう少し複雑になります。
使ってみた感想
一番大きな感想は、
ファイルサイズはかなり小さくなるが、開くまでの時間はほとんど変わらない
ということです。
今回の場合、圧縮前は214KB、圧縮後は48KBになりました。
数値だけ見るとかなり効果があります。
しかし、ブラウザで開いたときの使用感はほぼ同じでした。
これは、元のHTMLが214KB程度であり、そもそも現代のブラウザや回線ではそこまで大きなファイルではないためだと思います。
また、自己解凍形式では、以下の処理が追加されます。
- 圧縮済みデータの読み込み
- JavaScriptによる解凍
- 解凍後のHTMLの反映
そのため、通信量は減りますが、解凍処理が少し増えます。
今回のサイズ感では、その差が体感できるほどではありませんでした。
単一HTMLとの相性
自己解凍形式は、単一HTMLとの相性がかなり良いと感じました。
特に、HTML内にCSSやJavaScriptを直接書いている場合は、圧縮がよく効きます。
HTML、CSS、JavaScriptはテキストなので、同じような文字列が何度も出てきます。
例えば、
- class名
- 関数名
- CSSプロパティ
- インデント
- HTMLタグ
- JavaScriptの構文
などは繰り返しが多いため、圧縮しやすいです。
そのため、単一HTMLが大きくなってきた場合、自己解凍形式にするとかなり小さくできます。
画像を埋め込んでいる場合は効果が小さい
一方で、HTML内に画像をBase64などで埋め込んでいる場合は、圧縮効果が小さくなりやすいです。
特にPNGやJPEGなどの画像は、もともと圧縮済みの形式です。
そのため、それをさらにHTML内に埋め込んでから圧縮しても、大きくは縮みません。
今回のように、HTML・CSS・JavaScriptが中心の単一HTMLであれば効果は大きいです。
しかし、画像データが大部分を占めるHTMLでは、自己解凍形式にしても変化は極小になると思います。
つまり、自己解凍形式が強いのは、主に以下のようなケースです。
- HTMLが大きい
- CSSをHTML内に書いている
- JavaScriptをHTML内に書いている
- テキスト量が多い
- 画像の埋め込みが少ない
逆に、以下のようなケースでは効果が出にくいです。
- Base64画像が多い
- すでに圧縮済みのデータが多い
- 元のHTMLがそもそも小さい
メリット
自己解凍形式にするメリットは、やはりファイルサイズを小さくできることです。
特にGitHub Pagesなどで単一HTMLを公開している場合、1ファイルのまま軽量化できるのは便利です。
外部ファイルに分割せずに済むため、単一HTMLのメリットも維持できます。
メリットをまとめると、以下のようになります。
- 単一HTMLのまま配布できる
- ファイルサイズを小さくできる
- HTML/CSS/JavaScript中心なら圧縮がよく効く
- GitHub Pagesなどにそのまま置ける
- 外部ファイルの管理が不要
デメリット
一方で、デメリットもあります。
一番大きいのは、中身を直接読みにくくなることです。
圧縮前のHTMLであれば、ブラウザの「ページのソースを表示」やテキストエディタで開いたときに、そのまま内容を確認できます。
しかし、自己解凍形式にすると、中身は圧縮データになります。
そのため、ソースを見ても元のHTML構造はすぐには分かりません。
また、初回表示時にJavaScriptで解凍するため、JavaScriptが無効な環境では表示できません。
デメリットをまとめると、以下のようになります。
- ソースが読みづらくなる
- デバッグしづらくなる
- JavaScriptが必要になる
- 解凍処理が追加される
- SEO用途にはあまり向かなそう
- セキュリティ的に警戒される可能性がある
特に、Qiitaの記事や教材としてソースを読ませたい場合には、圧縮前のHTMLも別途用意しておいた方がよいと思います。
実際の使用感
実際に使ってみた感じでは、普通にサイトとして開く分には違和感はほとんどありませんでした。
圧縮後のページを開いても、見た目や操作感は圧縮前とほぼ同じです。
今回の例では、開くまでにかかる時間もほとんど変わりませんでした。
そのため、ユーザー側から見ると、
普通のHTMLページとほぼ同じように使える
という印象です。
ただし、開発者側から見ると、圧縮後のHTMLは編集しづらいです。
そのため、運用としては以下のようにするのが良さそうです。
- 開発用には圧縮前HTMLを使う
- 公開用に自己解凍HTMLを生成する
- 圧縮前と圧縮後の両方を管理する
圧縮後のHTMLを直接編集するのではなく、元HTMLから生成する形にした方が安全です。
どんな用途に向いているか
自己解凍形式の単一HTMLは、以下のような用途に向いていると思います。
- 個人制作ツール
- GitHub Pagesで公開する小規模Webアプリ
- オフラインでも使えるHTMLツール
- 1ファイルで配布したいHTMLアプリ
- CSS/JavaScript込みで完結するページ
- ソースの可読性より配布サイズを優先したい場合
逆に、以下の用途にはあまり向かないと思います。
- SEOを重視するページ
- HTMLソースを読んでもらう教材
- 頻繁に直接編集するページ
- 画像を大量にBase64埋め込みしているページ
- JavaScript無効環境でも表示したいページ
圧縮前と圧縮後の比較
今回の比較では、サイズは大きく変わりました。
圧縮前：
圧縮後：
サイズは以下の通りです。
- 圧縮前：214KB
- 圧縮後：48KB
かなり小さくなっています。
一方で、開くまでにかかる時間はほとんど変わりません。
つまり、今回の範囲では、
軽量化には成功したが、体感速度の向上はほぼない
という結果でした。
まとめ
単一HTMLを自己解凍形式にすると、HTML・CSS・JavaScript中心のファイルではかなり圧縮できます。
今回の例では、214KBから48KBまで小さくなりました。
一方で、ブラウザで開くまでの時間はほとんど変わりませんでした。
そのため、表示速度改善というよりは、
単一HTMLを1ファイルのまま小さくして配布するための方法
として見るのがよさそうです。
特に、HTML内にCSSやJavaScriptをすべて含めているタイプのサイトでは効果があります。
逆に、画像をHTML内に埋め込んでいる場合は、すでに画像自体が圧縮されていることが多いため、変化は小さくなります。
結論としては、
単一HTMLの配布サイズを小さくしたいなら、自己解凍形式はかなり有効
だと思いました。
ただし、開発やデバッグは圧縮前HTMLで行い、公開時だけ自己解凍形式にする運用がよさそうです。