YSlowでウェブサイトのパフォーマンスを改善: Expiresプロパティを設定する

Expiresプロパティを設定してキャッシュを有効活用

　まず5番の「Put CSS at the top」の項目がD評価だった。これについてはHTMLにおけるCSSファイルの読込みをタグ内に記述するように変更すれば改善できる。

　次に、F評価だったのが3番の「Add an Expires header」だ。これはHTTPヘッダにExpiresプロパティを設定すればパフォーマンスが改善できる可能性を示している。このプロパティはコンテンツの有効期限をある程度長く設定することで、キャッシュを有効に利用するためのものだ。

　右端の三角のアイコンをクリックして詳細を見ることで、具体的にどのファイルが該当しているのかがわかるので、そのファイルにExpiresプロパティが適用されるようウェブサーバの設定を変更すればよい。

　Apache HTTP Serverの場合、まずhttpd.confにリスト1の設定を追加してmod_expiresをロードする。

リスト1 httpd.confにmod_expiresモジュールをロードする設定を追加

LoadModule expires_module modules/mod_expires.so

　その上でExpiresが有効になるようにリスト2のような設定を追加すればよい。

リスト2 httpd.confなどにExpiresに関する設定を追加

  ExpiresActive On
  ExpiresDefault "access plus 3 hours"
  ExpiresByType image/gif "access plus 5 days"
  ExpiresByType text/css "access plus 5 days"
  ExpiresByType text/javascript "access plus 5 days"
  ExpiresByType application/x-javascript "access plus 5 days"

　「ExpiresActive On」でExpiresを有効にし、それ以下で具体的な有効期限を設定している。今回はgif、CSS、そしてJavaScriptのファイルがパフォーマンスに影響を与えているとのことだったため、それらのファイルに有効期限を設定した。ここでは仮に5日としてあるが、コンテンツの更新頻度に応じて適切に設定すべきだろう。なお、設定内容の詳細についてはApacheのマニュアルを参照して欲しい。

　上記の2つの修正を行った結果、YSlowによる評価は図1のように向上した。Firebugの接続パネルでHTTPヘッダの情報を見れば、図2のようにExpiresプロパティが設定されていることがわかる。

図1 3番と5番の評価がAに向上し、総合評価も71点に上がった

図2 対象ファイルのHTTPヘッダにExpiresプロパティが設定されている