サイト表示を高速化するサーバー設定の実例いろいろ
iPhone用にjQueryと連携して動作するUIライブラリ「jQtouch」のファイルを見ていて、サイト表示を高速化するApacheサーバー設定の実例が出ていたので、説明を加えて記事にしてみました。
ライブラリ自体、iPhoneに特化したようなものなのでiPhone贔屓ではありますが、参考になる設定が多くあると思いますので見てみてください。
データをgzip圧縮して軽量化
Apache 1.x用のmod_gzip指定
テキストデータなどは画像データよりも圧縮の効率が良いので、サーバーから送信されるデータをなるべく軽くするようにgzip圧縮することが推奨されています。
「mod_gzip_dechunk」というのは、サーバー側からブラウザにデータを送信する際にSSIやPHPなどで「Transfer-Encoding:chunked」という分割方式で送られることがあるため、それも圧縮しておくようにする記述です。
その他「mod_gzip_item_include」でhtmlやcssなどのテキスト情報、cgiスクリプトの結果情報、mimeタイプがtextのものやjavascriptのものも圧縮対象にします。
逆に、mimeタイプが画像だったり、レスポンスヘッダ－がgzipのものは「mod_gzip_item_exclude」設定でgzip圧縮対象から外します。
<ifModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </ifModule>
Apache 2.x用のmod_deflate
mod_gzipの指定がApache 1.x用であったのに対して、Apache 2.xでは「mod_deflate」モジュールが使えるようになったので、以下のコードで簡単に記述することができるようになっています。
<ifModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/x-javascript </ifModule>
指定しても効かない場合はApacheの設定ファイル内で「LoadModule deflate_module modules/mod_deflate.so」の行が存在しない、あるいはコメントアウトされていないかどうか確認してみてください。
有効化した後はApacheの設定をreloadあるいはrestartすると適用されます。
なるべくキャッシュを使わせる
mod_expiresモジュールを使うと、ブラウザ側からデータのリクエストがあった際にファイル毎に「更新されてませんよー」という指定をすることができます。 更新されていないことが分かるとブラウザは自分のマシンにあるキャッシュデータを使うので画像など、かなりの転送データ削減になります。
まずExpiresDefaultでアクセス後1秒はキャッシュを有効にするように初期化しておきます。
次にファイルタイプごとに有効期限をアクセス後の秒数で指定します。 これでキャッシュが有効になり、ブラウザ側のキャッシュが削除されるか、強制的にリロードしない限りキャッシュデータが利用されることになります。
<ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType text/html "access plus 1 seconds" ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 216000 seconds" ExpiresByType application/x-javascript "access plus 216000 seconds" ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" </ifModule>
※3/9 iPhoneには関係ありませんが、swf用の設定を追加しました。
効かない場合はApacheの設定ファイルで「LoadModule expires_module modules/mod_expires.so」が指定されているかどうかを確認してください。 コメントアウトされている場合はコメントを外し、Apacheの設定をreloadするかrestartで再起動すると適用されます。
ETagをオフにする
ETagは、ブラウザ側が持っているキャッシュファイルと、サーバー側にある実ファイルの内容、更新日などが同じかどうかを比較する短いデータです。
このETag情報のリクエストは毎回ブラウザ側から送信されるので、そのたびにサーバー側は実ファイルを調べてETag情報を生成し、比較してあげないといけません。
データが同じだと同じETagができますが、複数マシンで構成しているサーバーだと、同じデータでもデータ配信サーバーが異なるとETagが変わってしまいます。 また、同じサーバーでも毎回ETagを生成するのは余計な処理を増やすだけなので、無効にしてETagを無視するようにしておきます。
<ifModule mod_headers.c> Header unset ETag </ifModule> FileETag None
HTML5用のキャッシュを有効に
これはiPhoneやAndroid用Webアプリやサイトを作成する際に有用な設定ですが、HTML5ではコンテンツキャッシュのしくみを「マニフェストファイル」というものを作成して、その中で定義します。
具体的にはサーバーの.htaccessファイル等に以下のコードを埋込みます。
AddType text/cache-manifest .manifest
マニフェストファイルの例
マニフェストファイルの中身は、以下のように宣言文と定義内容が書かれたテキストファイルになっています（colori.manifestファイルの例）。
CACHE MANIFEST img/logo.jpg img/background.jpg img/about.jpg img/product.jpg img/develop.jpg img/inquiry.jpg
htmlファイル上での使用例
htmlファイルでこのマニフェストファイルを利用するには、<html>タグの属性値に記述します。
<html manifest="colori.manifest">
ボトルネックの解消にはApacheやデータベースサーバーの設定を見直そう
2010-02-18