推薦の言葉
この本を手に取った皆さんは幸運です。そして、より重要なのは、皆さんが作るウェブサイトの利用者も幸運だということです。同僚のSteve Soudersがこの画期的な本の中で紹介している14の手法のいくつかを実践するだけで、皆さんのウェブサイトは即座に高速化されます。サイトの利用者は、皆さんに感謝の念を抱くことになるでしょう。
その理由をご紹介しましょう。ウェブサイト構築の一端を担うフロントエンド・エンジニアとして、皆さんは大きな権限を持ち、それと同時に大きな責任も負っています。皆さんは利用者を守る最後の砦なのです。皆さんの決断によって、使いやすいサイトになるか、使いにくいサイトになるかが決まってしまうのです。私たちに課せられた第一の仕事は、利用者が欲するものを素早く提供することなのです。この本は、利用者を(そして皆さんの上司を)満足させるための道具箱です。なんといっても素晴らしいのは、この本に書かれた手法を実践すれば、ほとんどの場合、たった一度の作業で、遠い将来までその作業の恩恵に浴することができる点です。
サイト高速化に対する皆さんの考え方は一新されることになるでしょう。SteveがYahoo!の我々のグループのためにパフォーマンスに関する調査を始めた頃、私はパフォーマンスの大部分はバックエンドに関わる問題だと思っていました。しかしSteveはフロントエンドの問題が全体の80%を占めることを明らかにしたのです。フロントエンドのパフォーマンス向上に関係するのは、画像の最適化、CSSやJavaScriptの外部ファイル化といった事柄だと思っていましたが、じつはそれだけではなかったのです。今皆さんが手にしようとしている14のルールは、こういったもの以外にも、数多くの要因があることを示しているのです。
私は、Steveが見つけ出してくれたルールをいくつかのサイトに適用してみました。高速化が完了したはずのサイトが、さらに高速化され、ほぼ倍の速度で描画されるのを見るのは驚きでした。Steveの説明は理にかなっており、広範かつ的確なデータに基づいています。Steveが見つけ出したルールには説得力があり、同時に強いインパクトをもっています。
「フロントエンド・エンジニアリング」の分野はまだ誕生したばかりですが、皆さんの手にあるこの本は、この分野の成熟にとって非常に重要な一歩となるでしょう。そして、この本によって、ウェブサイトの標準が一段上がり、より質が高く、より高速な(つまり、より楽しい)サイトが世の中に広まることになるでしょう。
この本によって、より高速なウェブサイトが増えますように!2007年8月 サンフランシスコにて
Yahoo! プラットフォームエンジニアリング部門
Nate Koechley
まえがき
中学2年のとき、私は歴史の授業で産業革命のときに、効率化の専門家がいたことを学びました。当時の技術者が、製造ラインに問題の箇所を見つける手法、そしてそれを克服する手法に、私は夢中になりました。その中でも特に私が感心したのは、高さ調節可能な踏み台でした。この踏み台のおかげで、背の高さがまちまちな労働者の誰でもが楽にコンベヤーベルトに手が届くようになったのです。簡単な投資が、製造過程全体の効率化をもたらしたのです。
あれから30年後、私はこの本にあげたルールの数々と、19世紀の踏み台を比較してニタリとしています。どちらも、既存のものを改良する技法です。先行投資は必要ですが、そのコストは得られるものに比べれははるかに小さいものです。そして、一旦このような改善策が導入されれば、開発過程全体にわたって効率化が可能になるのです。この本で紹介する、パフォーマンスの高いウェブサイト構築のための14のルールが、皆さんのサイトとその利用者にとって、有用なものとなることを願っています。
本書の構成
導入となる短い2つの章に続き、この本の中心となる、パフォーマンス向上に役立つ14のルールを紹介します。それぞれのルールを1章ずつ、優先度の高い順に解説しています。「すべてのサイトにすべてのルールを適用しなければならない」というわけではなく、また「あるルールをすべてのサイトに同じように適用しなければならない」というわけでもありませんが、どのルールも検討に値するものです。最終章では、パフォーマンスの観点から見たウェブページの解析法を、具体例を見ながら解説しています。
A章 フロントエンドのパフォーマンスの重要性
ウェブページの表示にかかる時間の、少なくとも80%は、HTMLのドキュメントがダウンロードされた後のものであることを説明し、この本で紹介する手法の重要性について述べています。
B章 HTTPの概要
HTTPについて簡単な解説をし、パフォーマンスに関する部分に焦点を当てています。
1章 ルール1:HTTPリクエストを減らす
余分なHTTPリクエストがパフォーマンスに最大の影響を与える理由を説明し、こうしたHTTPリクエストを減らす方法を検討しています。イメージマップ、CSSスプライト、data: URLを用いたインラインイメージ、スクリプトやスタイルシートの集約などを検討します。
2章 ルール2:CDNを使う
CDN(Content Delivery Network)を使うことの利点について説明しています。
3章 ルール3:Expiresヘッダを設定する
簡単なHTTPヘッダを追加すれば、ブラウザのキャッシュの利用によりウェブページの表示速度が大幅に改善されることを解説しています。
4章 ルール4:コンポーネントをgzipする
圧縮の効果とウェブサーバ上で圧縮を可能にする方法について解説し、現存する互換性の問題のいくつかについて検討しています。
5章 ルール5:スタイルシートは先頭に置く
スタイルシートが、ブラウザによるレンダリングに与える影響について解説しています。
6章 ルール6:スクリプトは最後に置く
スクリプトが、ブラウザによるレンダリングやダウンロードに対して与える影響について解説しています。
7章 ルール7:CSS expressionの使用を控える
CSSのexpressionについて解説し、その影響を定量化する重要性について述べています。
8章 ルール8:JavaScriptとCSSは外部ファイル化する
JavaScriptとCSSをインラインで埋め込む方法と外部ファイルにする方法について比較検討しています。
9章 ルール9:DNSルックアップを減らす
見過ごされることの多いドメイン名の参照に関する影響について解説しています。
10章 ルール10:JavaScriptを縮小化する
JavaScriptのソースコードから空白文字類を取り除く利点を定量化しています。
11章 ルール11:リダイレクトを避ける
リダイレクトに対する注意事項を説明し、代わりに使える方法を紹介しています。
12章 ルール12:スクリプトを重複させない
単一ページに同じコードが複数回インクルードされていた場合どうなるかについて解説しています。
13章 ルール13:ETagの設定を変更する
ETagの機能と、複数のウェブサーバを運用している場合に標準設定での実行が問題となる理由について解説しています。
14章 ルール14:Ajaxをキャッシュ可能にする
Ajaxを使う際に、上にあげたルールを念頭に置くことの重要性を強調しています。
15章 米国トップ10サイトの分析
現実のウェブサイトを例に、パフォーマンス改善の確認方法を紹介しています。