たった数分！ページ高速化のためhtaccessでキャッシュ設定は絶対やっておこう！

キャッシュを有効にする

では早速、キャッシュを設定してみましょう。.htaccessを開いて、下記のコードを追加して下さい。…驚くかもしれませんが、ごめんなさい。作業はたったこれだけなんです。次項からは、コードの内容を詳しく解説していきます。

<Files ~ ".(gif|jpe?g|png|ico)$">
	Header set Cache-Control "max-age=2592000, public"
</Files>

ファイルの拡張子を設定する

1行目の次の部分を見て下さい。これは何かというと、「キャッシュさせるファイルの拡張子」です。ここで設定した拡張子を持つファイルだけ、ユーザーの端末がキャッシュすることになります。複数指定する場合は、拡張子名の間を|で区切ります。jpe?gは、正規表現が得意な人はピンと来るはずですが、jpg、jpeg、どちらもフォローする書き方です。

<Files ~ ".(gif|jpe?g|png|ico)$">

例えばこれに今はほぼ亡き、.swfファイルを追加するとなると、次のように増やします。一番最後の部分に追加しました。

<Files ~ ".(gif|jpe?g|png|ico|swf)$">

.swfはフラッシュファイル。「そんなもん置かないよ」って人には必要ありませんね。「この拡張子は頻繁に更新するものがあるからキャッシュさせるのはやめておこう」など、自分の環境に合わせて拡張子を設定して下さい。ちなみにこのブログでは、個人ブログの分際ながら画像形式に.webpを採用しているので(笑)、下記のようにキャッシュ対象に加えてあります。

<Files ~ ".(gif|jpe?g|png|ico|webp)$">

一般的には、画像ファイルとフォントファイルをキャッシュさせておけば十分かと思います。下記はその設定になっています。

<Files ~ ".(gif|jpe?g|png|ico|otf|ttf|eot|woff)$">

キャッシュする有効期限を指定する

2行目は「キャッシュの有効期限」を秒数で設定したものです。この秒数が過ぎたら、ユーザーの端末は最新の情報を読み込みます。2592000は、「86400 * 30」の解で「30日間」となります。これを「1年間」にしたければ、「86400 * 365」で31536000と指定して下さい。

Header set Cache-Control "max-age=2592000, public"

拡張子によって設定を変える

「この拡張子とあの拡張子で有効期限を分けたい」という場合は、下記の通り、別々に記述することで設定を振り分けることが可能です。下記は画像やフォントファイルは30日、HTMLやスタイルシートなどのファイルには1日の有効期限を設ける例です。

<Files ~ ".(gif|jpe?g|png|ico|otf|ttf|eot|woff)$">
	Header set Cache-Control "max-age=2592000, public"
</Files>

<Files ~ ".(css|js|html|gz)$">
	Header set Cache-Control "max-age=86400, public"
</Files>