スタンフォード大学で、CS193H – High Performance Web Sites というタイトルの講義が行われた。そのときのプレゼンテーション資料が、公開されていた。講義は、9/22 から 12/5 まで行われて、おもに次のような内容だったようだ。講義タイトルを翻訳してみた。
- 9/22: 導入 – Introduction
- 9/24: フロントエンド側のパフォーマンスの重要性について – The Importance of Frontend Performance
- 9/26: HTTP ウェブサイトの 100 のパフォーマンスプロファイル – HTTP Web 100 Performance Profile
- 9/26: 開かれたウェブのパフォーマンス挑戦 – Performance Challenges for the Open Web
- 10/1: フロントエンドカンフー – Front End Kung Fu
- 10/3: 高いパフォーマンスのウェブページ – Netflix のケースで考える実例 – High Performance Web Pages – Real World Examples: Netflix Case Study
- 10/6: Alexa ランキングトップ 100 のウェブサイト – Class Project: Improving a Top 100 Web Site
- 10/8: HTTP リクエストを少なくする – Make Fewer HTTP Requests
- 10/10: CDN を使う – Use a Content Delivery Network
- 10/13: Expires ヘッダーを追加する – Add an Expires Header
- 10/15: Gzip コンポーネント – Gzip Components
- 10/17: 先頭にスタイルシートを配置する – Put Stylesheets at the Top
- 10/20: 末尾にスクリプトを配置する – Put Scripts at the Bottom
- 10/22: DNS 検索を減らす – Avoid CSS Expressions Reduce DNS Lookups
- 10/24: 外部に JavaScript と CSS を作る – Make JavaScript and CSS External
- 10/27: JavaScript を最小化する – Minify JavaScript
- 10/29: リダイレクトを無効にする – Avoid Redirects
- 10/31: 中間試験 – MIDTERM EXAM
- 11/3: Ajax のパフォーマンス – Ajax Performance
- 11/5: 重複している Script を削除する – Remove Duplicate Scripts
- 11/7: ETags の設定 – Configure ETags
- 11/10: Ajax をキャッシュされる＆初期ロードを分割させる – Make Ajax Cacheable & Split the initial Payload
- 11/12: ブロックせずにスクリプトをロードする – Load Scripts Without Blocking
- 11/14: インラインスクリプトをばら撒かない – Don’t Scatter Inline Scripts
- 11/17: 大規模環境での高速なデータのスケール – Facebook から学ぶ – Fast Data at Massive Scale – lessons learned at Facebook
- 11/19: 主要なドメインを共有する – Shared Dominant Domains
- 11/21: イメージの最適化、Iframe を控えめに使う、ドキュメントを早めにフラッシュする – Optimize Images, Use Iframes Sparingly, Flush the Document Early
- 12/1: クッキーを自由にして固定リソースを出す、クッキーの重みを減らす – Serve Static Resouces Cookie-Free, Reduce Cookie Weight, To WWW or not to WWW
- 12/3: CSS 子孫セレクタで、圧縮を強制する – CSS Descendant Selectors, Forces Compression
- 12/5: パフォーマンスの状態 – State of Performance
- 12/9: 最終試験 – FINAL EXAM
- 12/12: 最終試験 – FINAL EXAM
ということで、Yahoo! から公開されている有名なウェブサイトのパフォーマンス Tips を含めた各テクニックを1つの講義で行ったり、実例から学んだりと、とても面白そうな講義になっている。それぞれの講義には、必ず宿題があったり、試験も公開されていて、かなり興味深い。
資料はほとんど公開されているけれど、数が多いので自分の興味のあるものをみてみるといいと思う。
僕は、とりあえずすべての資料に目を通してみたので、講義ごとにメモしておこう。
Intoroduction では、Yahoo! から Google に移籍した「ハイパフォーマンスWebサイト」の著者でもある Steve Sounders 氏の講義。ハイパフォーマンスの 14 のルール、Y! Slow などを紹介している。
The Importance of Frontend Performance では、iGoogle を例にあげて 8 割から 9 割のエンドユーザへの応答時間は、フロントエンド側で費やされていることをあげて、HTTPWatch という Windows 専用のパケットスニッファ、Firebugs、Y Slow を紹介している。
HTTP Web 100 Performance Profile では、HTTP の基礎的な解説のみで、宿題が5つのウェブサイトについて Y Slow などでパフォーマンスを計測するというもの。そのときのシートも公開されている。
Performance Challnges for the Open Web では、Plaxo でやっている OpenID や Google Social Graph API や OpenSociel などについての解説。これはゲスト講義だったようだ。
High Performacne Web Pages – Real World Examples: Netflix Case Study では、Netflix という実際のウェブサイトでのパフォーマンスを向上させたときの事例が解説されている。Firebugs にクライアント側のパフォーマンスデータを計測するプラグインがあることは初めて知った。
さらに Jiffy Firebug の拡張を使うと、onLoad の時間などより詳しい計測ができるようになるらしい。
43 ページ目の Gzip 圧縮、Expire ヘッダーの追加、Etags を設定したことによってネットワークトラフィックが約半分になったという結果はとても興味深い。
Class Project: Improving a Top 100 Web Site では、これまでの講義を振り返りつつ、Alexa ランキングトップ 100 のパフォーマンスを改良するクラスプロジェクトを行ったらしい。
Make Fewer HTTP Requests では、HTTP リクエストを減らすために CSS sprites、base64 でエンコードしたインラインイメージデータ、のテクニックが解説されている。
Use a Content Delivery Network では、リバースプロキシとして CDN を使うことについて解説されている。
Add an Expires Header では、Expires ヘッダーを追加することについて解説されている。Expires ヘッダーを使うと、ブラウザ側にキャッシュを持たせることができるので、HTTP リクエストを減らすことにつながるのは既知のとおり。
個人的な体験では、Expires ヘッダーをはじめて追加したとき、それほど大規模サイトではないのでいきなり長い期間を設定してしまって大きな失敗をしたことがある。特に Expires ヘッダーを後から追加するときは、短い期間（たとえば1時間など）からゆっくりと設定しながら伸ばしていくのがいいと思う。
Gzip Components では、Gzip 圧縮について解説されている。Gzip と Deflate の比較表は、とても参考になった。若干 Gzip の方は圧縮率が高い。1K 未満のリソースは圧縮しないほうがいいらしい。トップサイトでは、ほぼ Gzip 圧縮されている。Gzip 圧縮はいいことだけど、古い一部のブラウザ IE 5.5 & 6.0、Netscape 3.x & 4.x では問題があるので注意して、BrowerMatch は設定した方がいいとのこと。これは忘れがちなので要注意。Apache 2.0 では、次のように設定する。
# BrowserMatch ^MSIE [6-9] gzip
# BrowserMatch ^Mozilla/[5-9] gzip
Put Stylesheets at the Top では、CSS を先頭におくことで体験速度が上がる。実際に、IE や Firefox で計測した例が紹介されている。
Put Scripts at the Bottom では、スクリプトブロックについて解説されている。ブラウザごとの挙動や、IE8 & Safari 4 & Firefox 3.1 & Chrome では並列にスクリプトをロードすることができるようになるらしい。それでも、IE6 & 7 はしばらくの間使われ続けるはずなので、「put scripts at the bottom」を心に刻めということ。
Avoid CSS Expressions Reduce DNS Lookups では、Steve 氏の講義で CSS の表記によってはページをダウンロードするのが遅くなること、DNS による検索を減らすルールについて解説されている。トップサイトの TTL は、ほとんど 1 分など短く指定している。ブラウザの DNS キャッシュは IE7 では 30 分、Firefox 2 では 1 分であるらしい。
Make JavaScript and CSS External では、JavaScript と CSS は inline としてページ内で定義するのがいいのか、それとも external として外部で定義するのがいいかについて解説されている。
- inline: 高速だが、HTML ドキュメントが大きくなる
- external: HTTP のリクエスト数が増えるが、キャッシュされる
ということで external がほとんどの場合よさそうということ。
Minify JavaScript では、JavaScript のコードからスペースなど余計な文字を除去して転送するデータ量を少なくする方法が解説されている。JSMin や YUI Compressor や DoJo Compressor を使うことで簡単に圧縮できるとのこと。トップサイトを調べた結果、約2割くらい転送するデータ量を削減できているとのこと。
Avoid Redirects では、リダイレクトについて解説されている。ヘッダーではなく、HTML ドキュメントの中にリダイレクトを挿入することはスクリプトでリダイレクトすることはよくないとのこと。HTTP ステータスコード 301 だとキャッシュされないが、一部のブラウザでは Expires を設定することがキャッシュされる。
Ajax Performance では、Ajax にまとをしぼったパフォーマンス向上 Tips について解説されている。
Remove Duplicate Scripts では、重複したスクリプトの除去として、aol.com では adsonar.jp が 6 回ロードされていることが紹介されて、Steve 氏のサイトでは同じスクリプトを 10 回ロードされるページが公開されている。
Configure ETags では、ETags の設定方法について解説されている。
Make Ajax Cacheable & Split the Initial Payload では、Ajax のリクエストにも Expires ヘッダーをつけることでキャッシュさせる方法について解説されている。Ajax のリクエストは動的なものが多いのでキャッシュさせることはあまりないことだが、URL に timpestampをつけると有効であるとのこと。Google Calendar はそうなっているとのこと。
Load Scripts Without Blocking では、スクリプトブロックについて解説されている。<script src=”A.js”> という記述では、並列ダウンロードや描画をブロックするとのこと。MSN では、script タグを動的に作ることでブロックを回避している。
Don’t Scatter Inline Scripts では、広告や非同期スクリプトを外部から読み込みときの Tips が解説されている。いわゆる、外部スクリプトの遅延ロードについての解説。IE だと、script タグに defer と追加すると Google Analytics のスクリプトを非同期に読み込めるとのこと。Firefox だと、createElement で動的に script タグを作る。
Fast Data at Massive Scale – lessons learned at Facebook は、ゲスト講義で Facebook の Robert Johnson 氏の講義。Facebook のインフラのアーキテクチャーが公開されているかなり貴重な資料。Facebook のパフォーマンスを計測した結果として、1/2 が PHP の実行時間、1/4 が memcached、1/8 がデータベースとのこと。ただし、1ねん前はほとんど memcached であったとのこと。そのころはスイッチ経由で PHP クライアントと memcached のやりとりをしたのをクラスタリングにした。もうすこし具体的な情報がほしかったな。
Shard Dominant Domains では、ドメインをわけることで並列ダウンロードしてページの表示時間を短くする方法について解説されている。Steve 氏のサイトでは、実際のデモとして同じドメイン版、別のドメイン版、と用意されている。ブラウザによって、実装が異なっているが、HTTP 1.1 だと 1 サーバあたり 2 接続でダウンロードできるらしい。DNS のルックアップ回数を減らすルールと矛盾しそうなルールだが、イメージなどの固定なコンテンツには有効とのこと。
Optimize Images, Use Iframes Sparingly, Flush the Document Early では、イメージの最適化、iframe を控えめに使う、ドキュメントは早めにフラッシュすることについて解説されている。イメージの最適化では、さまざなツールが紹介されておりが CSS Sprites Generator というツールがあるとは知らなかった。
Serve Static Resources Cookie-Free, Reduce Cookie Weight, To WWW or not to WWW では、クッキーのサイズによってレスポンスタイムが変わることについて解説されている。
CSS Descendant Selectors, Forced Compression では、CSS のパフォーマンス向上に的を絞った解説がされている。ユニバーサルセレクタを使わない、DIV #navbar ではなく #navbar と指定する、LI .tight ではなく .li-tight と指定する、#navbar A ではなく .a-navbar と指定する。CSS 子孫セレクタによってはパフォーマンスに影響してくるというテスト結果も公開されていた。
State of Performance では、今までの講義のまとめて的なものであった。
ということで、ウェブサイトのパフォーマンスを向上させるテクニックがこれほど詳細にスタンフォード大学で講義があった。
このテクニックは、ブラウザ依存だったり、比較的大規模にならないと効果が目に見えないテクニックだけれど、とても勉強になった。
スタンフォード大学は、やっぱりすばらしい。
Tags: stanford
Subscribe RSS Feed
