MENU
  1. ホーム
  2. Apache
  3. Apacheで静的ファイルのキャッシュを有効化する方法と設定例

Apacheで静的ファイルのキャッシュを有効化する方法と設定例

Apache

ApacheのWebサーバーで静的ファイルのキャッシュを設定することは、ウェブサイトのパフォーマンスを向上させる効果的な手法です。静的ファイルとは、CSS、JavaScript、画像ファイルなどの変更頻度が低いファイルを指します。これらをブラウザ側にキャッシュさせることで、同じファイルを再度ダウンロードする必要がなくなり、ページの読み込み速度が向上します。

さらに、キャッシュを適切に設定することでサーバーへのリクエスト数が減少し、サーバーの負荷軽減にもつながります。本記事では、Apacheで静的ファイルのキャッシュを有効化する方法について、mod_expiresモジュールを中心に具体的な設定方法を解説します。実際の設定例を交えながら、パフォーマンス向上に役立つポイントをわかりやすく紹介します。

目次

静的ファイルのキャッシュとは？


静的ファイルのキャッシュとは、ブラウザやプロキシサーバーに画像やCSS、JavaScriptなどのファイルを一定期間保存し、再訪問時に再度ダウンロードせずに済むようにする仕組みです。

これにより、次回以降のアクセス時に同じリソースをサーバーから取得する必要がなくなり、ページの表示速度が大幅に向上します。

静的ファイルの種類

  • 画像ファイル：jpg、png、gif など
  • スタイルシート：CSS ファイル
  • スクリプト：JavaScript ファイル
  • フォント：woff、ttf など

キャッシュの仕組み


ブラウザは、最初にWebサイトを訪問した際に静的ファイルをダウンロードし、キャッシュフォルダに保存します。次回のアクセス時にはキャッシュからファイルを読み込み、サーバーへのリクエストは最小限になります。
適切なキャッシュの有効期限を設定することで、必要なタイミングでファイルが更新され、新しいファイルが反映されます。

Apacheでキャッシュを設定するメリット

Apacheで静的ファイルのキャッシュを設定することは、ウェブサイトのパフォーマンス向上に直結します。特にアクセス数が多いサイトでは、キャッシュの効果が顕著に表れます。

1. ページの読み込み速度向上


静的ファイルがブラウザにキャッシュされることで、次回のアクセス時にサーバーからのダウンロードが不要になります。その結果、ページの読み込み速度が大幅に改善され、ユーザーエクスペリエンスが向上します。

2. サーバー負荷の軽減


キャッシュを利用することで、リクエストが減少し、サーバーへの負荷が軽くなります。特に高トラフィックのサイトでは、サーバーのリソース節約につながり、応答速度が安定します。

3. 帯域幅の削減


静的ファイルのダウンロードが少なくなるため、ネットワークの帯域幅を節約できます。これは、特にモバイルユーザーや低速回線でのアクセスに効果的です。

4. SEO対策としての効果


ページ速度は検索エンジンのランキング要因の一つです。キャッシュによる高速化は、検索エンジンの評価向上にも寄与します。結果として、サイトのSEO対策にも効果があります。

5. ユーザー満足度の向上


ページの読み込みが速いサイトは、ユーザーの離脱率を低下させます。特にECサイトや情報サイトでは、読み込み時間の短縮がコンバージョン率を高める要因となります。

mod_expiresモジュールの概要と導入方法

Apacheで静的ファイルのキャッシュを設定する際に不可欠なのが「mod_expires」モジュールです。このモジュールは、ファイルに対してExpiresヘッダーを付与し、キャッシュの有効期限を設定する役割を担います。これにより、ブラウザがキャッシュをどのくらいの期間保持するかを制御できます。

mod_expiresの特徴

  • 簡単な設定：.htaccessファイルやApacheの設定ファイルで、特定のファイルタイプごとにキャッシュ期間を簡単に指定可能。
  • 柔軟な制御：アクセスした日時を基準にキャッシュ期限を設定できる。ファイルごと、ディレクトリごとに異なる設定が可能。
  • パフォーマンス向上：クライアントサイドでキャッシュを管理するため、サーバーの負荷を削減しつつ、ページの読み込み速度を向上させる。

mod_expiresの導入方法

1. モジュールの有効化


