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

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

画像やフォントなど、更新頻度が低いファイルをユーザーの端末に記憶してもらい、アクセスする度に発生する転送処理を省く技術がキャッシュです。キャッシュを活用することで、転送量の節約、ページ表示速度の向上が期待できます。今回はキャッシュの設定方法を解説します。

キャッシュとは?

キャッシュ(cache)とは、ざっくり説明すると「記憶」です。例えば、ユーザーのパソコンがウェブページの画像をキャッシュ(記憶)しておけば、次に同じページにアクセスした時は、その画像をサーバーから再び読み込まず、自端末の記憶領域から読み込みます。従って、その分のデータを転送する必要がありません。その分だけ転送量が減り、ページ高速化に繋がります。

今回は、アクセスがあった時に、ユーザーの端末に対して「このコンテンツとこのコンテンツをキャッシュ(記憶)しておくれ」と、お願いする処理を、.htaccessに記述する方法を紹介します。

なお、キャッシュに関する技術的・専門的な内容は、下記ページが、図説もあって分かりやすいのでお勧めです。

キャッシュを有効にする方法

キャッシュを有効にする

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

SETTING

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

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

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

SETTING

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

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

SETTING

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

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

SETTING

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

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

SETTING

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

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

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

SETTING

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

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

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

SETTING

<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>

キャッシュを強制的に解除する方法

例えば、.htmlや.css、.jsといったファイルもキャッシュさせることが可能です。しかしながら、これらのファイルは一般的に更新頻度が高く、アクセスした時期によって、ユーザーは古いままのスタイルシートやJavascriptを読み込んでしまい、表示に不具合が発生するケースがあります。これら更新頻度の高いファイルの設定には気を付けましょう。

キャッシュを有効にしながら、強制的に新しいファイルを読み込ませるには、適当なクエリーを付加するという方法があり、お勧めです。次のような例です。下記の?201607は、年と週番号を組み合わせたものです。PHPなどを利用した出力で、このクエリを付与することによって、1週間ごとに必ずキャッシュが解除されるという理屈が分かれば完璧です。

HTML

<link type="text/css" href="./style.css?201607" rel="stylesheet">