htmlcss ExpiresByType が JavaScript に対して効かない？

CATEGORY: HTML/CSS

2013年9月26日

HTTP ヘッダ（Expires ヘッダ）を追加して、ファイルをブラウザにキャッシュさせるように .htaccess にキャッシュの期限を指定しているのに、YSlow の評価を見ると何故か JavaScript だけがキャッシュされていなかったのでその解決方法のメモ。

結論としては、ExpiresByType での JavaScript のファイルタイプの指定のシンタックス（記述方法）を変更して解決。

NG だった指定方法

ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"

OK になった指定方法

ExpiresByType text/x-javascript "access plus 1 month"  
ExpiresByType application/javascript "access plus 1 month"  
ExpiresByType application/x-javascript "access plus 1 month"

OK になった別の指定方法

ExpiresByType text/js "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"

この他に、filesMatch で JavaScript ファイルに対して ExpiresDefault で期間を指定する方法もある。 

<filesMatch "\.(js)$"> 
    ExpiresDefault A2592000 
    // または ExpiresDefault "access plus 1 month"
</filesMatch>

代替期間指定構文

ExpiresDefault ディレクティブと ExpiresByType ディレクティブは 以下の構文を使って定義することができる。

ExpiresDefault "<base> [plus] {<num> <type>}*"
ExpiresByType type/encoding "<base> [plus] {<num> <type>}*"

<base> は以下のいずれか：

  • access
  • now (‘access’ と等価)
  • modification

plus キーワードは省略可能で <num> は 整数値。
<type> は以下のいずれか：

  • years
  • months
  • weeks
  • days
  • hours
  • minutes
  • seconds

別の構文

以下の構文でも記述可能。

ExpiresDefault MIME-type <code>seconds
ExpiresByType MIME-type <code>seconds

MIME-type：ドキュメントのタイプ
<code>seconds：期限切れの日時を生成するための基準時刻に追加される 秒数を設定
<code>：基準時刻をファイルの最終修正時刻か、クライアントのドキュメントへのアクセス時刻にするかを指定（M は基準時刻として ファイルの最終修正時刻をという意味で、A はクライアントのアクセス時刻を使うという意味）

以下は期限切れを（クライアントのアクセス時刻から）30日（60x60x24x30）に指定。

ExpiresDefault A2592000