Top▲
マーリンアームズ サポート   翻訳   コンサル   講座   アプリ   コラム

続・ハイパフォーマンスWebサイト — ウェブ高速化のベストプラクティス    Steve Souders著    武舎広幸＋福地太郎＋武舎るみ訳

まえがき

vigilant ── （特に、危険を回避するため）油断なく気を配ること

この本（あるいは前著『ハイパフォーマンスWebサイト』）を手にとってくださった皆さんなら、「遅いサイト」によって生じる弊害 ── 利用者の不快感、サイトのイメージダウン、運営コストの上昇、収入の減少、などなど ── についてよくご存じでしょう。

ウェブサイトは常に高速でなければなりません。「改善」によって逆に問題が生じる恐れもあります。不具合の解消や新しい機能の追加、システムの更新のたびに、パフォーマンスが影響を受けないか確認しなければなりません。注意を怠っていると、今日改善策を講じたばかりなのに、明日にはまた別の問題に悩まされるといったことになりかねません。「油断なく気を配る」必要があるのです。

vigil ── （キリスト教で）祝日の前夜に祈りをささげる「徹夜祭」

ラテン語の語源によると、徹夜の祈りの翌日には祝祭が待っています。ウェブサイトの高速化は本当に可能なのです。それも劇的な高速化が。苦労があってこそ、報われて祝うことができるのです。嘘ではありません！ ウェブサイトの高速化は可能なのです！ 世界でも特に人気の高いウェブサイトのロード時間が、この本で紹介したテクニックにより60％も短縮されました。もちろん、小規模サイトにも効果的です。そしてその恩恵を最終的に受けるのはユーザーなのです。

vigilante ── 自警団員

自分のサイトのユーザーの権利を守れるかどうかは私たち開発者にかかっています。自分のサイトで、パフォーマンス向上の意義をユーザーに知らせてください。この本で紹介したテクニックを実践してください。皆さんの同僚にもこの本を教えてあげてください。自分のサイトのパフォーマンスを上げ、ユーザーがそのすばらしさを味わえるよう、がんばってください。社内にパフォーマンス改善の担当者がいないなら、自分がその役割を買って出てください。皆さんに「パフォーマンス自警団員」になっていただきたいのです。

本書の構成

この本は、前著『ハイパフォーマンスWebサイト』（オライリー・ジャパン）の続編です。前著では、ウェブパフォーマンス向上のための、次の14のルールを紹介しました。

以上の14項目を「ルール」としたのは、この14項目はまず間違いなく採用に値するものだからです。2007年3月の全米トップ10ウェブサイト（Alexaによる統計で、上位10サイトはAOL、eBay、Facebook、Google Search、Live Search、MSN.com、MySpace、Wikipedia、Yahoo!、YouTubeでした）の次の統計を見てください。

2009年4月の同じ統計を見ると、上のルールの採用が進んでいることがわかります。

『ハイパフォーマンスWebサイト』で紹介したこの14のルールは今なお生きており、大半のウェブ企業はこの14のルールを基本とすべきです。進歩は見られますが、まだまだこの14の基本ルールを実行すべきケースは多く残っています。

しかし、インターネットはじっと立ち止まって、我々が追いつくのを待ってくれているわけではありません。上の14のルールは今なお有効ではあるものの、ウェブページのコンテンツもWeb 2.0によるアプリケーションも増え続けているため、パフォーマンス向上に関する新たな難問が生じているのです。この本では、そうした次世代のウェブサイトの速度向上を実現するために開発者が必要とする「ベストプラクティス」を紹介しています。

この本は大きく3つに分けられます。JavaScriptのパフォーマンス（1章から7章）、ネットワークのパフォーマンス（8章から12章）、ブラウザのパフォーマンス（13章と14章）です。そして巻末にパフォーマンスの分析に最適なツールの概要を加えました。

下記の6章は「クレジット」であげた共著者によるものです。

以上の共著者は皆、それぞれの分野の専門家です。そうした専門家の生の声を直接読者に届けたいと考えました。各章の冒頭にも共著者の名前を記してあります。

