『ハイパフォーマンス Web サイト』が紹介する手軽な Web 高速化テクニック

『ハイパフォーマンスWebサイト―高速サイトを実現する14のルール』（原題：High Performance Web Sites）は、Web サイトの応答時間を短縮するための 14 のルールを紹介する。

コストや手間のかかるバックエンドでのデータ処理の効率化ではなく、フロントエンドでの工夫で、もっと手軽に Web のスピードアップを実現することができるというのが、この本の主張である。それは著者が鉄則と呼ぶ次の仮説に基づいている：

エンドユーザーの応答時間のうち、HTML 文書のダウンロードにかかる時間は10%から20%にすぎない。残りの80%から90%はページ内のすべてのコンポーネントをダウンロードするのに消費される。

この仮説に従えば、『スケーラブルWebサイト』で紹介されているような本来的な処理の高速化・大規模化をやる前に、まずフロントエンドでできることが数多くあることになる。ある意味「目から鱗」である。小冊子なので一度目を通しておくと後で活用できるシーンがあると思う。

著者の Steve Souders 氏は、執筆当時、米国 Yahoo! のパフォーマンス責任者 (Chief Performance Yahoo!) であったが、今は Google（グーグル）に移籍している。この本に関する著者の Web サイトがあり、本で述べられているルールの効果を実際に例題を通して体感することができる。さらに翻訳者によるサイトも充実しており、参考文献へのリンクなど読者へのサポートが提供されている。

本の最後では、米国トップ10 のサイトについて性能改良の余地があるかを確認する。YSlowという Yahoo! で開発された性能評価ツールを使うと、この本で述べられたルールにどの程度従っているかがわかる（→翻訳者サイト）。これはフロントエンドでの性能改善を行うのに、有効な道具となるだろう。

以下、自分用のメモとして 14 のルールを書き留めておく：

ルール1: HTTPリクエストを減らす (Make Fewer HTTP Requests) →著者サイト、→翻訳者サイト

イメージマップ、CSS スプライト、インライン画像、スクリプト・スタイルシートの結合

ルール2: CDN を使う (Use a Content Delivery Network) →著者サイト、→翻訳者サイト
ルール3: Expiresヘッダを設定する (Add an Expires Header) →著者サイト、→翻訳者サイト

遠い未来に無効になる Expires ヘッダの設定、その代替手段としての Cache-Control: max-age や Apache の mod-expires の紹介。
キャッシュの有効性を示すデータ：「キャッシュがある状態で少なくとも1日に1回サイトにやってきた一意なユーザーの数は、全体の40%から60%を占める」「キャッシュがある状態でのページ参照回数は75%から85%になる」
画像以外のスクリプト、スタイルシート、Flash などあらゆるコンポーネントに設定すべき。
逆に、最新コンポーネントを必ず取得させるためには、コンポーネントのファイル名にバージョン番号を付加する。

ルール4: コンポーネントを gzip する (Gzip Components) →著者サイト、→翻訳者サイト

コメント削除、URL 短縮などよりも複雑でなく、最も簡単に転送時間を減らせるのが gzip により圧縮すること。HTML だけでなくスタイルシートもスクリプトも。

ルール5: スタイルシートは先頭に置く (Put Stylesheets at the Top) →著者サイト、→翻訳者サイト

LINK タグを使って HTML 文書の HEAD 部にスタイルシートを置く。これによりプロフレッシブに表示が始まり、ユーザを待たせない。Internet Explorer の実装に依存したテクニック。

ルール6: スクリプトは最後に置く (Put Scriputs at the Bottom) →著者サイト、→翻訳者サイト

スクリプトのダウンロード中は、並列ダウンロードが無効になる。（スクリプトの実行順序を入れ替えないため。）可能ならばスクリプトをページの最後に置くことで、並列ダウンロードの効果を期待できる。

ルール7: CSS expression の使用を控える (Avoid CSS Expressions) →著者サイト、→翻訳者サイト

動的ページの実現に CSS expression を使うと、マウスの移動などのイベントを捕まえて評価するので、開発者の想定以上に高頻度に評価が起こり性能低下につながる。1回限りの評価にとどめる CSS expression 自体への上書き手法や、CSS expression の代替手段としてイベントハンドラを使うべきである。

ルール8: JavaScript と CSS は外部ファイル化する (Make JavaScript and CSS External) →著者サイト、→翻訳者サイト

ページビューが多いサイトでは JavaScript や CSS を外部ファイル化することでコンポーネントとの再利用率を上がって、インラインよりも効果的。しかもキャッシュが効く可能性が高い。場合によってインラインと外部ファイル化を使い分けることが効果的。

ルール9: DNS ルックアップを減らす (Reduce DNS Lookups) →著者サイト、→翻訳者サイト

米国トップ10サイトの DNS の TTL (Time-To-Live) 値は短い。ブラウザの設定で DNS キャッシュの保持して TTL より長い時間がたっても DNS 問い合わせをしないようにできる。ブラウザの設定を鑑みながら、サーバ側では Keep-Alive を使って DNS の問い合わせ回数を減らすことができる。

ルール10: JavaScript を縮小化する (Minify JavaScript) →著者サイト、→翻訳者サイト

JavaScript のコードを縮小化してサイズ削減することでダウンロード時間を短くする。そのためのツール JSMin と ShrinkSafe や、gzip 圧縮と組み合わせた時の効果の紹介。

ルール11: リダイレクトを避ける (Avoid Redirects) →著者サイト、→翻訳者サイト

リダイレクトされるとその HTML がダウンロードされるまで何も表示されない。URL の末尾の / をとるとリダイレクトが働くので、代替手段として Apache の Alias や DirectorySlash を使うことを勧める。
ユーザのトラフィック追跡のためにリダイレクトを使う場合が多いが、代替手段として Referer を使う、画像ビーコンを使う、XMLHttpRequestでビーコンを使うなど、リダイレクトを避ける工夫が望ましい。