ハイパフォーマンスWebサイト フロントエンドのパフォーマンスの重要性から続いています。
Webサイトの高速化 ルール1 HTTPリクエストの数を減らそう!
April 3, 2007
——————————————————————————
http://developer.yahoo.net/blog/archives/performance/より翻訳。
Steve Souders は Yahoo!の「Chief Performance Yahoo!」です。
これは彼の「パフォーマンス改善のベストプラクティス」を書いた一連のブログです。
——————————————————————————
「ハイパフォーマンスWebサイト:フロントエンドのパフォーマンスの重要性」に、エンドユーザにとってのレスポンスタイムの80%がフロントエンドで消費されると書きました。そのほとんどの時間はページのコンポーネント（画像、スタイルシート、JavaScript、Flash等）のダウンロードのためのものです。コンポーネントの数を減らすことは、そのまま、ページを表示するのに必要なHTTPリクエストの数を減らすことにつながります。これがページを速くする鍵です。
ページ中のコンポーネントの数を減らす一つの方法は、ページのデザインを簡素化することです。でも、コンテンツをリッチにしながら、高速なレスポンスを維持する方法はあるんでしょうか？以下は、ページデザインをリッチなままで、HTTPリクエストの数を減らすテクニックです。
1.イメージマップ
イメージマップは複数の画像を一つに結合します。全体のサイズは変えずに、HTTPリクエストの数を減らしてページ表示を高速化できます。イメージマップはナビゲーションバーのように隣り合った画像でだけ使用できます。ただ、イメージマップの定義を書くのは、面倒で退屈で、間違いも起こりやすいですが。
訳注：イメージマップを使用する場合のユーザビリティ対策 高速化とは関係ないですが。
2.CSS Sprites
CSS Spritesは画像リクエストの数を減らすのに良い方法です。ページ中のすべての画像を 一つに結合して、CSS background-image とbackground-position properties を使って、好きな画像をimage segmentとして表示することができます。
3.the data: URL scheme を使ったインラインイメージ
the data: URL scheme を使ったインラインイメージで、ページ自体に画像データを埋め込めます。これはHTMLのサイズを大きくしてしまう場合があります。（キャッシュされた）スタイルシートにインラインイメージを結合することで、HTTPリクエストの数を減らしながらページサイズの増加を避けることができます。
4.ファイルの結合
Javascriptやスタイルシートのファイルをまとめてしまうことで、HTTPリクエストの数を減らすのも一つの方法です。あまり採用されていませんが、非常にシンプルなアイデアです。U.S.のトップ10Webサイトの平均で、１ページあたり、7つのJavascriptと2つのスタイルシートが含まれています。ただ、ページ毎にJavascriptやスタイルシートが違う場合は、ちょっと大変かも知れませんが、リリース手順が自動化されている場合は可能でしょう。
最初にページあたりのHTTPリクエストの数を減らすことを検討すべきです。
これはサイトの初回訪問者のためにパフォーマンスを向上させるための重要なガイドラインです。
Tenni Theurer氏のブログ「発見! ブラウザキャッシュを使う」にも書かれている通り、一日の訪問者のうち、40-60%はブラウザキャッシュが空なのです。ユーザエクスペリエンスの改善のために、サイトの初回訪問者のためにパフォーマンスを向上させるようにしましょう。
Steve Souders
Chief Performance Yahoo!
———————————————————————
◆◆訳注◆◆
Javascriptやスタイルシートのファイルをまとめてしまうこと・・・・・部分に関しては、とても疑問。少なくとも開発段階では却ってトラブルが起きるだろうし、リリース管理とかかなり大変になるのでは。
イメージマップやCSS Spritesは、デザイナと協同して出来ればやったほうが良いが、「ルール3 Expiresヘッダーを追加しよう!」の結果として、各要素がブラウザキャッシュされてしまえば、実施の意味はかなり薄らぐはず。
———————————————————————
エントリ一覧
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を正しく設定する!
