Webページを表示するとき、ブラウザはHTMLだけでなく画像、CSS、JavaScriptなどのファイルも読み込みます。毎回すべてを最初から読み込むと、表示に時間がかかる原因になります。
そこで使われるのがキャッシュ設定です。.htaccessでキャッシュのルールを決めておくと、同じ利用者が再訪したときにファイルの再利用がしやすくなり、表示速度の改善につながります。このページでは、初心者向けに基本の考え方と設定例を分かりやすく紹介します。
この記事で分かること
キャッシュとは、一度読み込んだファイルをブラウザ側に一時保存しておき、次回以降の表示を速くする仕組みです。
たとえば、ロゴ画像や共通CSSのように毎回ほとんど変わらないファイルは、一定期間ブラウザに保存しておくことで、再読み込みの回数を減らせます。
キャッシュの効果
同じ利用者が再びページを開いたときに、画像やCSSなどを再取得しなくて済む場合があり、表示が軽くなりやすくなります。
Apache系サーバーでは、.htaccessで Expires や Cache-Control を使ってキャッシュの期間を設定できます。
よく使われるのは、画像やCSS、JavaScriptなどの静的ファイルに対して保存期間を決める方法です。
まずは、比較的よく使われる基本形の例です。
<IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType text/css "access plus 1 week" ExpiresByType application/javascript "access plus 1 week" </IfModule>
この例では、画像は1か月、CSSとJavaScriptは1週間を目安にキャッシュさせています。
| 対象 | 例 | 考え方 |
|---|---|---|
| 画像 | jpg、png、gif | 頻繁に変わらないことが多いため、比較的長めでも使いやすいです。 |
| CSS | style.css など | デザイン変更があるため、画像より少し短めが扱いやすいです。 |
| JavaScript | script.js など | 更新時の影響が出やすいため、長くしすぎないほうが無難です。 |
環境によっては、Expiresに加えて Cache-Control を設定することもあります。次のような書き方です。
<IfModule mod_headers.c> <FilesMatch "\.(jpg|jpeg|png|gif|css|js)$"> Header set Cache-Control "public" </FilesMatch> </IfModule>
この設定は、対象ファイルをブラウザなどで再利用しやすくするための補助的な指定です。
初心者の方は、まず Expires の設定から始めるほうが分かりやすいです。必要に応じて Cache-Control を追加する流れでも十分です。
画像やCSSは長めのキャッシュと相性がよい一方、HTMLは更新頻度が高いことが多いため、長期間キャッシュさせると古い内容が表示されやすくなります。
そのため、初心者向けの運用では、まず画像・CSS・JavaScriptから設定し、HTMLは慎重に扱うほうが失敗しにくいです。
HTMLまで長期間キャッシュすると、ページを更新したのに利用者の画面で古い内容が残ることがあります。
キャッシュ設定をすると、利用者のブラウザに古いCSSや画像が残ることがあります。デザイン変更をしたのに反映されないように見えるときは、キャッシュの影響を疑います。
そのような場合は、ファイル名を変更したり、URLの末尾にバージョン番号を付けたりして、別ファイルとして読み込ませる方法が使われます。
<link rel="stylesheet" href="/css/style.css?v=2">
このようにしておくと、更新後に新しいファイルとして読まれやすくなります。
通常は、サイトの公開ディレクトリにある .htaccess に記述します。上位ディレクトリに設定すれば、その配下のファイルにも影響することがあります。
サイト全体に共通で使う画像やCSSがあるなら、全体に効く場所へまとめて書くと管理しやすいです。
設定は一度にたくさん追加せず、まずは画像とCSSだけなど、小さく始めると確認しやすくて安全です。
.htaccessでキャッシュを設定すると、画像やCSSなどの再読み込みを減らしやすくなり、表示速度の改善につながります。とくに同じ利用者が繰り返し閲覧するページでは効果を感じやすいことがあります。
まずは画像やCSS、JavaScriptのような静的ファイルから設定し、更新時の見え方を確認しながら少しずつ調整していくのがおすすめです。
WISNET / わいずねっと のレンタルサーバー
用途に合わせて2つのレンタルサーバープランをご用意しています。