キャッシュの概要
キャッシュは、Webサイトのデータを一時的に保存し、ユーザーが再訪問した際にページの読み込み速度を向上させる技術です。これにより、サーバーへのリクエストを減少させ、データ転送量を抑えることができるため、全体的なユーザー体験が改善されます。また、キャッシュはSEOにも寄与するため、Webサイトのパフォーマンス向上には欠かせない要素です。
キャッシュの種類と特徴
キャッシュには、主にブラウザキャッシュ、サーバーキャッシュ、CDN（コンテンツ・デリバリー・ネットワーク）キャッシュの3つの種類があります。
ブラウザキャッシュ
ユーザーが初回訪問時に取得したサイトのデータ（画像、CSS、JavaScriptファイルなど）を、ユーザーのデバイス（PCやスマートフォン）のローカルストレージに一時的に保存します。これにより、同じサイトを再訪問する際には、サーバーから再度データを取得する必要がなく、保存されたキャッシュデータを直接読み込むことで、ページの表示速度が大幅に向上します。
サーバーキャッシュ
サイトのデータを読み込みの速い領域に一時的にキャッシュし、次回以降のアクセス時にそのキャッシュされたデータをそのまま読み込む仕組みです。これにより、サーバーが負荷の高い処理を繰り返す必要がなくなり、結果として応答速度が向上します。
CDNキャッシュ
地理的に分散したサーバーを通じて、ユーザーの最寄りのサーバーからキャッシュとしたコンテンツを提供することで、応答時間を短縮します。これにより、トラフィックが多いサイトでも安定したパフォーマンスを提供できます。
キャッシュの設定方法
ここではブラウザキャッシュを残す設定方法（以下1，2）とCDNを利用する方法（以下3）の3種類について紹介します。
1. HTTPヘッダーによるキャッシュ設定
3,600秒（1時間）保持する設定：
Cache-Control: max-age=3600
2. Apacheサーバーの設定
.htaccessファイルを使用した画像ファイルのキャッシュを1か月間保持する設定：
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
</IfModule>
3. CDNの設定
CDNを使用する場合、ダッシュボードでキャッシュの期間を設定できます。
ちなみに、無料、有料プランが用意されており、例えばCloudflareというCDNでは基本プランは無料ですが、有料プランはプランに応じて月額20ドルから500ドル程度までとなっています。（2024年10月現在）
キャッシュの設定確認方法
「PageSpeed Insights」で確認
「PageSpeed Insights」で確認したいURLを入力します。
キャッシュの設定が正しく行われていない場合は、
「静的なアセットと効率的なキャッシュ ポリシーの配信 -◯◯ 件のリソースが見つかりました」と表示され個別に現在の状況を表示してくれます。
Chromeで確認
Chromeブラウザを開き、調べたいウェブページにアクセスします。
右クリックして「検証」またはキーボードの Ctrl + Shift + I（Windows）または Cmd + Option + I（Mac）を押して開発者ツールを開きます。
開発者ツールが開いたら、上部のメニューから「Network」タブをクリックします。
ネットワークの情報が表示されていない場合、ページをリロードする必要があります。
「Network」タブに表示されるリソース一覧の中から、確認したいリソース（例: 画像、CSS、JavaScriptなど）を選択し、「ヘッダー」を選択します。
「Cache-Control:」に「max-age=3600」とキャッシュ保存期間がありここで確認することができます。
3600は秒数を表しており、3600秒（1時間）
キャッシュのメリット
キャッシュの主なメリットは、ページの読み込み速度を向上させることです。これにより、ユーザーはストレスなくコンテンツにアクセスでき、利便性が高まります。また、サーバーへのリクエスト数が減少するため、サーバーの負荷が軽減され、従量制課金のサーバーの場合、運用コストの削減にもつながります。さらに、表示速度の向上はSEOにも貢献し、検索エンジンでのランキングが向上する可能性があります。
結果的に、キャッシュの利用はWebサイト全体のパフォーマンス向上につながります。
キャッシュのデメリット
キャッシュにはいくつかのデメリットがあります。第一に、キャッシュが古い情報を保持することで、ユーザーに最新のコンテンツが表示されないリスクがあります。つまり、Webページを新しく更新したにも関わらず、更新前の古いコンテンツを事象が起こりえます。第二に、キャッシュの設定が複雑で、設定にミスがあった場合、不具合を引き起こすことがあります。
まとめ
キャッシュは、Webサイトのパフォーマンス向上に不可欠な技術です。ブラウザキャッシュ、サーバーキャッシュ、CDNキャッシュなどの手法を理解し、正しく設定することで、ユーザー体験やSEOにおいて多くのメリットを享受できます。しかし、古い情報の表示や管理の複雑さといったデメリットにも注意が必要です。適切にキャッシュ管理を行い、効果的に活用していくことが重要です。
