編集が反映されない!?キャッシュの禁止や有効期限の設定方法
ブラウザキャッシュとは
私達がWEBサイトを見る際、サーバーからHTMLファイルや画像データ、cssファイル、jsファイルなど様々なファイルをダウンロードし、ブラウザ上で表示しています。
ブラウザは、一度ダウンロードしたものを一時的に保存(キャッシュ)する事で、2回目以降にアクセスした際に保存しておいたリソース(キャッシュ)を利用し、ブラウザ上で表示を行います。
そのため、以下のようなメリットがあります。
2回目以降、より速くページを表示できる
ユーザーの通信容量を節約できる
サーバーの負荷を軽減できる
ページの表示速度は、SEOにも影響を与える項目であり、表示速度が遅いと『離脱率』も上がってしまうため、ユーザーへのメリットはもちろん、製作者側にもメリットが生まれます。
また、同じものを再度ダウンロードする必要がないため、ユーザーの通信容量の節約、サーバーの負荷軽減とこちらも双方にメリットがあります。
キャッシュは上手く利用すればメリットが大きいですが、使い方が悪いと以下のようなデメリットも生じてしまいます。
更新したコンテンツが即時反映されない
ブラウザの動作が重くなる(キャッシュの溜めすぎ)
WEBサイトを更新した際、確かにファイルをアップロードしたにもかかわらず、ページが更新されないといった経験はありませんか?
ブラウザが一度開いたサイトをキャッシュしているため、更新前に変更前のページを開いていた場合、更新内容が即時反映されない事態が多々発生します。
また、表示速度を速めてくれる便利なキャッシュですが、色々なページを開きキャッシュを溜めすぎると、ブラウザの動作が重くなるといった現象が発生する可能性もあります。
キャッシュは、定期的に削除して整理するのも良いかもしれません。
スーパーリロード
キャッシュにより、最新情報が表示されない状況を回避する方法の1つとして『スーパーリロード』という方法があります。
『スーパーリロード』を行うと、ブラウザのキャッシュを無視してページデータを再読み込みする事ができます。
キャッシュにより古い情報を表示しているかどうかは、更新の有無がわからないユーザーの方にはわかりませんが、自分でサイトを更新している際は、いちいちキャッシュを削除しなくても済むため非常に便利な方法です。
私も、cssを編集する際は、このスーパーリロードを使って表示確認を行っています。
スーパーリロードの方法は簡単で、対象のページを開いた状態で、
- Windowsの場合：『Ctrl + F5』
- Macの場合：『Command + R』
上記をキーボードで打てば行う事ができます。
残念ながら、スマホやタブレットでは上記の方法を使う事はできません。
キャッシュの削除
ブラウザ上でキャッシュを削除すれば、新しい更新された内容を表示する事ができます。
この方法であれば、PC・スマホ・タブレット等のデバイスの種類に関係なく行う事が可能です。
ご使用のブラウザによってキャッシュの削除方法は異なるため、今回は詳しい説明は省略させていただきます。
キャッシュの有効期限の設定方法
キャッシュの有効期限
まず、WEBサイトの制作側が何も設定していなかった場合、キャッシュはどのくらい保存されるのでしょうか。
各ブラウザは、キャッシュの保存容量が決まっており、容量の上限に達すると、古いキャッシュから自動的に削除されていきます。
そのため、各々キャッシュが消えるまでの時間は異なります。
少し複雑な設定が必要になりますが、ブラウザのキャッシュ容量は変更する事も可能です。
また製作者側で『キャッシュの有効期限を指定』する事もできるのですが、例え自分で意識して設定をしていない場合でも、自動で有効期限を設定している場合も多いです。
有効期限の現状を調べる方法
キャッシュの状態がどのようになっているかは、『HTTPヘッダー』を確認する必要があります。
何らかのツールを使って確認する事も出来ますが、今回は利用者の多いブラウザ『chrome』にて専用ツールを使わずにPCで確認する方法をご紹介します。
まずは、調べたいページをcromeブラウザで表示させます。
対象ページを開いたら、キーボードの『F12』を押して『chrome デベロッパーツール』を開きます。
画面右側に何か表示されるかと思いますので、その部分の左端にカーソルをあて、左クリックを押したままで左側に動かし表示領域を広げましょう。
そうすると、『Network』というタブがあるので、そこをクリックします。
『Network』タブをクリックした段階では、情報が読み込まれていないため、『F5』を押すか、『Ctrl + R』を押すなどして再読み込みさせます。
そうすると、ファイルの一覧が表示されます。
キャッシュの有効期限はページ単位ではなく、『ファイル単位』で設定されます。
1ページには、HTMLファイルやcssファイル、jsファイルや画像ファイルなど様々なファイルが含まれていますが、その1つ1つに設定されており、それらのファイルが一覧表示されているのでどれかファイルをクリックしてみましょう。
キャッシュの設定は、『cache-control』の部分を見ます。
例えば、私のスタイルシート(css)は、『cache-control：public, max-age=604800』と記載されています。
『秒単位』で記載されているため、『604800秒 = 10080分 = 168時間 = 7日』という事になり、キャッシュの有効期限は一週間という設定になっている事がわかります。
有効期限の設定方法
有効期限を設定する際は、『.htaccess』を利用します。
『.htaccess』に関しては、下記の記事でも登場しました。
『.htaccess』は既に作成されている場合は、『ルートディレクトリ』に置いてあるかと思いますので確認してみて下さい。
(※ルートディレクトリ以外にディレクトリ事に置いている可能性もあります)
まだ作成されていない場合は、自分で作成する必要がありますので、今回の対応と合わせて上記関連記事内の対応も行う事をおすすめします。
それでは、実際に『有効期限』を設定する方法をご紹介していきます。
期限の時間単位
有効期限を設定する場合、その時間によって下記表のような時間単位を用います。
| 秒 | seconds |
| 分 | minutes |
| 時 | hours |
| 日 | days |
| 週 | weeks |
| 月 | months |
| 年 | years |
目安としては、『1週間～1年』が推奨されています。
(ガイドラインに違反するため、1年より長い期間は設定しないようにしましょう。)
ただし、更新頻度の高いサイトに関しては、1週間もキャッシュを表示してしまうと、情報が古くなってしまう場合もあるため、そういった際は1週間より短くてもかまいません。
この有効期限の設定は、『ファイルのtype単位』で行うため、変更頻度の少ない『スタイルシート』や『画像』などは、長めの期間を設定し、更新頻度の高いサイトの場合、HTMLなどは短めの期間を設定すると良いかと思いますので、自分のサイトの更新状況に合わせて設定しましょう。
textファイルの設定例
textファイルの場合、例えば、以下のようなものがあります。
- HTMLファイル
- スタイルシート(css)
- javascriptファイル(js・javascript)
それらに有効期限を設定する場合、以下のように設定します。
ExpiresByType text/html "access plus 10 minutes"
ExpiresByType text/css "access plus 2 weeks"
ExpiresByType text/javascript "access plus 1 years"
設定が必要な項目のみでかまいませんし、有効期限は各自適切な値に変更して下さい。
imageファイルの設定例
imageファイルの場合、例えば、以下のようなものがあります。
- jpegファイル(.jpg・.jpegなど)
- pngファイル(.png)
- gifファイル(.gif)
- アイコンファイル(.ico)
それらに有効期限を設定する場合、以下のように設定します。
ExpiresByType image/jpeg "access plus 10 minutes"
ExpiresByType image/png "access plus 3 months"
ExpiresByType image/gif "access plus 1 years"
ExpiresByType image/x-icon "access plus 1 years"
ExpiresByType image/vnd.microsoft.icon "access plus 1 years"
ファイルtypeの調べ方
上に書いた例以外にも様々なファイルの種類が存在します。
ファイルタイプは、先ほど記載した有効期限の現状を調べる方法と同じ方法で、『content-type』の項目を見れば調べる事が可能です。
先ほど例にあげた『javascript』においては、『application/javascript』と『text/javascript』などがあるため注意しましょう。
実際の使用例
Options +FollowSymLinks -Indexes
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
RewriteCond %{HTTP_HOST} ^www.jun-jun\.net
RewriteRule ^(.*)$ https://jun-jun.net/$1 [R=301,L]
RewriteCond %{THE_REQUEST} ^.*/index.php
RewriteRule ^(.*)index.php$ https://jun-jun.net/$1 [R=301,L]
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 years"
ExpiresByType image/png "access plus 1 years"
ExpiresByType image/gif "access plus 1 years"
ExpiresByType image/x-icon "access plus 1 years"
ExpiresByType image/svg+xml "access plus 1 years"
</IfModule>
実際に、『.htaccess』に記載する際は、12～20行目部分のように記述します。
注意事項
キャッシュに有効期限を設定する際は、以下の事に注意しましょう。
今回の方法では、自身のサーバーの『.htaccess』に設定しているため、外部のサーバーからダウンロードするファイルに対しては、適用されないため注意して下さい。
例えば、私のサイトでは、外部ファイルとして、GoogleAnalyticsの『analytics.js』ファイルや、bootstrapのファイル『bootstrap.min.css』など外部サーバーのものを利用しているため、自身のサーバーの設定は適用されていません。
私のサイトの各記事は、『HTML』という拡張子ではなく、『php』という拡張子がついています。
各記事内に『最新記事』という欄があり、記事を追加する度に動的に表示を変える領域があります。
完全な静的なサイトであれば、『text/html』タイプの有効期限をある程度長めの期間設定しても、更新頻度が低いのであれば問題になる事も少ないですが、動的な領域のあるサイトの場合は有効期限に長い期間を設定してしまうと、動的な部分に古い情報が表示される可能性もあるため注意しましょう。
そういった際は、有効期限を短く設定するよりも、キャッシュさせないという選択肢もあります。
例えば、『text/html』はキャッシュさせない設定にしており、『text/css』に長い有効期限を設けていた場合があったとします。
サイトのデザインをリニューアルなどでスタイルシートを使って大きく変更した場合、大幅にデザインが崩れてしまう事態が発生してしまう可能性があります。
キャッシュの有効期限内であれば、先ほどの設定ではサーバーに更新確認を行わないため、『html』は最新のものを利用するのに対し、『css』は古いものを使ってしまうからです。
そういった場合は、ユーザーに『スーパーリロード』や『キャッシュの削除』を行ってもらう必要がありますが、それは中々難しいです。
そういった際は、非常に手間ですが、上記例では、cssのファイル名を変えると、新しいものを読み込んでくれます。
キャッシュさせない方法
先ほどは、『キャッシュの有効期限』を設定する方法をご紹介しました。
動的な領域があるサイトにおいては、『キャッシュさせない』という選択肢が有効であるため、その方法もご紹介したいと思います。
ブラウザキャッシュをさせないようにする設定は、2つの方法があります。
01HTTPヘッダーで制御する方法
一番推奨されている方法です。
こちらも先ほどと同様、『.htaccess』を使い制御します。
『.htaccess』に以下のコードを設定します。
<Files ~ "¥.(html|php|jpe?g|gif|png|css|js|pdf)$">
Header add Pragma "no-cache"
Header set Cache-Control no-cache
</Files>
上記コードをそのまま設定してしまうとほとんどのファイルがキャッシュされなくなってしまい、表示速度に悪影響を与える恐れがあります。
そのため、自身のサイトの更新状況に合わせて、キャッシュさせない対象ファイルを絞り、修正するようにして下さい。
02METAタグで制御する方法
『各ページ』のheadタグ内にmetaタグを設定する事でキャッシュさせない方法もあります。
<head>
<meta http-equiv="Cache-Control" content="no-cache">
</head>
ただし、この方法は『ブラウザやProxyが独自で取り入れている仕様』であるため、ブラウザによっては機能しない恐れがあるため、あまり推奨されていない方法なため注意しましょう。
最後に
SEOやユーザビリティにも大きく影響する表示速度に関連する『ブラウザキャッシュ』は非常に便利な機能です。
『.htaccess』の編集方法さえわかればそれほど難しい作業ではなかったと思います。
(『.htaccess』を編集する際は、他の設定をいじってしまわないよう十分に気を付けて下さい。)
しかし、『良いあんばい』の有効期限設定ができなければ、『古い情報が表示される』など大きな不都合を生む可能性もあります。
自身のサイトの状況を良く考え設定は良く考えてから行いましょう。
また、有効期限を設定している状態で大幅な修正を行った際は、先ほどもご紹介した『ファイル名を変更』するなどの対策が重要です。
安易に設定せず、ブラウザキャッシュの動きを良く理解して設定する事が重要です。