Blogs

Webサイトの高速化 ルール4 コンポーネントを圧縮しよう! (Yahoo! developer netoworkより翻訳)

ハイパフォーマンスWebサイト フロントエンドのパフォーマンスの重要性から続いています。

Webサイトの高速化 ルール4 コンポーネントを圧縮しよう!

July 3, 2007

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

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

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

これは彼の「パフォーマンス改善のベストプラクティス」を書いた一連のブログです。

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

ネットワーク越しにHTTPリクエストとレスポンスを転送するのに要する時間は、フロントエンドエンジニアの決定によってかなり減らすことができます。
エンドユーザの契約しているプロバイダのネットワーク帯域や近接したネットワークの状況は、開発チームではコントロール出来ないのは確かですが、以外にもレスポンスに影響を与える様々な要因があります。

圧縮によって、HTTPレスポンスのサイズを減らすことで、レスポンスを速くすることが出来ます。

HTTP1.1からは、HTTPリクエストのAccept-Encoding ヘッダーによって、Webクライアント(ブラウザ)がどんな圧縮方法をサポートしているかを示すことができるようになりました。

Accept-Encoding: gzip, deflate

WebサーバがHTTPリクエスト中に上記のヘッダーを見つけたら、HTTPレスポンスを返す際に、そのリスト中のどの方法でも圧縮してもよいということです。WebサーバはHTTPレスポンス中のContent-Encodingヘッダーによって、どの方法で圧縮したかを知らせます。

Content-Encoding: gzip

gzip はもっとも一般的で効果的な圧縮方法です。
GNUプロジェクトで開発されて、RFC 1952で標準化されました。
deflateは、Gzipに比べれて効果においても劣っていますし、あまりポピュラーでもありません。

gzip による圧縮はだいたい70%程度、レスポンスのサイズを減らします。今日のインターネットトラフィック上で使用されているブラウザの90%はgzipをサポートしています。
Apahceを使用しているのなら、gzipのモジュール設定はそのバージョンによります。1.3系ならmod_gzipを、2系ならmod_deflateを使用して下さい。

ブラウザとプロキシによっては、ブラウザが期待するものと、圧縮されたコンテンツのミスマッチで引き起こされる既知の問題はあるのですが、幸い、古いブラウザが使われなくなるにつれて、これらのケースがだんだん減ってきました。 Apacheモジュールは、自動的に適切なVary応答ヘッダーを加えることによって、解決してくれます。

サーバは、通常、ファイルの種類によって、どれを圧縮するかを選びます。

ほとんどのWebサイトはHTMLを圧縮しています。
Javascriptやスタイルシートは圧縮する価値がありますが、多くのWebサイトではそれは行われていないようです。XMLやJSONも含めてすべてのテキストのレスポンスは圧縮する価値があります。

イメージとPDFファイルは圧縮してはいけません。CPUを浪費するだけではなく、ファイルサイズがかえって大きくなってしまいます。

できるだけ多くのファイルの種類を圧縮するのは、ページを軽くして、ユーザエクスペリエンスをスピードアップするやさしい方法です。

Steve Souders
———————————————————————
◆◆訳注◆◆

とても効果がある。必ず実施すべき。

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

エントリ一覧

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 ルール11 リダイレクトを避けよう!
Webサイトの高速化 ルール12 スクリプトの重複に気をつける!
Webサイトの高速化 ルール13 ETagを正しく設定する!

kajiwaraWebサイトの高速化 ルール4 コンポーネントを圧縮しよう! (Yahoo! developer netoworkより翻訳)