なお、この日本語版では、付録にYahoo! Japan、Mozila Japan、Google Japanの方々から、各組織におけるパフォーマンス関連の取り組みについてご寄稿いただきました。

JavaScriptのパフォーマンス

私がウェブサイトの現状を分析するなかで常に感じているのは、JavaScriptこそがウェブアプリケーションのパフォーマンス向上の鍵だということです。そこで、この本の冒頭の2章を次のような内容にしました。

「1章 Ajaxアプリケーションとパフォーマンス」（Douglas Crockford）では、ブラウザとサーバの関係がAjaxによってどう変わるのか、また、そうした新しい関係をウェブ開発者はどう理解して、パフォーマンス改善の可能性を見分ける際に役立てるべきかを解説します。

「2章 応答性の高いウェブアプリケーション」（Ben Galbraith、Dion Almaer）では、「ユーザーの使い勝手」という基本に立ち返ってJavaScriptのパフォーマンスについて検討します。今日のウェブアプリケーションにおいては、たとえばマウスボタンのクリックひとつが複雑な処理を開始するきっかけとなります。このときブラウザが行う処理の内容をしっかりと理解しておかなければなりません。自分の書いたコードが応答時間にどう影響するのかを把握している開発者だけが、スタンドアロンのアプリケーションに比するほど使い勝手のよいウェブアプリケーションを開発できるのです。

3章から6章は私自身が執筆し、JavaScriptコードの取り扱い方 ── どうまとめればよいのか、どうロードすればよいのか、ページのどこに挿入すればよいのか ── を議論しています。「3章 初期ロードの分割」では、今日、多くのウェブアプリケーションが直面している状況、すなわち、ページの開始時に大量のJavaScriptコードがダウンロードされるため、後続するダウンロードだけでなくレンダリングも妨害されてしまうという状況、について解説しました。ローディングの効率アップを図る鍵は、巨大なJavaScriptを分割することです。

4章と5章はセットになっています。現時点で特に人気の高いブラウザでは外部スクリプトによってページのほかの要素がすべてブロックされてしまいます。「4章 実行をブロックしないスクリプトのロード」では、外部スクリプトを読み込む際のこうした落とし穴を回避する方法を紹介しています。スクリプトの非同期的読み込みは、インライン化されたコードがそうしたスクリプトに依存している場合、問題を引き起こす可能性があります。幸い、インライン化されたコードを、依存している非同期的スクリプトとうまく結びつけるテクニックがいくつか存在しています。こうしたテクニックを「5章 非同期のスクリプトの組み合わせ」で紹介します。

「6章 インラインスクリプトの適切な位置」では、インラインスクリプトに関するパフォーマンスの「ベストプラクティス」を紹介し、特に並列ダウンロードのブロックに対してどのような効果が得られるかを説明します。

「7章 効率的なJavaScriptコード」（Nicholas C. Zakas）は、JavaScriptの実行速度を上げる具体的なテクニックに焦点を当てています。Ajaxの視点から見た解説である1章を補足する内容です。

ネットワークのパフォーマンス

ウェブアプリケーションはデスクトップ用のアプリケーションとは違います。利用するたびにインターネットを介してデータをダウンロードしなければなりません。Ajaxが使われるようになったことで、サーバ/クライアント間にデータ通信の新たなスタイルが生まれました。そして、インターネット関連ビジネスにおける大きなビジネスチャンスは、この新たなスタイルにかかわる市場に広がっています。インターネットの接続性が大きな意味を持つこうした状況において、ウェブサイトのパフォーマンス改善の必要性は従来以上に高まっているのです。

「8章 Comet」（Dylan Schiemann）では、Ajaxの範囲を超えて、チャットやドキュメント共有などのリアルタイムアプリケーションで用いられる、大容量かつ遅延の少ない通信を可能にするアーキテクチャについて紹介します。

「9章 gzip圧縮再考」（Tony Gentilcore）では、ウェブサイトのコンテンツの配送を首尾よく行うには圧縮だけでは不十分である理由を説明します。世界のインターネットユーザーの15％のネットワークパフォーマンスを著しく落としている、ほとんど知られていない現象を明らかにします。

