Exceptional Performance HTTPリクエストを減らす方法

エンドユーザのレスポンスタイムの80%は、フロントエンドに費やされます。その時間のほとんどは、ページ内のすべてのコンポーネント(イメージ、スタイルシート、スクリプト、Flashなど)のダウンロードに拘束されています。コンポーネントの数を減らすことは、ページを表示するために必要なHTTPリクエストを減らします。

ページのコンポーネントの数を減らす１つの方法は、ページデザインを単純にすることです。速いレスポンスタイムを実現して、リッチなコンテンツのページを作る方法があるでしょうか？

リッチなページデザインをサポートしたまま、HTTPリクエスト数を減らすためにテクニックがあります。イメージマップは、複数のイメージを１つのイメージに結合します。全体的なサイズは、だいたい同じになります。しかし、HTTPリクエスト数を減らすことによって、ページのスピードがあがります。イメージマップは、ナビゲーションのような、ページ内のイメージが隣接するところでだけ、利用できます。
イメージマップの座標の決定は、退屈で間違えを起こしやすいです。

CSS Spritesは、イメージのリクエスト数を減らすための好ましい方法です。
あなたのページのイメージをすべて１つのイメージに結合し、望ましいイメージの部分を表示するために CSSbackground-imageやbackground-positionプロパティを使ってください。

インラインイメージは、データを使います: 実際のページにイメージデータをはめ込むためのURLスキーム。これは、あなたのHTMLドキュメントサイズを増やすことができます。インラインイメージをあなたのスタイルシートに結合することは、HTTPリクエストを減らし、あなたのページのサイズの増大を避ける方法です。

結合ファイルは、すべてのスクリプトを１つにまとめたり、すべてのスタイルシートのファイルを１つのスタイルシートにまとめることにより、HTTPリクエスト数を減らすことができます。広く採用をみられなかった単純なアイデアです。U.Sトップ１０のウェブサイトは、ページあたりに平均して７つのスクリプトと２つのスタイルシートを使っています。ページごとにスクリプトとスタイルシートが異なるならファイル結合は、よりチャレンジングです。しかし、あなたのリリースプロセスの部分を作ることは、レスポンスタイムを改善します。

あなたのページのHTTPリクエスト数を減らすことは、はじまりにすぎません。これは、最初の訪問のためのパフォーマンス向上のためのもっとも重要なガイドラインです。Tenni Theurerのブログで Browser Cache Usageについて説明されています - 1日あたりの訪問者の40-60%は、空のキャッシュであなたのサイトを訪れます。あたなのページをはじめて訪れる訪問者のためにページを速くすることは、よりよいユーザエクスペリエンスのための鍵になります。

原文
http://developer.yahoo.com/performance/rules.html#num_http


エヴァンジェリズム

---