Webを高速化するために、私たちに何ができるか？「続・ハイパフォーマンスWebサイト」

2010年7月7日

おとといの記事「グーグルがWebを高速化するために何をしているか」を公開したところ、グーグルの及川さんからこんなつぶやきをもらいました。

Publickey グーグルがWebを高速化するために何をしているか http://goo.gl/KyBk この記事に興味を持った人は、是非、オライリーの「続・ハイパフォーマンスWebサイト」も読んで欲しい。http://goo.gl/davBless than a minute ago via Chromed Bird及川卓也 / Takuya Oikawa
takoratta

本のページをめくるようにWebページの表示を高速化することを目指して、グーグルがWebブラウザやTCP/IP、HTTPといった通信プロトコルの改善を行っているのと同様に、私たちWebサイトを構築する側にも、Webを高速化するために使えるさまざまな手段があります。

それをまとめたのが書籍「続・ハイパフォーマンスWebサイト」です。以前、オライリー・ジャパンの編集担当の方から献本いただいていたので、さっそく紹介しましょう。

Webサイトの待ち時間の80％はフロントエンドの処理によるもの

本書「続・ハイパフォーマンスWebサイト ― ウェブ高速化のベストプラクティス」と、前書「ハイパフォーマンスWebサイト ― 高速サイトを実現する14のルール」には共通の背景があります。それは、前書の紹介文（本記事末参照）にあるようにWebサイトの表示の待ち時間の80％が、実はフロントエンドの処理に費やされている、ということです（実際にはDNSルックアップ待ちなども大きな要素のようですが……）。

Webサイトを高速化する手段として、Webサーバの性能やキャッシュといったことが挙げられがちですが、実はWebページを構成するHTMLやCSSやJavaScript、そして画像やテキストをどう組み上げていくか、ということがなにより大事だ、ということがこの2冊の背景にあります。

前書「ハイパフォーマンスWebサイト ― 高速サイトを実現する14のルール」は、主に一般的なWebサイト、テキストや画像が中心の静的なWebサイトを想定して、高速化を実現する14のルールを紹介していました。

ルール1 : HTTPリクエストを減らす
ルール2 : CDNを使う
ルール3 : Expiresヘッダを設定する
ルール4 : コンポーネントをgzipする
ルール5 : スタイルシートは先頭に置く
ルール6 : スクリプトは最後に置く
ルール7 : CSS expressionの使用を控える
ルール8 : JavaScriptとCSSは外部ファイル化する
ルール9 : DNSルックアップを減らす
ルール10 : JavaScriptを縮小化する
ルール11 : リダイレクトを避ける
ルール12 : スクリプトを重複させない
ルール13 : ETagの設定を変更する
ルール14 : Ajaxをキャッシュ可能にする

そして本書「続・ハイパフォーマンスWebサイト ― ウェブ高速化のベストプラクティス」では、最近増えてきたAjaxなどを用いたダイナミックなWebサイトやWebアプリケーションを想定して、どのように作り込むと高速で応答性の高いWebアプリケーションを実現できるか、さまざまなテクニックを紹介しています。

JavaScriptの遅延ロード、並列ロード、効率的な書き方とは？

本書はプログラミングに関わるさまざまなテクニックを含んでいるため、前書のようなシンプルなルールが並んだ構成にはなっていません。主な章の内容を紹介しましょう。

3章「初期ロードの分割」と4章「実行をブロックしないスクリプトのロード」では、JavaScriptを含むWebページを高速にロードするために、JavaScriptを分割して最初のロードを最小限にして、あとから残りのJavaScriptをロードする「遅延ロード」のテクニックを扱っています。

遅延ロードはどれだけ高速化に有効なのか、そしてロードするときにWebサイトの表示をブロックせずに非同期ロードを実現するには、通常のScriptタグによるロード、XMLHttpRequestによるロードと実行、iframeスクリプト、document.writeによるScriptタグの書き出しなどさまざまな方法の中でどれがよいのか、などを検証していきます。

