フロントエンドのパフォーマンスチューニング – Expiresヘッダ追加

【この記事の所要時間 : 約 6 分

Postgresqlのパフォーマンスチューニングについて書いてきたけど、Webサイトのパフォーマンスには、そういったバックエンドだけでなく、フロントエンドのパフォーマンスももちろん関係している。
フロントエンドのパフォーマンスをあげるのに有効な方法はいくかあるけど、今回は、「Expiresヘッダ」について。YSlowが出てきてからいろいろなサイトで目にするようになった。
Webサイトの高速化 ルール3 Expiresヘッダーを追加しよう!

Expiresヘッダーを使えば、それらのコンポーネントをキャッシュさせて、不必要なhttpリクエストを避けることができます。Expires ヘッダーはよく画像をキャッシュさせるために使用されますが、Javascript、スタイルシート、Flashといったすべてのコンポーネントでも使用すべきです。ブラウザやプロキシサーバにキャッシュさせることで、httpリクエストの数もサイズも減らして、より高速にページをロードできるようになります。 Webサーバは、httpレスポンスのExpiresヘッダーによって、そのコンポーネントがいつまでキャッシュして良いか、クライアントに知らせることができます。

YSLOW 勉強 : 3: Add an Expires Header

キャッシュを持つことによって、キャッシュを読み込んだあとの不必要なHTTP requestを減らすことができる。WebサーバーがApacheであるなら、ExpiresDefaultの設定を使ってキャッシュする時間を設定することができる。

ただExpiresヘッダを追加すればいいだけと思うかもしれないけど、落とし穴もある。
キャッシュを効かせるということは、ファイルを更新してもキャッシュを参照した場合、更新内容が反映されないという落とし穴だ。この落とし穴に対応するには、画像やCSSのファイル名に連番やバージョン番号などを入れて、ファイルを更新した場合は新しいファイルとしてキャッシュさせてやる工夫が必要だ。
Expiresヘッダの追加方法は、Apacheなら、httpd.confの設定で行うことができる。
設定方法は、以下の本家サイトを参照のこと。
Apache モジュール mod_expires
ただ、動的サイトの場合には設定に注意が必要だ。
キャッシュの上手な使い方

Apache の場合なら、設定ファイルに

<Directory "/home/www/htdocs/static">
ExpiresActive On
ExpiresDefault "access plus 10 years"
</Directory> 

などと設定することで、ブラウザの再問い合わせを半永久的に抑制することができます。
ここまですれば、ウェブブラウザが問い合わせるのは動的コンテンツのみになるので、AIREDGE のように遅延が長い環境でも、快適なウェブサイトが構築できると思います。

上記は、staticディレクトリなので、静的なコンテンツしか置いてないという前提と思うので問題ないが、ExpiresDefault という設定をすると、すべてのファイルに対して Expired ヘッダをつける。するとどうなるかといえば、動的なコンテンツまでブラウザキャッシュを使うようになる。
なので、ExpiresDefault を使う場合は、設定が反映するディレクトリに静的なコンテンツしかない場合にしよう。
つまり、動的サイトの場合は以下のように設定するとまずい。
静的サイトなら問題ないけど。
Expiresヘッダを追加しよう!

mod_expires の設定例
ちなみに mod_expires が使用できるのならば .htaccess に以下の設定をするだけでおっけ。

CODE:
1.<IfModule mod_expires.c>
2.ExpiresActive On
3.ExpiresDefault "access plus 1 year"
4.</IfModule>

これで expires ヘッダに1年後の日付をセットして返してくれる。
# 実際に設定する場合は ファイルタイプごとに有効期限を変えるなど、もっと細かく設定したほうがいいです。

上記サイトにもあるように、ファイルタイプごとに細かく設定するには、ExpiresByType を使うとよい。CSSとJavaScriptに関してExpiresヘッダを有効にする設定方法を以下のサイトで紹介していた。
mod_expires と mod_rewrite を使ってウェブサーバへのアクセスを減らす方法

mod_expires の設定を有効にして、CSS と JavaScript の Expired Date を設定します。

ExpiresActive On
ExpiresByType text/css “access plus 1 days”
ExpiresByType application/x-javascript “access plus 1 days”

キャッシュを効かせた場合の落とし穴対策として、以下では、QueryStringをファイル名に追加することで、強制リクエストを促してファイルを読み込ませるという方法を紹介している。
YSlow対策でmod_expireを利用してHTTPレスポンスヘッダにExpiresを追加する
以下のサイトでは、mod_rewriteでの方法を紹介している。こっちの方が実用的かな。
mod_expiresとmod_rewriteを使ってサイトの帯域節約と体感速度を向上させる方法
以下、参考までに。
apacheにおいて同時接続数(MaxClients)をいくつに設定すべきか?

Webエンジニアの教科書
Webエンジニアの教科書

posted with amazlet at 15.11.20
佐々木 達也 瀬川 雄介 内藤 賢司
シーアンドアール研究所 (2015-03-26)
売り上げランキング: 128,027
スポンサーリンク
レクタングル(大)広告
  • このエントリーをはてなブックマークに追加
スポンサーリンク
レクタングル(大)広告

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です