ブラウザのキャッシュを活用する

Google Developers というサービスの中に、PageSpeed Insightsというツールがあります。ここで任意のURLを入れると、ページを分析して、コメントを返してくれる、という仕組みになっています。基本的にはページを読み込む速度と、ユーザビリティがチェックされるようです。

自分の作っているサイトを試してみましたが、コメントがいろいろ出てきて、しかもヘルプを見ても英語でわかりにくい。そこで覚え書き代わりに、どのように対策をして行ったかを記録したいと思います。

まずは「ブラウザのキャッシュを活用する」というコメント。要は画像ファイルなどを訪問者のブラウザのキャッシュにあるものを優先して表示させ、表示速度を速くしよう、というものです。

ただ、そのやり方がヘルプを見ても「Expiresを使え」とか書いてあるし、expiresを検索してみると、サーバーレベルの設定だとあるし、「ではレンタルサーバーではどうすればいいの?」と思っていました。

そこでさらに調べてみると、.htaccess ファイル内に、ファイルタイプとその更新までの時間を秒単位で記入しておけば良い、ということがわかりました。該当する情報があるサイトを見つけるのに、どのようなキーワードを使って検索したら良いのかがよくわからず時間がかかりましたが、見つけたら沢山似たようなサイトがあることがわかりました。

設定の一例がこれです。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 1 seconds”
ExpiresByType text/html “access plus 1 seconds”
ExpiresByType image/gif “access plus 2592000 seconds”
ExpiresByType image/jpeg “access plus 2592000 seconds”
ExpiresByType image/png “access plus 2592000 seconds”
ExpiresByType image/x-icon “access plus 2592000 seconds”
ExpiresByType text/css “access plus 604800 seconds”
ExpiresByType text/javascript “access plus 216000 seconds”
ExpiresByType application/x-javascript “access plus 216000 seconds”
ExpiresByType application/x-shockwave-flash “access plus 216000 seconds”
</ifModule>

これは各ファイルタイプを一度ブラウザーが読み込んでから、キャッシュを使わずに次に新たに読み込んでくるまでの時間を記入してあるようです。つまり、jpeg画像なら2592000秒間は、キャッシュしたものを使え、ということ。バックグラウンドやヘッダーに使われている画像をキャッシュさせておけば、もちろんそのサイトの表示は速くなる、という寸法ですね。

ちなみに上記の設定が書かれていたのはここ。WordPress用の設定として書かれていますが、キャッシュ指定の部分は、htmlで書かれた一般的なホームページであっても共通のはずです。