以下のコマンドを使用して、mod_expiresモジュールが有効になっているか確認します。

apachectl -M | grep expires


もし「expires_module (shared)」が表示されない場合は、以下のコマンドでモジュールを有効化します。

sudo a2enmod expires
sudo systemctl restart apache2

2. .htaccessまたは設定ファイルへの記述


mod_expiresモジュールが有効になったら、.htaccessファイルやApacheの設定ファイル（httpd.conf）に以下の設定を追加します。

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType application/javascript "access plus 1 week"
</IfModule>


これにより、jpgやpngなどの画像は1か月間、CSSやJavaScriptは1週間キャッシュされるようになります。

導入後の確認方法


設定が正しく反映されているかを確認するには、ブラウザのデベロッパーツール（F12）でネットワークタブを開き、静的ファイルに「Expires」や「Cache-Control」ヘッダーが付与されているかを確認します。

Expiresヘッダーの設定方法と例

Expiresヘッダーは、静的ファイルのキャッシュ有効期限を指定するHTTPヘッダーです。このヘッダーを使うことで、ブラウザがファイルをどれくらいの期間キャッシュするかを決定します。指定した期間が過ぎると、ブラウザは再度サーバーから新しいファイルを取得します。

Expiresヘッダーの基本構文

ExpiresActive On
ExpiresByType [MIMEタイプ] "access plus [時間]"
  • ExpiresActive On：キャッシュの有効化
  • ExpiresByType：ファイルのMIMEタイプごとにキャッシュ期間を指定

設定例


以下は、一般的な静的ファイルに対してExpiresヘッダーを設定する例です。

<IfModule mod_expires.c>
    ExpiresActive On
    # 画像ファイルは1ヶ月キャッシュ
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"

    # CSSとJavaScriptは1週間キャッシュ
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType application/javascript "access plus 1 week"

    # フォントファイルは6ヶ月キャッシュ
    ExpiresByType font/woff2 "access plus 6 months"
    ExpiresByType font/woff "access plus 6 months"
</IfModule>

設定のポイント

  • 画像やフォントなどの変更頻度が少ないファイルは、長め（1ヶ月〜6ヶ月）に設定するのが一般的です。
  • CSSやJavaScriptは比較的変更が多いため、1週間〜1ヶ月程度のキャッシュ期間を設定します。
  • HTMLファイルは即時更新が必要な場合が多いため、キャッシュさせないケースもあります。

キャッシュ無効化の設定例


すべてのファイルでキャッシュを無効にする場合は、以下のように設定します。

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 0 seconds"
</IfModule>


これにより、すべてのリソースが常に再読み込みされ、キャッシュが行われません。

設定の確認方法


設定が正しく反映されているかを確認するには、以下の手順で確認できます。

  1. ブラウザのデベロッパーツールを開く（F12）
  2. [ネットワーク]タブで静的ファイルを選択
  3. HTTPレスポンスヘッダーにExpiresが表示されていることを確認

また、以下のコマンドでApacheの設定ミスがないかも確認できます。

apachectl configtest


「Syntax OK」と表示されれば、設定に問題はありません。

Cache-Controlディレクティブの使い方

Cache-Controlは、キャッシュの動作を細かく制御するためのHTTPヘッダーです。特に「mod_headers」モジュールと組み合わせることで、ファイルのキャッシュ期間や条件を柔軟に設定できます。Expiresヘッダーが絶対的な期限を指定するのに対し、Cache-Controlは相対的なキャッシュ期間を指定できるのが特徴です。

Cache-Controlの主なディレクティブ

  • max-age=[秒数]：指定した秒数の間、キャッシュを有効にする（例：max-age=604800 は1週間）
  • public：誰でもキャッシュ可能（CDNやプロキシがキャッシュ可能）
  • private：ブラウザのみキャッシュ可能（CDNやプロキシはキャッシュしない）
  • no-cache：キャッシュはするが、必ずサーバーに確認してから使用
  • no-store：キャッシュ自体を行わない（セキュリティが必要なコンテンツに推奨）
  • must-revalidate：キャッシュが期限切れの場合は必ずサーバーに再確認する

Cache-Controlの設定方法


.htaccessファイルやApacheの設定ファイル（httpd.conf）で「mod_headers」を利用して設定します。

