キャッシュ効果を最大化するDiffable

Webページ読み込みを高速化するテクニックはいくつもあるが、現在のところ取り上げられることが多い方法は、基本的に次の方法に落ち着くことが多い。

• なるべくひとつのファイルにまとめてHTTPリクエストの回数を減らす。
• ファイルはミニファイや圧縮を実施し、GZIP圧縮を効かせた状態で配布する。
• ファイルはなるべくキャッシュが効きやすいようにする。

複数の画像をひとつの画像にまとめてCSSで切り分けて使うテクニックも、CSSの中に画像データを含めてしまう方法も、リソースはすべてひとつのパッケージにまとめて配布可能にする取り組みも、こうした取り組みを実現するためのテクニックのひとつということになる。しかしこの方法にはひとつの問題がある。HTMLやJavaScript、CSSファイルは頻繁に編集するものだ。変更した部分はとても少ないかもしれないが、リソースをまとめてしまってあると、まとめたもの丸ごとダウンロードしなければならない。これでは本末転倒というわけだ。

かといって部分修正でのダウンロードが最小になるようにファイルを分割すれば、今度はHTTPリクエストの数が増え、ページの読み込みが遅くなる。この2つの問題に同時に対処する方法をSteve Souders氏がDiffable: only download the deltas - High Performance Web Sites blogで紹介している。最近発表された新しいプロジェクトDiffableを利用すればいいというものだ。

DiffableではHTML、JavaScript、CSSをひとつのJavaScriptファイルへ統合する。統合されたファイルの先頭には自己展開コードが入っている。ファイルに変更を加えた場合、その変更部分だけをファイルとして用意。Diffableではこの差分ファイルを「デルタ」と呼んでいる。ダウンロードするファイルは1つだけだが、その内容は変更された部分だけなので小さくて済む。HTTPリクエストの数を減らしたまま、転送するファイルも減らすことに成功している。

Diffableが実際にどのように動作するかはDiffableのプロジェクトページに詳しい説明がある。動きを簡単にまとめると次のようになる。

1. 対象がキャッシュにある場合はそれを、なければサーバに要求
2. リソースが最新版である場合はそれを、そうでない場合はサーバに最新版へのデルタを要求
3. リソースを自己展開、必要であればデルタも適用して最新のリソースを使う

どのバージョンからダウンロードしたとしても、フルダウンロードが実施されるのは最初の一回のみで、次回からはそれがたとえどのバージョンへのアクセスだったとしても、そのバージョンへの差分(デルタ)が提供されることになり、差分だけダウンロードすればいいことになる。HTTPリクエストの回数削減と、データ通信量の削減という両方を実現している。

説明によればGoogle Mapsのケースで300KBあるリソースが、Diffableを経由するとなにか変更した場合でも20KBの差分配布まで減ることになるという。キャッシュが効いている限り配布するデータのサイズをとても小さく抑えることが可能になる。Diffableはブラウザに特別な対応が必要というわけでもなく、JavaScriptが動作するブラウザであれば利用可能。現在のところJ2EEで動作するモジュールが提供されている。