はじめに
ウェブサイトを開発および公開する際、CSSファイルの変更を行うことはよくあることですが、ブラウザのキャッシュによって変更が反映されないことがあります。修正したい箇所を見つけて直したけどすぐ反映されない…また、実務でも自分の環境で見ているときは修正されているのに、相手側の環境だと修正が反映されていない…ということが多々あります。なので、開発中は変更がスムーズできると良いですよね。この記事では、CSSファイルのキャッシュを無効にする方法を紹介し、サイトの変更をスムーズに反映させる手法について解説します。
キャッシュとは
キャッシュはウェブページやそのリソースを保存し、再度アクセスした際に読み込み速度を高速化する仕組みです。
キャッシュ無効化の方法
.htaccessファイルに下記を追加してください。
<IfModule mod_headers.c>
<FilesMatch "\.css$">
Header set Cache-Control "max-age=0, no-store"
</FilesMatch>
</IfModule>
キャッシュが無効になっているかを確認する
検証ツールを開いて「ネットワーク」タブを選択します。
「ネットワーク」タブにファイルが表示されていない状態になっているので、その状態でページを再読み込みしてください。
下記の画像のようにファイルが表示されます。
キャッシュを無効にした後でCache-Controlの値が変わっていることがわかります。
キャッシュを無効にしていない場合
max-age=31536000秒なので1年間キャッシュが有効であることを示しています。
キャッシュを無効にした場合
no-cache
リソースがブラウザのキャッシュに格納されないことを示しますが、サーバーはリソースを検証して、変更があれば新しいコンテンツを提供します。
no-store
リソースのキャッシュを一切保存しないことを示します。これはブラウザのキャッシュに関するデータも含みます。サーバーに対してもキャッシュの再利用を許可しないため、毎回リソースの再取得が行われます。
must-revalidate
キャッシュが期限切れの場合にサーバーに確認するよう指示します。キャッシュされたリソースが有効期限を超えている場合、ブラウザはサーバーにリソースの新鮮なコピーを要求します。サーバーはリソースの状態を確認して、変更がある場合に更新されたコンテンツを提供します。
キャッシュを無効にする他の方法
①cssのファイル名を変更する
CSSファイルのファイル名を変更することで、ブラウザが新しいファイルとして認識し、キャッシュを無効化します。
②ファイル名をクエリ文字列で管理
style.css?ver=1.1のようにクエリ文字列でファイル名を管理します。
?ver=1.1の数字を?ver=1.2と更新することでブラウザが新しいファイルとして認識し、キャッシュを無効化します。
③metaタグを使用
下記を<head>タグ内に追加してください。
<meta http-equiv="Cache-Control" content="no-store">
上記①②の方法はcssを更新する度にファイル名やクエリ文字列の変更が必要になるので、効率は良くないと思います。
②に関しては、verの数字を変更しないとcssの反映がされないので注意が必要です。実務経験初心者の頃にcssが全然反映されなくて焦った経験がありました。
WordPressのfunctions.phpでwp_enqueue_style関数を使用してcssを読み込むときに第4引数にverの数字を指定することができます。
‘1.0’の部分が該当します。
function enqueue_custom_styles() {
// テーマのスタイルシートを登録
wp_enqueue_style('style', get_template_directory_uri().'/style.css', array(), '1.0', 'all');
// 他のスタイルシートやスクリプトを登録...
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');
開発中などcssの更新が必要な場合、wp_enqueue_style関数のverの部分はnullか空にしておくことをおすすめします。そもそもverの数字が必要なく、第5引数を書かない場合は省略ができます。
nullに変更
function enqueue_custom_styles() {
// テーマのスタイルシートを登録
wp_enqueue_style('style', get_template_directory_uri().'/style.css', array(), null, 'all');
// 他のスタイルシートやスクリプトを登録...
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');
第5引数を書かない場合は省略も可能。第3引数もデフォルトが「array()」なので、省略が可能。
function enqueue_custom_styles() {
// テーマのスタイルシートを登録
wp_enqueue_style('style', get_template_directory_uri().'/style.css');
// 他のスタイルシートやスクリプトを登録...
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');
③に関しては一部のブラウザでは無視される可能性があり、確実な方法とは言えません。
また、すべてのページの<head>タグに追加する必要があるため、追加する手間がかかります。
まとめ
開発時などcssの更新が多く行われるときは、cssファイルのキャッシュを無効にすることで、サイトの変更が迅速に反映されるようになります。キャッシュを無効にする方法はいくつかありますが、サーバーの.htaccessファイルを編集する方法が一番確実だと自分は考えています。以前の自分と同じようにcssの反映がされなくて煩わしさを感じられている方に、有益な記事になったと思っていただけたのであれば幸いです。適切な方法を選択し、開発効率を向上させるためにキャッシュ無効化をぜひ活用しましょう。