<IfModule mod_headers.c>
    # 画像は1ヶ月キャッシュ
    <FilesMatch "\.(jpg|jpeg|png|gif|webp)$">
        Header set Cache-Control "max-age=2592000, public"
    </FilesMatch>

    # CSSとJavaScriptは1週間キャッシュ
    <FilesMatch "\.(css|js)$">
        Header set Cache-Control "max-age=604800, public"
    </FilesMatch>

    # 動的ファイル（PHP）はキャッシュさせない
    <FilesMatch "\.(php|html)$">
        Header set Cache-Control "no-store, no-cache, must-revalidate"
    </FilesMatch>
</IfModule>

Cache-Controlの設定例と解説

  • 画像や動画などは長期間キャッシュしても問題ないため、1ヶ月（max-age=2592000）を指定。
  • CSSやJavaScriptは変更される可能性があるため、1週間程度に設定。
  • PHPやHTMLなどの動的コンテンツはキャッシュを無効にし、リアルタイムで取得するように設定。

Cache-ControlとExpiresの併用


Cache-ControlとExpiresは同時に設定可能です。両方が設定されている場合、ブラウザはCache-Controlを優先します。

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType application/javascript "access plus 1 week"
</IfModule>

<IfModule mod_headers.c>
    Header set Cache-Control "max-age=604800, public"
</IfModule>

設定後の確認方法


ブラウザのデベロッパーツールを使用して、静的ファイルのHTTPヘッダーに「Cache-Control」が正しく表示されているかを確認します。また、以下のコマンドで設定ミスがないかもチェックできます。

apachectl configtest


正しくキャッシュが働いていれば、ファイルの読み込み速度が向上し、サーバーへの負荷が軽減されます。

キャッシュの無効化方法と更新タイミングの管理

キャッシュはパフォーマンスを向上させる一方で、ファイルの更新が反映されない問題を引き起こすことがあります。特にCSSやJavaScriptなどの変更が頻繁に行われる場合、古いキャッシュが残り、ユーザーに最新のコンテンツが表示されないことがあります。ここでは、キャッシュの無効化方法と、必要なタイミングで更新を適用する方法について解説します。

キャッシュを無効化する方法

1. Cache-Controlディレクティブでキャッシュを防ぐ


特定のファイルに対してキャッシュを無効化するには、「no-store」「no-cache」を設定します。

<IfModule mod_headers.c>
    <FilesMatch "\.(php|html|json|xml)$">
        Header set Cache-Control "no-store, no-cache, must-revalidate"
    </FilesMatch>
</IfModule>
  • no-store：ファイルをキャッシュしない。常に最新のリソースを取得。
  • no-cache：キャッシュされるが、使用前にサーバーで必ず確認する。

2. Expiresヘッダーで即時期限切れにする


Expiresヘッダーを「過去の日時」に設定することで、キャッシュを即時無効化できます。

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/html "access plus 0 seconds"
</IfModule>


これにより、HTMLファイルなどの動的コンテンツは常に再取得されます。

ファイルの更新タイミングを管理する方法

1. クエリストリングを利用したバージョニング


ファイルのURLにクエリストリング（バージョン番号）を付与することで、更新が必要なタイミングでキャッシュを無効化できます。

<link rel="stylesheet" href="/css/style.css?v=2.0">
<script src="/js/script.js?v=3.1"></script>


ファイルを更新した際にバージョン番号を変更すれば、ブラウザは新しいファイルとして認識し、キャッシュを再取得します。

2. ファイル名を変更する


直接ファイル名を変更するのも効果的です。

<link rel="stylesheet" href="/css/style_2024.css">
<script src="/js/script_v3.js"></script>


ファイルが更新されるたびにファイル名を変更すれば、古いキャッシュが使用されることはありません。

3. ETag（Entity Tag）を活用する


ETagはファイルの状態を識別するユニークなタグで、ファイルが更新されると自動的に変更されます。ApacheではデフォルトでETagが有効ですが、以下の設定でカスタマイズできます。

FileETag MTime Size
  • MTime：最終更新日時を基にETagを生成
  • Size：ファイルサイズを基にETagを生成

キャッシュクリアの確認方法


