キャッシュ設定でサイト表示を3倍速くする.htaccessの書き方

2014/04/18 2016/05/06

.htaccess にキャッシュを指示する Cache-Control や Expires を追記するとサイトの読み込み速度が向上します。.htaccessについての簡単な解説と、コピペで使える一般書式をご紹介。

.htaccess（どっと・えいちてぃー・あくせす）は、Apache Webサーバの動作を定義するためのファイルです。特定ページのアクセスを制御したり、エラーページ（404ページ）をカスタマイズしたり、様々な働きをします。

中でもブラウザキャッシュの設定はページの表示を軽くするために重要な働きをします。ブラウザからのリクエストをローカルに保存し、二度目以降はサーバに問い合わせずローカルから読むことで体感速度を劇的に向上させることが出来るからです。

ここでは.htaccess設定の中でも特にキャッシュ周りの項目について、Cache-Control および Expires の備忘録をまとめました。

ブラウザキャッシュとは？

WEBページを読みに行くと、画像を初めとする各種データは一時的に閲覧者のマシンに保存されます。

このときキャッシュの再読込みに期限を設定しておくと、その期間内は新たにサーバに問い合わせることなくローカルデータが参照されます。つまり通信が発生しない分の表示が速くなります。

ただキャッシュを設定すれば速くなるのが判っていても、CSSなどの読み込みファイルを頻繁に改造していると、更新が反映されなくなるなどの不安があります。

その場合でも自分の更新癖に合わせて拡張子判定したり、一部のファイルだけ強制的にキャッシュをクリアすることで不具合を回避することが可能です。

.htaccessファイルの基本的なルールと作業上の注意

.htaccessは単なるテキストファイルですが、書式を間違えると意図しない挙動をしたり深刻なエラーが発生します。最新の注意を払い、必ずバックアップを取って作業しましょう。

.htaccessの設定は『自分自身の現在地より下のディレクトリ』に対して有効です。一般的にはルートディレクトリに設置しますが、特定の階層に設置するとそこだけに働く設定を作ることも出来ます。

指定改行コードはLFです。Windowsや古いMacintosh（OS9以前(^^;）でローカル作業したファイルをサーバにアップロードするときは、改行コードが選べるエディタを使って LFで保存して下さい

各種指定は正規表現を使うことが出来ます。例えば “html?” は、htmとhtmlの両方にマッチします。

なお、コメントアウトするには行頭に＃をつけます。

.htaccess における Cache-Control の設定

本題に入ります。

Cache-Control は、サーバキャッシュやリクエスト方法を定義する項目です。設定次第ではキャッシュを無効にすることも出来ますが、今回の目的はキャッシュコンテンツの対象を広げることです。

このとき、拡張子ごとにまとめたり別の設定を与えることも出来ます。たとえば、CSSだけ異なる期間を指定する方法が次の書式です。

【.htaccess】# CACHE media files for 30days <Files ~ ".(gif|jpe?g|png|ico|js|gz|otf|ttf|eot|woff)$"> Header set Cache-Control "max-age=2592000" </Files> # CACHE media files for 12hours <Files ~ ".(css)$"> Header set Cache-Control "max-age=43200" </Files>

拡張子について

記述を順に見ていきます。

冒頭の　# CACHE media files for 30days　から始まる記述で、指定の拡張子を持つ外部ファイルを30日キャッシュします。

拡張子の内訳は左から順に gif ～ ico までが画像ファイル、js がJavascript、gz は GZIP圧縮ファイル、 otf以降がWebフォントとなっています。

他に自作曲を配信してる場合は mp3 を追加するなど、ご自分のサイト構成に合わせて調整して下さい。

なお、jpe?g のハテナは jpeg / jpg の表記揺れを吸収するための正規表現です。前章で軽く触れた “html?” と同じ記法です。

拡張子ごとに指定期間を分ける

一部のファイルを頻繁に書き換えるようなケースでは、他の設定と分けておくと便利です。

特にCSSやJavaScriptなど、サイト全体から随時参照されるデータは注意しましょう。

【関連記事】

WordPressで更新したCSSやJSファイルをキャッシュさせない方法

WordPressでバージョン情報を付加すると、キャッシュ期間を長く取っても自動リフレッシュ可能です。

保存期間（秒数）早見表

指定する数字は秒数です。こちらも好みで調整して下さい。

１時間　　…　3600
１日　　　…　86400
一週間　　…　604800
二週間　　…　1209600
３０日　　…　2592000
９０日　　…　7776000
１８０日　…　15552000
３６５日　…　31536000

.htaccess における Expires の設定

【2015/07/24 本章追記】リソースリクエストに関する指定として、Expires レスポンスヘッダも定義されてます。

指定する期日を過ぎると「そのキャッシュは古い」と判断され、改めてサーバに問い合わせが行きます。つまり、指定期間中はサーバリクエストが発生しません。

Cache-Control と同様の指定をするなら次のような書式となります。新しい拡張子を追加するときは AddType で属性を定義しましょう。

【.htaccess】#MIME type AddType application/x-font-ttf .ttf AddType application/x-font-woff .woff # CACHE media files <ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType image/png "access plus 1 months" ExpiresByType image/jpeg "access plus 1 months" ExpiresByType image/gif "access plus 1 months" ExpiresByType image/x-icon "access plus 1 months" ExpiresByType application/x-font-ttf "access plus 1 months" ExpiresByType application/x-font-woff "access plus 1 months" ExpiresByType application/x-javascript "access plus 1 months" ExpiresByType text/javascript "access plus 1 months" ExpiresByType text/css "access plus 12 hours" </ifModule>