Blogs

Webサイトの高速化 フロントエンドのパフォーマンスの重要性 (Yahoo! developer netoworkより翻訳)

以前に書いた「あなたのページを最速にする14の掟」と「High Performance Web Sites」の元記事のことが秋元@サイボウズラボさんのブログに載っていて、「誰かこれ訳してるかな?」とのことなので、注釈つけながら訳してみました。

Webサイトの高速化 フロントエンドのパフォーマンスの重要性

March 20, 2007

——————————————————————————

http://developer.yahoo.net/blog/archives/performance/より翻訳。

Steve Souders は Yahoo!の「Chief Performance Yahoo!」です。

※こういう役職があるらしいですね

これは彼の「パフォーマンス改善のベストプラクティス」を書いた一連のブログです。
O’Reillyから出版される予定の「High Performance Web Sites」の第一章の基になっています。

※この内容はO’Reilly Media — Bookstore: High Performance Web Sites: Rough Cuts Versionとしてまとめられていて、正式版も今年の9月に出版されるとのこと。

邦訳も出版されました!ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール


——————————————————————————

2004年に、Yahoo!でYahoo!の製品のパフォーマンスを測定し改善するため「Exceptional Performance group」という小規模なチームを始めました。それまで私は、バックエンドエンジニアとして働いてきていたので、その時も「プログラムコードの最適化」をするんだと思っていました。

パフォーマンスの改善ポイントがどこにあるかを特定するために、まずWebパフォーマンスをプロファイルしてみました。我々の目的はエンドユーザにとってのパフォーマンスを改善することなので、回線の帯域レベルを変えながらブラウザレベルでのレスポンスを測定してみました。

その結果、Yahoo!のHTTPトラフィックは以下のような状態だったのです。

Yahoo!のHTTPトラフィック

htmlとラベルのついた最初のバーは、一連のhttpリクエストの最初、htmlに対するリクエストを示しています。
見たとおり、htmlを取得する時間は、全体の5%でしかありませんでした。
この結果はほとんどすべてのwebサイトにも当てはまりました。
U.S.のトップ10のWebサイトをサンプリングしたところ、(1サイトを除いて)最初のhtml取得時間はレスポンス全体の20%以下でした。以外の80%以上は、HTML中に書かれた要素(フロントエンド)を取得するために費やされていたのです。
要するに、Webサイトをより速くするための鍵は、フロントエンドのパフォーマンスを改善することにあるということです。

まず最初にやるべきなのは、フロントエンドのパフォーマンスチューニングです。

それには3つ理由があります。

1.フロントエンドにフォーカスするほうが、改善の余地が大きい。

単純にレスポンスを半分にできるとした場合、以下の結果になる。
フロントエンド:全体の80% ===> 全体の40%分速くなる
バックエンド :全体の20% ===> 全体の10%分速くなる

2.バックエンドの改善より、フロントエンドの改善の方が時間がかからない。

バックエンドのプロジェクトは、アプリケーションアーキテクチャーやコードの再設計、コード上のクリティカルパスの見つけてそれを最適化、ハードウェアを追加したり改善したり、データベースを分散したり・・・かなり大変です。

3.フロントエンドのパフォーマンスチューニングはすでに改善の方法が実証されている。

Yahoo!でも50以上のチームが我々のベストプラクティスを適用することで、レスポンスを25%かそれ以上、改善出来た。

我々のパフォーマンスのゴールデンルール(黄金律)

ます最初にフロントエンドのパフォーマンスを最適化する!フロントエンドはエンドユーザにとってのレスポンスタイムの80%以上を占めている!

Steve Souders
Chief Performance Yahoo!

———————————————————————
エントリ一覧

Webサイトの高速化 フロントエンドのパフォーマンスの重要性
Webサイトの高速化 ルール1 HTTPリクエストの数を減らそう!
Webサイトの高速化 ルール2 CDNを使おう!
Webサイトの高速化 ルール3 Expiresヘッダーを追加しよう!
Webサイトの高速化 ルール4 コンポーネントを圧縮しよう!
Webサイトの高速化 ルール5 CSSは上に!
Webサイトの高速化 ルール6 scriptは下に!
Webサイトの高速化 ルール7 CSSのExpression()は使わない!
Webサイトの高速化 ルール8 JavaScriptとCSSは外部ファイルに!
Webサイトの高速化 ルール9 DNS Lookupsを減らそう!
Webサイトの高速化 ルール10 コードのサイズを圧縮する!
Webサイトの高速化 ルール11 リダイレクトを避けよう!
Webサイトの高速化 ルール12 スクリプトの重複に気をつける!
Webサイトの高速化 ルール13 ETagを正しく設定する!

kajiwaraWebサイトの高速化 フロントエンドのパフォーマンスの重要性 (Yahoo! developer netoworkより翻訳)

3 comments

Join the conversation
  • ZeBeVogue別館 - 2008 年 8 月 29 日

    YSlow for Firebugを日本語で便利に使う

    Firebugのアドオン?としてサイト作成に便利なYSlowだけど、日本語化されてないので誰か日本語化しないなぁなんて考えていたんですが、一向に誰もやらないんでちょっと調べてみました…

  • せつないぶろぐ - 2008 年 9 月 9 日

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

    ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール
    米Yahoo!のパフォーマンス担当責任者だったSteve Soudersさんが書いたウェブサイトを高速化させる本です。
    Steve SoudersさんはYS…

  • php note» Blog Archive » 圧縮転送とその評価 - 2009 年 3 月 11 日

    […] Webサイトの高速化 フロントエンドのパフォーマンスの重要性 […]


Comments are closed.