続・ハイパフォーマンスWebサイト

続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス

ハイパフォーマンスWebサイトの続編。本書も、十分良い。
ただし、前書必読。

前書同様、本書も目次を紹介せずにはいられない。

1章 Ajaxアプリケーションとパフォーマンス
2章 応答性の高いウェブアプリケーション
3章 初期ロードの分割
4章 実行をブロックしないスクリプトのロード
5章 非同期のスクリプトの組み合わせ
6章 インラインスクリプトの適切な位置
7章 効率的な JavaScriptコード
8章 Comet
9章 gzip圧縮再考
10章 画像の最適化
11章 主ドメインの細分化
12章 ドキュメントのフラッシュ
13章 iframeの取り扱い
14章 CSSセレクタの単純化
付録 A パフォーマンス関連ツール
付録 B Yahoo! JAPANが実践する Webの高速化
付録 C ブラウザの最新技術を活用した Webの高速化
付録 D Web高速化に対する Googleのアプローチ

前書は、たった200ページでフロントエンドに大きな高速化の余地があることを示した。もはやセンセーショナルですらあった。シンプルで、理にかなった高速化。本書は前書に比べると若干革命度数は低いもののそれでも十分なパワーを備えている。簡単さは減ったものの効果は前書と大きな開きが無いように思える。というより、読者がサーバー管理者であることを前提ならなぜ主ドメインの細分化のような効果の大きいものを前書で紹介しなかったのかとすら思える。

インラインスクリプトの適切な位置とは、一体どこにあるのだろうか？インラインスクリプトが思わぬ処理時間をもたらし、ブロックを行っていないだろうか。
主ドメインの細分化とは、画像ファイルなど複数のファイルをひとつのドメインに配置して、ブラウザが読み込む際には同時に2つまでしか読み込まない制限を回避するテクニックである。n個のドメインに配置すれば2n個のファイルが並列にダウンロードされる。なんと大きな効果！
iframeの取り扱いには要注意。DOMでiframeを扱うのは通常のタグに比べて非常に高コストなのだ。
CSSセレクタの単純化にも注意を払った方がよい。要素の数が大きければ大きいほど、CSSセレクタの適用は十分にユーザーが「遅い」と思うだけの時間がかかるのだ。

「7章 効率的なJavaScriptコード」のようなコード最適化に関する文書を読む際に注意しなければならないことがある。それは、普段書くコードに対して紹介されたコード例を適用してはいけないということ。あくまで最適化したコードの1例であって、それが全てではない。早すぎる最適化は諸悪の根源。ドナルド・クヌースの言うようにホットスポットに対してのみチューニングを行うべきなのだ。
例えば以下のようなコードは普段のコーディングでは絶対に書いてはいけない。

//ループ処理を行う
values = ... //配列

var iterations = Math.ceil( values.length/8 );
var startAt = values.length % 8;
var i = 0;
do {
  switch(startAt)
  {
    case 0 : process( values[i++] );
    case 7 : process( values[i++] );
    case 6 : process( values[i++] );
    case 5 : process( values[i++] );
    case 4 : process( values[i++] );
    case 3 : process( values[i++] );
    case 2 : process( values[i++] );
    case 1 : process( values[i++] );
  }
  startAt = 0;
} while( --iterations > 0);

さらに上記のコード例を書く際はもっと広い範囲に視野を広げなければならない。すなわち、フロントエンドのみで極限まで最適化するのか？と。本書と前書がセンセーショナルなのは最適化の面ではあまり注目されなかったフロントエンドに注目し、多くの効果が見込めるからだ。決してフロントエンドのみで高速化することが目的ではない。フロントエンドでの最適化が概ね達成できたらそれ以上追い求めずにバックエンドの最適化をすべきだ。

局所最適解でも、局所しか見えてなかったら全体最適化に見えてしまう。
小賢しいコードを見たら書きたくなってしまう。
今書いてる箇所がいずれホットスポットになると信じて最適化したくなってしまう。

最適化に関する文書を読む際には本当に注意が必要だ。

そして本書に直接書いてあるわけではないが読めば読むほどGoogle Chromeがどれだけ素晴らしいかがヒシヒシと伝わり、信者にならざるを得ない。Webアプリ製作者がサボって速度が十分でなくともブラウザ側で体感できるほど高速化してくれるのだから。

速度は、誰もが恩恵を受けることができる素晴らしいユーザーエクスペリエンスだ。

誰だって遅いより早いほうがいいに決まってる。