「10章 画像の最適化」（Stoyan Stefanov、Nicole Sullivan）では、画像について詳細に解説しました。一般によく使われている画像形式を細かく説明、検討し、さまざまな画像最適化テクニックと、人気の高い画像圧縮ツールを紹介しています。

残る4章は私自身が執筆しました。「11章 主ドメインの細分化」では、現在よく使われているブラウザの接続に関する限界を指摘し、リソースを複数のドメインに分割することによってうまく回避する方法を解説しました。次世代のブラウザの関連機能についても紹介します。

「12章 ドキュメントのフラッシュ」では、HTMLのドキュメントが完全に届かないうちにページのレンダリングを開始するようプログラムを分割する方法と、その長所と短所を、段階を追って説明します。

ブラウザのパフォーマンス

iframeは、サードパーティのコンテンツをウェブページに組み込む際によく使われる簡便な機構ですが、問題もはらんでいます。「13章 iframeの取り扱い」では、iframeの欠点を明らかにし、複数の代替法を紹介します。

「14章 CSSセレクタの単純化」では、複雑なセレクタがパフォーマンスに与えうる影響について解説し、客観的な分析によって特に注意しなければならない事柄を明らかにします。

巻末付録

「付録A パフォーマンス関連ツール」では、ウェブサイトの分析により、パフォーマンス上、重要な改善点を見きわめるのに役立つ、お勧めのツールを紹介します。

「付録B Yahoo! JAPANが実践するWebの高速化」は、ヤフー株式会社の皆さんに寄稿いただいた日本語版オリジナルの記事です。Yahoo! Japanで実践されている、パフォーマンス向上テクニックを詳しく紹介していただきました。

「付録C ブラウザの最新技術を活用したWebの高速化」は、一般社団法人Mozilla Japanの浅井 智也さんに寄稿いただいた日本語版オリジナルの記事です。Firefoxのみならず、さまざまなブラウザですすめられているパフォーマンス関連の改良作業について詳しく紹介していただきました。

「付録D Web高速化に対するGoogleのアプローチ」は、グーグル株式会社の及川卓也さんに寄稿いただいた日本語版オリジナルの記事です。Web標準による高速化の利点、Web SocketsやSPDYについて詳しく紹介していただきました。また、原著者のSteve Soudersへのインタビューも掲載されています。

クレジット

この本の1章と2章、それに7章から10章は、次の方々が執筆してくださいました。

Dion Almaer（ディオン・アルマー）
Ajaxコミュニティに最新の技術を紹介するAjaxian.comの共同設立者です。昼間の仕事としてはMozillaでウェブ開発者向けツールを製作するグループの共同リーダーを長年にわたって務めており、この仕事を非常にやりがいのある仕事だと感じています。このグループのもうひとりのリーダーは、Ajaxianの仲間であるとともに、今ではMozillaの同僚でもあるBen Galbraithです。Gopherの時代からウェブアプリケーションを作り続けており、世界中で講演をする機会にも恵まれ、多数の記事を書き、著書も1冊あり、もちろんブログ（http://almaer.com/blog/）でも日常生活から宇宙にいたるまで、さまざまな事柄を書いています。

Douglas Crockford（ダグラス・クロックフォード）
ミネソタ州の片田舎で生まれましたが、おそろしく寒かったので、生後わずか6か月でそこを去りました。長じて、コンピュータの存在を知るや、テレビ界での前途有望なキャリアを捨て去ります。以来、学習システム、小企業向けシステム、オフィスオートメーション、ゲーム、インタラクティブミュージック、マルチメディア、ロケーションベースのエンターテインメント、ソーシャルシステム、プログラミング言語などの分野を手がけてきました。また、醜悪な言語になるよう特別に設計されたわけでもないのに最悪に醜悪になってしまったプログラミング言語Tiltonの発明者です。『JavaScript: The Good Parts ── 「良いパーツ」によるベストプラクティス』の著者として有名ですが、JavaScriptにGood Partsがあるのを発見したのは予期せぬ重要な出来事でした。また、データ交換フォーマットJSONも考案しました。現在はウェブを安全で安定したソフトウェア配信プラットフォームにしようとがんばっています。Crockfordは自分にぴったりの仕事を作り出す名人なのです。

