ページ

2010年10月10日日曜日

Web高速化テクニック

1.HTTPリクエストを減らす
~ js、css、imgなどのコンポーネントをダウンロードする数を減らす。

【使える技】
・イメージマップ
・CSSスプライト (おすすめ!!)
・インライン画像
・複数のスタイルシートを1つに纏める。
・複数のスクリプトファイルを1つに纏める。

2.CDN(コンテンツデリバリーネットワーク)を利用する
~ 複数の拠点にコンテンツを分散してキャッシュさせ、
地理的に近い位置にあるサーバーからコンテンツを取得させる。
実装的には、HTMLを返す際に、コンテンツのURLをCDN向けに変換する
などの対応が必要となる。

【CDNサービスの種類】
・Akamai
・Mirror Image
・SAVVIS
・Limelight

3.Expires ヘッダを設定する
~ クライアントに指定した時期が来るまでキャッシュしたコンポーネントを利用させる。
【対応方法】
Apacheの定義ファイルに以下を追加する。
----------------------------------------
# Expiresヘッダを設定して1ヶ月間コンポーネントをキャッシュさせる
<IfModule expires_module>
ExpiresActive On
<FilesMatch "\.(jpeg|gif|css|js|swf)$">
ExpiresDefault "access plus 1 month"
</FilesMatch>
</IfModule>
----------------------------------------

4.コンポーネントをgzipする
~ HTML、CSS、JSなどのコンポーネントを圧縮して返すことで、レスポンス速度を向上させる。
【対応方法】
Apacheの定義ファイルに以下を追加する。
----------------------------------------
# DEFLATEを利用して画像系のファイル以外は、gzipで圧縮してレスポンスを返す。
<IfModule deflate_module>

#DEFLATEを有効化
SetOutputFilter DEFLATE

#圧縮レベルを指定(低1~9高)
#値が大きくなるほど圧縮率は大きくなりますが、その分CPUの負荷が高くなります。
#運用状況に合わせて徐々に値を上げるようにしましょう。
DeflateCompressionLevel 5

#ブラウザがNetscape 4.xの場合はtext/htmlのみ圧縮
BrowserMatch ^Mozilla/4 gzip-only-text/html

#ブラウザがNetscape 4.06-4.08の場合は圧縮しない
BrowserMatch ^Mozilla/4\.0[678] no-gzip

#ブラウザがMSIEの場合は全て圧縮
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

#画像ファイルは圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

#圧縮未対応ブラウザへは圧縮ファイルを送信しない
Header append Vary User-Agent env=!dont-vary

#ログの取得
DeflateFilterNote Input instream
DeflateFilterNote Output outstream
DeflateFilterNote Ratio ratio
LogFormat '"%r" %{outstream}n/%{instream}n (%{ratio}n%%) %{User-agent}i' deflate
CustomLog /var/log/httpd/deflate_log deflate
</IfModule>
----------------------------------------

5.スタイルシートは先頭に置く
~ スタイルシートの読み込みを出来るだけHTMLの先頭のほうに置くことでレンダリングの速度が向上する。
【注意事項】
・IEの場合に、他のレンダリングをブロックする為、@importの使用は避ける。

6.スクリプトは最後に置く
~ スクリプトファイルの読み込みを出来るだけHTMLの最後のほうに置くことで
レンダリングの速度が向上する。
【注意事項】
・HTMLの読み込みが終わると、コンポーネントは最大2つまで並列に
ダウンロードされる。
・スクリプトを一番上でロードすると、スクリプトよりも下のコンテンツは、
レンダリングが中断される。
・スクリプトを一番上でロードすると、スクリプトよりも下のコンポーネントは、
ダウンロードが中断される。

7.CSS expressionの使用を控える
~ CSS expression は、CSSプロパティを動的に設定する手法です。

8.JavascriptとCSSは外部ファイル化する
【インラインの場合】
・コンポーネントをダウンロードする数が減るため、外部ファイルよりも高速。
【外部ファイルの場合】
・ブラウザにロードされたファイルがキャッシュされる為、2回目以降は最速。

9.DNSルックアップを減らす
~ サーバー側で、KeepAliveを利用して1つの接続を使い回し、
複数のリクエストに応えられるようにする事でパフォーマンスを向上させる。
【対応方法】
Apacheの定義ファイルに以下を追加する。
----------------------------------------
KeepAlive On
MaxKeepAliveRequests 100
KeepAliveTimeout 15
----------------------------------------

10.javascriptを縮小化する
~ 外部ファイル内の改行やスペースを除去してファイルサイズを削減することで、
ダウンロードの速度を向上させる。
【縮小化ツール】
・JSMin
・DojoCompressor
・Google Closure Tools

11.リダイレクトを避ける
301 ・・・ 恒久的な移動
302 ・・・ 一時的な移動
【注意事項】
リダイレクトで上のレスポンスコードを返すと、ブラウザの「戻る」ボタンが
正しく機能されることが保障される。

12.スクリプトを重複させない
【注意事項】
・同じページにスクリプトを複数回インクルードすると、
ページのロードが遅くなる。
・IEでは、スクリプトがキャッシュ不能である場合や
ページがリロードされた場合に余分なHTTPリクエストが
が生成される。
・FirefoxでもIEでも、スクリプトは複数回評価される。

13.ETagの設定を変更する

14.Ajaxをキャッシュ可能にする

0 件のコメント:

コメントを投稿