静的なコンテンツをキャッシュさせる方法
静的なコンテンツをキャッシュさせるための方法は以下の通りです。これらの方法を組み合わせることで、ウェブページの読み込み速度を効果的に向上させることができます。
1. HTTPキャッシュヘッダーの設定
Cache-Control
Cache-Control ヘッダーは、ブラウザや中間キャッシュに対してどのようにキャッシュを行うべきかを指示します。以下はその例です：
- public: 任意のキャッシュがレスポンスをキャッシュできることを示します。
- private: 特定のユーザーのためのものであり、共有キャッシュ（例：CDN）ではキャッシュしないことを示します。
- max-age: キャッシュの有効期間を秒単位で指定します。
Cache-Control: public, max-age=31536000
Expires
Expires ヘッダーは、レスポンスが有効である期限日時を指定します。Cache-Control と組み合わせて使用できます。
Expires: Sat, 13 Jul 2025 00:00:00 GMT
2. ETag（エンティティタグ）
ETag は、リソースのバージョンを示すための識別子です。クライアントは次回のリクエストで If-None-Match ヘッダーを使用し、サーバーはリソースが変更されていない場合に 304 Not Modified を返します。
ETag: “abcd1234"
3. ファイル名にバージョンを付与
静的ファイルの名前にバージョン番号やハッシュを含めることで、ファイルの変更時にキャッシュが更新されるようにします。
<link rel=“stylesheet" href=“style_v2.css"> <script src=“app_1234.js"></script>
4. コンテンツデリバリーネットワーク（CDN）の利用
CDNは、静的コンテンツを地理的に分散されたサーバーにキャッシュし、ユーザーの最寄りのサーバーからコンテンツを提供します。これにより、データの転送距離が短縮され、読み込み速度が向上します。
5. サーバーの設定
Apache
Apacheサーバーでは、.htaccess ファイルやサーバーの設定ファイルでキャッシュを設定できます。
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access plus 1 year"
ExpiresByType image/jpeg “access plus 1 year"
ExpiresByType image/gif “access plus 1 year"
ExpiresByType image/png “access plus 1 year"
ExpiresByType text/css “access plus 1 month"
ExpiresByType application/javascript “access plus 1 month"
</IfModule>
Nginx
Nginxサーバーでは、設定ファイルでキャッシュを設定できます。
location ~* \.(jpg|jpeg|gif|png|css|js)$ {
expires 1y;
add_header Cache-Control “public";
}
6. HTMLの <meta> タグの使用
HTMLドキュメント内で <meta> タグを使用してキャッシュを制御することもできます。ただし、これは一般的には他の方法ほど強力ではありません。
<meta http-equiv=“Cache-Control" content=“public, max-age=31536000">
まとめ
静的コンテンツをキャッシュさせることで、ウェブサイトの読み込み速度を大幅に向上させることができます。上記の方法を組み合わせて使用することで、効果的なキャッシュ戦略を実現できます。