【高速化】ページの表示速度改善！ブラウザキャッシュの有効期限を設定する方法を解説

2017年6月24日2023年5月3日

前回の記事でPageSpeed InsightsやThink with Googleといったサイトのパフォーマンスを測定するWEBサービスを使いましたが、モバイルページが55点パソコンページが73点という散々な結果になりました。

色々考えましたが、良い改善方法が思い浮かびません。
より詳細に改善方法を示してくれるPageSpeed Insightsを参考に、表示速度の問題を解決していきたいと思います。

今回はページ高速化のためにブラウザキャッシュの有効期限を設定する方法です。
それでは、さっそく始めていきましょう。

ブラウザのキャッシュ

まずはGoogleが提供するサービス、PageSpeed Insightsにアクセスして確認してみましょう。
改善提案を一覧で確認してみると、真っ先に目につくのが「ブラウザのキャッシュを活用する」という改善策です。

ちなみにこれはモバイルだけでなくパソコンにも共通している改善提案です。

ブラウザのキャッシュとは、ブラウザで一度表示したHTMLやCSS、画像といったページデータを一時的に保存しておくための機能です。同じページにアクセスするときに保存したキャッシュを使うことで、素早くページを読み込むことがでるというもの。

ユーザーからしたらページの読み込み速度を高速化できるということ。サーバーにとってもリクエストする回数が減るので、ブログ運営者は適切なキャッシュを設定することでサイトのパフォーマンスアップにつながります。

それ以外の特徴としては以前アクセスしたときのデータを再利用するわけですからキャッシュが残っている間は当然古い情報が表示されることもあります。更新した情報をいち早く伝えることができない場合があるのです。

また、ブラウジングのし過ぎでキャッシュやクッキーがたまり過ぎるとユーザー側のブラウザ環境が重くなったりすることもあります。これはキャッシュをクリアすることで改善できます。

キャッシュはこういったデメリット面もありますが、やはりサイトのパフォーマンスアップにつながるのでしっかり適切な設定をしておきたいところです。実際どのような設定をするのかというと、キャッシュに有効期限を設定するのです。

.htaccessとは

キャッシュの設定に変更を加えるには

.htaccessはそのままだとヘタクセスと読んで呼んでしまいそうですが違います。エイチティーアクセスが正解です。

サーバーのApacheを制御するための特殊なファイルで、ディレクトリ単位で設定を行うことができます。リダイレクトの設定を行うときに編集するのがこの.htaccessです。

.htaccessの編集方法

WordPressの場合は.htaccessが自動的に作成されるようです。使っているレンタルサーバーによっては管理画面から.htaccessの編集が可能ですが、今回はFTPソフト「FileZilla」を使い編集してみました。

FTPを開くとドメイン直下のルートディレクトリに.htaccessファイルがあります。

これをローカルに移して編集作業を行います。.htaccessのままでは開くことができないようなので、一旦htaccess.txtというファイル名に変えてメモ帳として開きます。

.htaccessの書き方

.htaccessの書き方には一定のルールがあり、書き方を誤ってしまうとエラーと認識されページが表示されないなんてことにもなってしまいます。万が一エラーになってしまったら追記した部分を消してしまえば問題ありませんが、このファイルを扱う前に最低限覚えておきたいことを紹介します。

BOMなしで保存する

文字コードのUTF-8には「BOMあり」と「BOMなし」の2種類あります。例えばローカルに移して編集した.htaccess(htaccess.txt)をメモ帳などのテキストエディタで保存するとBOMありで保存することになります。

私自身一度経験がありますが、FTPソフトとローカルを使いファイルを編集するとこのBOMありがエラーの元になるわけです。TeraPadとったBOMなしに対応しているエディタではない限りメモ帳などでは表面上ではBOMあり・BOMなしの見分けがつかないのでBOMを知らなければなかなかエラーに気づくことができません。

そこでFTPソフトを使いローカルで編集保存する場合はメモ帳を使うのは避けるべきです。TeraPadはBOMなし(UTF-8N)で保存することができるので、BOMが原因のエラーになることはありません。

UTF-8	BOMあり
UTF-8N	BOMなし

TeraPad公式ページ

⇒ http://www5f.biglobe.ne.jp/~t-susumu/

編集方法

.htaccessはメモ帳で気軽に編集することができます。ただし.htaccessは前述したように頭に「.」がつく特殊ファイルなのでそのままで開くことができません。メモ帳で開くときは一度htaccess.txtにして編集しましょう。

また、BOMの問題もあるのでメモ帳でなくTeraPadで保存します。

作ったファイルをFTPソフトでサーバにファイルをアップロードするわけですが、この場合一度htaccess.txtのままアップしてその後に.htaccessにファイル名を変更します。このファイル名変更を忘れると動作しないので気を付けましょう。

ディレクトリ別に設定

.htaccessは下の階層に設定効果が及ぶファイルです。全体に設定したいのなら一番上階層のルートディレクトリでいいでしょう。下の特定階層だけに設定したいという場合は設定したい一番上の階層に.htaccessを置きます。