解説では「唯一の最適解はない」としながらも、XHR evalとXHRインジェクションと呼ばれる手法が使いどころが多いとされています。

5章「非同期スクリプトの組み合わせ」では、非同期ロードを実行した場合に危惧される、ロード前のJavaScriptを参照してしまうことにより発生するエラーや、非同期ロード時のスクリプトの実行順序を維持するにはどうすればいいか、などの課題の解決にサンプルコードを使いながら挑みます。

6章「インラインスクリプトの適切な位置」と7章「効率的なJavaScriptコード」は本書の核となる章といっていいでしょう。インラインスクリプトをCSSの直後に置くと、画像などのロードがブロックされることを実例で検証し、CSSの前かHTMLの最後の方に置くことを推奨しています。

また、JavaScriptではローカル変数の読み書きが群を抜いて高速（グローバル変数よりも速い）なことから、ループの中などで参照されるプロパティ値などは可能な限りローカル変数に代入しておくといった基本的なテクニックから、if文、switch文の高速な条件分岐の書き方として、条件の出現頻度順に書くこと、二分探索アルゴリズムに合わせた記述などが紹介され、for-inループは遅いから使うべきでない、といったことも紹介されています。

よく高速化の例で引き合いに出される文字列の連結では、IE6かIE7なら配列操作の方が速いが、通常は加算演算子と大した違いはないことも説明。

JavaScriptがシングルスレッドであることから、長い処理を実行せざるを得ない場合のテクニックとして、タイマーによって処理を定期的に明け渡すためのパターンについても解説しています。

8章「Comet」では、サーバプッシュ型のテクニックであるCometの原理から処理の手法を具体的に解説。

9章「gzip圧縮再考」では、gzipによる圧縮に対応していないブラウザへの対応と、可能な限りの救済策を紹介。10章「画像の最適化」では、画像フォーマットに踏み込んだ画像圧縮のテクニックやメタデータの削除による画像データの圧縮。

残りは章のタイトルだけを紹介しましょう。11章「主ドメインの細分化」、12章「ドキュメントのフラッシュ」、13章「iframeの取り扱い」、14章「CSSセレクタの単純化」

日本語版では、付録B、C、Dに独自の記事が3本含まれていて見逃せません。「Yahoo! JAPANが実践するWebの高速化」では、画像フォーマットの選び方、スプライト内画像の並べ方、画像の圧縮方法など、表題通りYahoo! JAPANで実際のテクニックが紹介されています。モジラジャパンの浅井智也氏の記事「ブラウザの最新技術を活用したWeb高速化」で、Webブラウザ側の高速化技術などを解説。グーグルの及川卓也氏の記事「Web高速化に対するGoogleのアプローチ」では、一昨日のPublickeyの記事「グーグルがWebを高速化するために何をしているか」で紹介した技術などが解説されています。

職業としてWebサイトに関わる人にお勧め

Webサイトは誰でも簡単に作れる時代になりましたが、よりよいWebサイトを作れるのは、やはり本物のプログラマ、本物の開発者だけだ、ということが本書を読むとよく分かります。

現在では、なにげない普通のWebサイトでも、ウィジェットの1つや2つは使われており、場合によってはjQueryなどでちょっとしたインタラクティブな工夫が凝らしてあったりするでしょう。それを無造作に作るか、それとも性能に気をつけて慎重に作り込むかによって大きな差が生まれることがあり、それができるようになるには本書が示すように多くの専門的な知識が必要となります。

快適なWebサイトかどうかで、利用者の満足度、再訪率、それにクリックレートまで違ってくるとはよく聞く話です。Webサイトの出来不出来が多くの企業の業績に影響するようになっています。職業としてWebサイトを作る立場の人、そしてWebサイトの品質について責任のある人にはぜひお勧めしたい一冊です。

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール
サイトの高速化と聞くと、サーバ負荷分散などバックエンドで実施する大掛かりなパフォーマンスチューニングを思い浮かべますが、じつは待ち時間の80%はフロントエンドの処理に費やされています。ここで紹介する明解なルールに従いさえすれば、この時間を大幅に削減できるのです。