キャッシュの無効化が正しく動作しているか確認するには、ブラウザのデベロッパーツール（F12）で「ネットワーク」タブを開き、該当ファイルが「200 OK」で再取得されているか確認します。
また、以下のコマンドでApacheの設定に問題がないかチェックできます。

apachectl configtest


これにより、キャッシュを必要なタイミングで更新し、不要なキャッシュが残らないように管理できます。

実際の設定例（画像、CSS、JSファイル）

Apacheで静的ファイル（画像、CSS、JavaScriptなど）のキャッシュを設定する具体的な例を紹介します。この設定により、ページの読み込み速度を向上させつつ、必要に応じて柔軟にキャッシュ期間をコントロールできます。

静的ファイルのキャッシュ設定例

.htaccessファイルやhttpd.confに以下の設定を追加することで、ファイルの種類ごとにキャッシュ期間を指定します。

<IfModule mod_expires.c>
    ExpiresActive On

    # 画像ファイルのキャッシュは1ヶ月
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/webp "access plus 1 month"

    # CSSファイルは1週間
    ExpiresByType text/css "access plus 1 week"

    # JavaScriptファイルは1週間
    ExpiresByType application/javascript "access plus 1 week"

    # フォントファイルは6ヶ月
    ExpiresByType font/woff2 "access plus 6 months"
    ExpiresByType font/woff "access plus 6 months"

    # HTMLファイルは即時更新（キャッシュなし）
    ExpiresByType text/html "access plus 0 seconds"
</IfModule>

Cache-Controlを併用した例


さらに、mod_headersを使用して「Cache-Control」ディレクティブを設定します。これにより、キャッシュの動作を細かく制御できます。

<IfModule mod_headers.c>
    # 画像のキャッシュは1ヶ月
    <FilesMatch "\.(jpg|jpeg|png|gif|webp)$">
        Header set Cache-Control "max-age=2592000, public"
    </FilesMatch>

    # CSSとJavaScriptのキャッシュは1週間
    <FilesMatch "\.(css|js)$">
        Header set Cache-Control "max-age=604800, public"
    </FilesMatch>

    # HTMLファイルはキャッシュ無効
    <FilesMatch "\.(html|php)$">
        Header set Cache-Control "no-store, no-cache, must-revalidate"
    </FilesMatch>
</IfModule>

設定例の解説

  • 画像ファイル：変更頻度が低いため、1ヶ月のキャッシュを設定。
  • CSS・JavaScript：比較的変更が多いため、1週間のキャッシュ。更新時にはバージョン管理（クエリストリングやファイル名変更）で対応します。
  • HTML・PHP：リアルタイムで更新される必要があるため、キャッシュ無効を設定。

ファイルごとのバージョニング


頻繁に更新されるCSSやJavaScriptには、クエリストリングやファイル名の変更でキャッシュを管理します。

<link rel="stylesheet" href="/css/style.css?v=2.1">
<script src="/js/script.js?v=3.0"></script>

設定反映の確認


設定が反映されているか確認するには、ブラウザのデベロッパーツールでネットワークタブを開き、各ファイルの「Expires」や「Cache-Control」ヘッダーを確認します。

curl -I https://example.com/css/style.css


このコマンドでレスポンスヘッダーを確認し、Cache-ControlやExpiresが正しく設定されているかをチェックできます。

この設定を適用することで、パフォーマンス向上とキャッシュ管理をバランスよく行うことが可能になります。

まとめ

本記事では、Apacheで静的ファイルのキャッシュを有効化する方法について詳しく解説しました。mod_expiresとmod_headersモジュールを活用することで、画像、CSS、JavaScriptなどのファイルに対して柔軟にキャッシュ期間を設定できます。

キャッシュを適切に管理することで、ページの読み込み速度が向上し、サーバーの負荷軽減や帯域幅の削減といった効果が得られます。一方で、CSSやJavaScriptなどの更新が反映されない問題に対しては、クエリストリングやファイル名変更を活用したバージョニングが有効です。

最後に、設定の反映状況をデベロッパーツールやコマンドで確認し、必要に応じてキャッシュを制御することで、ユーザーエクスペリエンスの向上につなげることができます。Apacheでのキャッシュ管理を適切に行い、快適なウェブサイトを提供しましょう。

Apache
キャッシュ パフォーマンス向上 Apache 静的ファイル

コメント

コメントする

目次