例えば、下の階層に.htaccessがある場合でその上階層にも.htaccessがある場合2つの下階層には上階層の設定も引き継がれます。同じような設定が競合してしまう場合は下階層の設定が優先されるようです。

mod_expires

キャッシュの設定を行うために使うのがApacheのモジュールmod_expiresです。mod_expiresを使うことでキャッシュに有効期限を設定することができます。

.htaccessにmod_expiresの設定をするというとなんだか難しく感じてしまいますが、ルールに沿った書き方を.htaccessにコピペするだけです。

今回このように書きました。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css “access plus 10 days”
ExpiresByType text/js “access plus 10 days”
ExpiresByType image/jpg “access plus 10 days”
ExpiresByType image/png “access plus 10 days”
ExpiresByType image/gif “access plus 10 days”
ExpiresByType application/x-javascript “access plus 10 days”
</IfModule>

最初の1行目「<IfModule mod_expires.c>」でmod_expiresの有無を確認、3行目の「ExpiresActive On」でキャッシュ機能を有効化します。

その下の「ExpiresByType」で各箇所のデフォルトの有効期限を設定できます。「access」が訪問ユーザーがアクセスしてからの時間です。

指定できる時間の分類は以下になります。

年	years
月	months
週	weeks
日	days
時	hours
分	minutes
秒	seconds

秒で全てを設定することもできますが、わかりづらいのでdaysやweeksなどを使い有効期限を表します。

適切な有効期限

当サイトは有効期限を10日に設定しましたが、この辺は人によってまちまちのようです。一体どう設定すれば適切なのかわからないのでこれについてはGoogleのPageSpeed Insightsのヘルプを確認してみましょう。

推奨される解決方法

サーバーでブラウザのキャッシュを有効にします。静的なリソースのキャッシュの有効期間は 1 週間以上にしてください。広告やウィジェットなどのサードパーティリソースの場合は、キャッシュの有効期間を 1 日以上にします。キャッシュ可能なすべてのリソースで、次のような設定をおすすめします:

Expires を 1 週間以上、できれば最大で 1 年間先に設定します（より広くサポートされているため、Cache-Control: max-age よりも Expires をおすすめします）。RFC のガイドラインに違反するので、1 年以上先には設定しないでください。
リソースの変更時期が正確にわかっている場合は、短い有効期間を設定してもかまいません。ただし、すぐに変更される可能性があるものの、変更時期がわからない場合は、長い有効期間を設定して、URL フィンガープリント（後述）を使用してください。

出典 : ブラウザのキャッシュを活用する | PageSpeed Insights

1週間以上を推奨しているようです。最大でも1年といったところでしょうか。例えばデザイン重視でCSSを頻繁に変更するサイトであればCSSのキャッシュだけ1日にしてもいいかもしれません。

キャッシュ設定がうまくいかない場合

上記の方法でうまく行くかと思いますが、キャッシュの有効期限が設定できないこともあります。

当サイトがそうでした。PageSpeed InsightsやGTmetrixといったツールで何度確認しても「キャッシュの有効期限が設定されていません」と表示されてしまうのです。すぐ反映されないのかと1日置いたり、少し書き方を変えて色々試してみたのですが全くだめでした。

キャッシュの初期化

.htaccessの2行目に「ExpiresDefault “access plus 1 seconds”」を付け加えて試してみました。これはキャッシュを初期化するための記述です。

ExpiresActive On
ExpiresDefault “access plus 1 seconds”
ExpiresByType text/css “access plus 10 days”
ExpiresByType text/js “access plus 10 days”…

この初期化で有効期限が設定されたようですが、設定が反映された期間が1秒という短いものだったのでこれではあまり意味がありません。おそらく初期化の「1 seconds」が有効期限として反映されてそれより下の記述が無視されているのでしょう。

有効期限が設定できない場合の対処法

これについては他にこういった事例がないかネットを調べたところあるじゃないですか。「ExpiresDefault “access plus 1 seconds”」による初期化の1秒だけ有効期限に反映されてそれより下の設定が反映されていないという事例が。

出典 : .HTACCESSでのJAVASCRIPTキャッシュの有効期限が上手く設定できない時の対処 | aoringo works

以下の書き方でうまくいったようなので試してみたら今度はしっかり有効期限が設定できました！

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault “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/js “access plus 216000 seconds”
ExpiresByType text/javascript “access plus 216000 seconds”
ExpiresByType application/javascript “access plus 216000 seconds”
ExpiresByType application/x-javascript “access plus 216000 seconds”
ExpiresByType application/x-shockwave-flash “access plus 216000 seconds”
</ifModule>

「x-icon」(ファビコン？)や「x-shockwave-flash」の記述を加えた方が良かったのでしょうか。それとも全て秒に置き換えた方が良かったのでしょうか？さすがに単位は秒でも週でも変わりないかもしれませんが今回ばかりはほとんど諦めかけていたので本当助かりました。こればかりはありがとうございましたといいたい気分です。

ちなみにレンタルサーバーのwpX管理画面から行うことができるキャッシュ設定は予め無効化してあります。216000秒は1か月とのことです。