Ben Galbraith（ベン・ガルブレイス）
Mozillaで開発者向けツールを作成しているグループの共同リーダーであるとともに、Ajaxian.comの共同設立者でもあります。長年、商用製品の開発にも技術開発にも関心を持ち続けてきました。6歳のときに初めてのプログラムを書き、10歳で最初のビジネスを立ち上げ、12歳でIT業界に参入しました。以来、世界各国で何度もプレゼンテーションを行い、カンファレンスを数回プロデュースし、共著も数冊出版しました。ビジネス面でも専門技術の面でも、さまざまな要職を歴任しており、医学、出版、メディア、製造、広告、ソフトウェア等の業界のCEO、CIO、CTO、ソフトウェア開発責任者などを務めてきました。妻と5人の子供たちとともにカリフォルニア州パロアルトに住んでいます。

Tony Gentilcore（トニー・ジェンティルコア）
Googleのソフトウェアエンジニアです。Googleのトップページと検索結果の表示を超高速に表示するよう尽力してきました。ウェブパフォーマンス向上のためのツールや技術を開発しているときには時間が飛ぶように過ぎていきます。また、Firefoxの人気の拡張機能Fasterfoxの開発者でもあります。

Dylan Schiemann（ディラン・シーマン）
SitePenのCEOであり、オープンソースのJavaScriptツールキットDojo Toolkitの共同開発者であり、さらにはOpen Webの技術およびビジネスの専門家でもあります。SitePenは彼の指揮下で急成長を遂げ、業界をリードする企業として、独創的ツール、優秀なソフトウェアエンジニア、優れたコンサルティングサービス、そして行き届いたトレーニングを提供しています。彼の研究開発に傾注する熱意と努力によりSitePenはオープンソースウェブ開発用の先駆的なツールキットとフレームワーク（Dojo、cometD、Direct Web Remoting（DWR）、Persevereなど）を開発、提供する企業となりました。SitePen創業前は、Renkoo、Informatica、Security Frame Works、Vizional Technologiesなどの企業のためにウェブアプリケーションを開発していました。このほか、Comet Daily, LLCの共同設立者でもあり、Dojo Foundationの役員とAptanaの顧問も務めています。学位はカリフォルニア大学ロサンゼルス校（UCLA）で物理化学の修士号を、ウィッター大学で数学の学士号を取得しました。

Stoyan Stefanov（ストヤン・ステファノフ）
Yahoo!でフロントエンドの開発者としてウェブアプリケーションのパフォーマンス向上を担当しており、パフォーマンス計測ツールYSlow 2.0の設計、画像最適化ツールSmush.itの開発を担当しました。さらに、講演者、著者（“[_Fi_]Object-Oriented JavaScript[_/Fi_]”、Packt Publishing刊）、ブロガー（http://phpied.com/、http://jspatterns.com/およびYUIblog）としての顔も持っています。

Nicole Sullivan（ニコール・サリヴァン）
エバンジェリスト兼フロントエンドパフォーマンスに関するコンサルタント兼CSS忍者（くノ一）。オープンソースプロジェクト「Object-Oriented CSS」を立ち上げ、「何百万人もの利用者をさばき、何千という規模のページを処理するにはCSSをどうスケーリングすればよいか」という問いに対する回答を提案してきました。また、W3Cのコンサルティングをしたり、クラウドベースの画像最適化サービスSmush.itを共同開発したりもしました。特に強い関心を持っているのは、CSS、ウェブ標準、大規模商用ウェブサイトのスケーラブルなフロントエンド設計といった分野です。世界中のカンファレンスでパフォーマンスに関する講演を行っており、最近では、The Ajax Experience、Paris Web、Web Directions Northなどで講演を行いました。http://stubbornella.org/にブログ。

Nicholas C. Zakas（ニコラス・C・ザカス）
Professional JavaScript for Web Developers, Second Edition（Wrox刊）の著者であり、Professional Ajax, Second Edition（Wrox刊）の共著者でもあります。Yahoo!のホームページを担当するフロントエンド主任エンジニアで、Yahoo! User Interface（YUI）ライブラリも担当しています。http://www.nczonline.net/で、ブログを定期的に更新しています。