Webコンサルタントの松崎です。
これまで「表示速度の改善はユーザーへの配慮で一番大事です」というテーマで、「画像の軽量化のやり方」や「次世代画像形式WebP・AVIFのメリットと変換方法」、「過剰なモーションの見直し（JavaScript最適化）」、「Webフォントの見直し」、「遅延読み込みのやり方」、「ファイルサイズの圧縮」など、ホームページの表示速度を改善するための具体的な方法をご紹介してきました。
今回は「キャッシュを活用する設定」について詳しく解説します。
キャッシュを適切に設定することで、ユーザーが2回目以降にホームページを訪れた時の表示速度を劇的に向上させることができます。ユーザーに表示が遅いのを我慢させてストレスを与えない、快適な閲覧環境を作りましょう。
キャッシュとは何か？
あなたは「キャッシュ」という言葉を聞いたことがありますか？
キャッシュとは「一度読み込んだデータを一時的に保存しておく仕組み」のことです。日本語では「一時記憶」や「一時保管」という意味になります。
例えば、よく行くカフェでいつも同じドリンクを注文するとしましょう。2回目以降に行ったとき、店員さんがあなたの顔を覚えていて「いつもの飲み物ですね」と言ってくれたら、注文の手間が省けて便利ですよね。
ホームページのキャッシュも同じような仕組みです。
一度表示したホームページのデータ（HTML、CSS、JavaScript、画像など）をユーザーのブラウザやサーバーに一時的に保存しておき、2回目以降のアクセス時にそのデータを使うことで、より速く表示させることができます。
キャッシュの種類
キャッシュには主に2つの種類があります。
ブラウザキャッシュ
ブラウザキャッシュは、ユーザーのパソコンやスマホなどのデバイス上に保存されるキャッシュです。具体的には、Google ChromeやSafari、Firefoxなどのブラウザが、一度表示したホームページのデータを保存しておく仕組みです。
ユーザーが同じページを再訪問したとき、ブラウザはサーバーに再度リクエストを送る代わりに、保存していたキャッシュデータを使って表示します。これにより、表示速度が大幅に向上します。
サーバーキャッシュ
サーバーキャッシュは、Webサーバー側で作成・保存されるキャッシュです。
通常、WordPressなどのCMSを使ったホームページでは、ページを表示するたびにデータベースからデータを取得して、HTMLを生成する処理が発生します。
サーバーキャッシュを使うと、一度生成したHTMLを保存しておき、次回のアクセス時には保存したHTMLをそのまま返すことができます。データベースへのアクセスや複雑な処理を省略できるため、サーバーの負荷が軽減され、表示速度が向上します。
この2種類のキャッシュは、それぞれ異なる場所で機能しますが、目的は同じ「表示速度を速くする」ことです。うまく使い分けることで、より効果的にホームページの表示速度を向上させることができます。
キャッシュを設定するメリット
キャッシュを設定することで、様々なメリットが出てきます。
表示速度の大幅な向上
2回目以降のアクセスでは、サーバーからデータを再ダウンロードする必要がなくなるため、表示速度が速くなります。画像や動画など、容量の大きいファイルをキャッシュしておくことで、効果は大きいです。
例えば、キャッシュを使わない場合、ユーザーが「トップページ→商品ページ→トップページ」と移動すると、トップページに戻る際に再度すべてのデータをダウンロードする必要がありますが、キャッシュがあれば、それらのデータは再利用されるため、瞬間的に表示されます。
サーバー負荷の軽減
キャッシュを使うと、サーバーへのリクエスト数が減り、サーバーの負荷が軽減されます。特にアクセス数の多いホームページでは、この効果は大きいです。
サーバー負荷が軽くなれば、同時アクセス数が増えても安定してホームページを表示できるようになります。また、サーバーの処理能力に余裕ができるため、重い処理を行う場合でもレスポンス低下を防げます。
通信量の削減
キャッシュを使うと、ユーザーとサーバー間の通信量が減ります。これはスマホユーザーにとって大きなメリットです。
データ通信量の制限があるプランを使っているユーザーにとって、キャッシュによる通信量の削減は、データ使用量の節約につながります。また、通信速度が遅い環境でもストレスなくホームページが見られるようになります。
SEO効果の向上
Googleは表示速度をランキング要因の一つとしています。
キャッシュを適切に設定することで表示速度が向上し、SEO面での評価も高まります。
特に「Core Web Vitals」と呼ばれるGoogleの評価指標の一つ「Largest Contentful Paint（LCP）」は、最大のコンテンツが表示されるまでの時間を測定しています。キャッシュを活用することでLCPの値を改善でき、検索順位の向上につながる可能性があります。
ブラウザキャッシュの設定方法
実際にブラウザキャッシュを設定する方法を見ていきましょう。
.htaccessによる設定
.htaccessファイルを使ってブラウザキャッシュを設定する方法が最も一般的です。
多くのレンタルサーバーではApacheというWebサーバーが使われており、.htaccessファイルで様々な設定が可能です。
【設定手順】
1. ホームページのルートディレクトリ（通常はpublic_htmlやhtdocsなど）にある.htaccessファイルをダウンロードします。存在しない場合は新しく作成します。
2. 以下のようなコードを追加します。
<IfModule mod_expires.c>
ExpiresActive On
# デフォルトの有効期限（1ヶ月）
ExpiresDefault "access plus 1 month"
# HTML・PHPファイルは基本的に毎回読み込む（必要に応じて変更）
ExpiresByType text/html "access plus 0 seconds"
ExpiresByType application/xhtml+xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
# CSSとJavaScriptのキャッシュ期間（1週間）
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
# 画像のキャッシュ期間（1ヶ月）
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType image/webp "access plus 1 month"
# フォントのキャッシュ期間（1年）
ExpiresByType application/font-woff "access plus 1 year"
ExpiresByType application/font-woff2 "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType font/opentype "access plus 1 year"
</IfModule>
このコードは、ファイルタイプごとにキャッシュの有効期限を設定しています。画像は1ヶ月、CSSとJavaScriptは1週間、フォントは1年間キャッシュされます。
HTML・PHPファイルは「0 seconds」に設定していますが、これは毎回サーバーから最新のファイルを取得することを意味します。HTMLファイルは更新頻度が高いことが多いため、キャッシュしないケースが一般的です。
有効期限はホームページの更新頻度に合わせて調整しましょう。
頻繁に更新するコンテンツは短く、めったに変わらないコンテンツは長くすると良いでしょう。
3. 編集した.htaccessファイルをサーバーにアップロードします。
レンタルサーバーの管理画面から設定
多くのレンタルサーバーでは、管理画面から簡単にブラウザキャッシュを設定できる機能が提供されています。
例えば、エックスサーバーでは「サーバーパネル」の「ブラウザキャッシュ設定」から、キャッシュのON/OFFを切り替えることができます。他のレンタルサーバーでも同様の機能があることが多いので、管理画面を確認してみてください。
この方法はコードを書く必要がなく、簡単にキャッシュを設定できるメリットがありますが、細かい設定ができない場合もあります。
WordPressプラグインを使う方法
WordPressを使っている場合は、キャッシュ機能を持つプラグインを利用するのが簡単です。代表的なプラグインには以下のようなものがあります。
WP Rocket
WP Rocketは有料プラグインですが、様々なキャッシュ機能を提供しています。
ブラウザキャッシュだけでなく、ページキャッシュやデータベースの最適化など、多岐にわたる高速化機能が含まれています。設定も簡単で、インストール後にわずかな設定で高い効果を発揮します。特に、技術的な知識がなくても使いやすいインターフェースが特徴です。
W3 Total Cache
W3 Total Cacheは無料で使えるキャッシュプラグインです。
ブラウザキャッシュ、ページキャッシュ、オブジェクトキャッシュなど、様々なキャッシュ機能を細かく設定できます。設定項目が多いので少し複雑ですが、自分の環境に最適な設定を細かく調整したい場合におすすめです。
WP Super Cache
WP Super Cacheも無料のキャッシュプラグインです。
W3 Total Cacheよりもシンプルな設定で、基本的な機能を提供します。「推奨設定」を選ぶだけでも十分な効果が得られるので、手軽に始めたい方に向いています。
サーバーキャッシュの設定方法
サーバーキャッシュは、サーバー側でホームページのHTMLなどを一時保存しておく仕組みです。特にWordPressなどのCMSを使用している場合に効果的です。
レンタルサーバーの機能を使う
ブラウザキャッシュでの設定方法と同様に、多くのレンタルサーバーでは、サーバーキャッシュを有効にする機能が提供されています。例えば、エックスサーバーでは「サーバーパネル」の「サーバーキャッシュ設定」からON/OFFを切り替えられます。
この方法は非常に簡単で、特別な知識がなくても設定できます。ただし、細かい設定はできず、サーバー会社が用意した設定になります。
WordPressプラグインを使う方法
WordPressを使っている場合は、前述のキャッシュプラグイン（WP Rocket、W3 Total Cache、WP Super Cacheなど）でサーバーキャッシュも設定できます。これらのプラグインは、ブラウザキャッシュとサーバーキャッシュの両方をサポートしています。
プラグインの設定画面で「ページキャッシュ」や「静的キャッシュ」などの項目を有効にすることで、サーバーキャッシュが機能します。
キャッシュ設定の注意点
キャッシュを設定する際には、いくつかの注意点があります。
更新頻度の高いコンテンツの扱い
ブログの記事や商品情報など、頻繁に更新されるコンテンツは、長期間キャッシュさせないように注意しましょう。キャッシュ期間が長すぎると、更新内容がユーザーに反映されるまで時間がかかってしまいます。
HTMLファイルは基本的にキャッシュしないか、短期間（数時間程度）にしておくのが無難です。一方、ロゴや背景画像など、めったに変更しないコンテンツは長期間キャッシュしても問題ありません。
キャッシュのクリア方法
キャッシュを設定すると、更新内容がすぐに反映されないことがあります。その場合、以下の方法でキャッシュをクリアしなければなりません。
ブラウザキャッシュのクリア
管理者側でテストする際には、ブラウザのキャッシュをクリアすると良いでしょう。各ブラウザによって方法は異なりますが、基本的には以下のようになります：
- Google Chrome：Ctrl+Shift+Deleteキー（WindowsのPC）または Command+Shift+Deleteキー（Mac）を押し、「キャッシュされた画像とファイル」にチェックを入れて「データを削除」をクリック。
- Firefox：Ctrl+Shift+Deleteキー（WindowsのPC）または Command+Shift+Deleteキー（Mac）を押し、「キャッシュ」にチェックを入れて「今すぐ消去」をクリック。
- Safari：メニューから「開発」→「キャッシュを空にする」を選択。
ブラウザによっては「強制再読み込み」という機能もあります。Google ChromeではF5キーを押しながらShiftキーを押す（または Ctrl+F5）と、キャッシュを無視して再読み込みが行われます。
サーバーキャッシュのクリア
WordPressプラグインを使っている場合は、プラグインの管理画面からキャッシュをクリアできます。例えば、WP Rocketでは「キャッシュをクリア」ボタンを押すだけです。
レンタルサーバーの機能を使っている場合は、管理画面からキャッシュの削除を行います。例えば、エックスサーバーでは「サーバーキャッシュ設定」の「キャッシュ削除」から可能です。
管理画面へのアクセス
WordPressなどのCMS管理画面は、キャッシュ対象から除外するのが一般的です。管理画面がキャッシュされると、最新の情報が表示されなかったり、操作に支障が出たりする可能性があります。
多くのキャッシュプラグインでは、管理画面は自動的に除外されますが、手動で設定する場合は注意が必要です。
キャッシュの効果を測定する方法
キャッシュを設定したら、その効果を測定しましょう。
PageSpeed Insights
GoogleのPageSpeed Insights（https://pagespeed.web.dev/）を使うと、ホームページの表示速度を評価できます。キャッシュ設定が適切に行われているかもチェックされ、改善ポイントが表示されます。
キャッシュ設定前と設定後でスコアを比較すると、効果がはっきりわかります。
GTmetrix
GTmetrix（https://gtmetrix.com/）も表示速度を測定できるツールです。PageSpeed Insightsよりも詳細な情報が得られ、「Leverage browser caching」という項目でキャッシュの設定状況を確認できます。
こちらも設定前後での比較がおすすめです。
ブラウザの開発者ツール
Google Chromeなどのブラウザには「開発者ツール」という機能があります。F12キーを押すか、右クリックして「検証」を選ぶと開きます。
「Network」タブを選択してページを読み込むと、各ファイルの読み込み状況が表示されます。キャッシュが効いている場合、「Size」欄に「(from disk cache)」と表示されます。
ユーザーへの親切のためのキャッシュ設定
キャッシュの設定は、検索順位向上のためのテクニカルSEOではなく、ユーザーへの「親切な配慮」です。
「このユーザーが前に見たページだから、すぐに表示できるようにしておこう」という配慮です。ユーザーは待たされないストレスのない操作・閲覧ができて「このサイトは使いやすいな」と感じてくれます。
表示速度の改善はユーザーに優しい親切なWebサイトにするための取り組みで一番大切な要素です。見た目のキレイさだけを重視して蔑ろにされがちですが、見えないところでの配慮が、実はユーザー満足度を大きく左右するのです。
ユーザーが快適に操作できるために
キャッシュの設定は、ホームページの表示速度を大幅に向上させる効果的な方法です。
特に2回目以降のアクセスでは、劇的な速度向上が期待できます。
設定方法には、.htaccessによる方法、レンタルサーバーの機能を使う方法、WordPressプラグインを使う方法などがあります。ホームページの特性や技術レベルに合わせて、最適な方法を選びましょう。
キャッシュの設定は、ユーザーにストレスのない快適なホームページでの体験を提供するための「親切な配慮」です。
あなたのホームページは、ユーザーに表示を待たせる不親切な環境になっていませんか？
制作会社に任せても、表示速度を快適にできないところも多いですよ。
「表示が遅いんです」とそのままにせず、是非あなたのホームページにも「ユーザーへの親切」を取り入れて、ユーザーに優しいホームページを目指しましょう。
表示速度の改善やキャッシュ設定でお悩みの方は、当社の徹底した表示速度改善を含むWebコンサルティングをご検討ください。
ユーザーファーストの視点で、快適なホームページづくりをお手伝できます。
初回相談は無料です。
いつでもお気軽にご相談ください。
（この記事には画像があります。画像部分は外部ブログサイトで見れます。）
