MENU
ブログ記事

CDNでサイトを高速化！設定を確認し、効果を最大限に引き出す方法

admin
目次

CDNとは？

CDN（コンテンツ・デリバリー・ネットワーク）は、Webサイトのコンテンツを効率よく配信するためのネットワークです。最近では、動画や画像など大きなデータを使ったコンテンツが増え、インターネットを利用する人も増加しているため、Webページの表示やコンテンツのダウンロードに時間がかかることが多くなっています。

CDNを使うと、こうしたコンテンツの表示や配信が速くなり、ユーザーはより快適にWebサイトを利用できるようになります。

例えば、大きなファイルを配信する必要がある場合、または広告やキャンペーンでたくさんの人が一度にアクセスすることが予想される場合は、CDNを利用すると効果的です。

CDNのメリット

高速で快適なウェブ体験を提供

ユーザーに近いサーバーからコンテンツが配信されるため、ウェブページの読み込みが速く・安定して提供できるようになります。これにより、ユーザーはストレスなく快適にウェブサイトを利用できます。

サーバー負荷を分散し、安定性を確保

トラフィックが複数のサーバーに分散されるため、オリジンサーバーへの負荷が軽減されます。これにより、サーバーダウンのリスクが大幅に減少し、常に安定したサービスを提供できます。

CDNのデメリット

コンテンツの変更が反映されない

値段などの情報を変更しても、キャッシュサーバーに以前のコンテンツが保持されていると、オリジンサーバーの変更後も古いコンテンツが提供されてしまうことがあります。この問題は、キャッシュの保存期間を適切に設定したり、手動でキャッシュを削除することで対応できます。

個人情報などの漏洩リスク

動的コンテンツやパーソナライズドコンテンツ（個人情報やユーザーごとに異なるコンテンツ）がキャッシュされると、他のユーザーにその情報が提供されてしまう可能性があります。このリスクを防止するために、キャッシュを保持しないファイルを除外設定し、定期的にキャッシュ設定を確認することが重要です。

CDNの費用

レンタルサーバー契約時に無料で提供されるCDNもありますが、通常は従量制が一般的です。これは、使用するトラフィック量に応じて料金が発生する仕組みです。

無料で提供されるCDNには、PV（ページビュー）や帯域幅の制限などがあります。これにより、一定以上のアクセスが発生すると追加料金がかかる、またはサービスの提供が制限されることがあります。

例えば、このブログでも使用しているIDCFが提供するCDNの料金表は以下のリンクから確認できます。
https://www.idcf.jp/cloud/cache/

料金はもちろん重要ですが、各CDNプロバイダーのキャッシュサーバーの位置や規模、設定のしやすさも考慮する必要があります。サポート窓口の対応やFAQの充実度など、自社のビジネスやニーズに合ったプロバイダーを選ぶことで、CDNのメリットを最大限に活用することができます。

キャッシュの確認方法

キャッシュは頻繁にアクセスされるコンテンツを保存し、再アクセス時に迅速に提供する機能です。キャッシュが正しく機能しているかを確認するには、ブラウザの開発者ツール（デベロッパーツール）を使用します。

Google Chromeの例

  1. 右上の3点リーダーアイコン（⋮）をクリックします。
  2. [その他のツール]を選択します。
  3. [デベロッパーツール]をクリックします。
Chromeで設定メニューから「その他のツール」→「デベロッパー ツール」をクリックしている
  1. ネットワークタブを開く
    • デベロッパーツールの中で「ネットワーク」タブをクリックします。
  2. ページをリロードする
    • ネットワークタブを開いた状態で、ページを再度リロードします。これにより、ページに関連するすべてのリクエストが記録されます。
  3. ファイルを選択する
    • 表示されるリストから、ページを表示しているファイル（例えばHTML、CSS、JavaScriptファイルなど）を選択します。
  4. レスポンスヘッダーの確認する
    • 選択したファイルの詳細が表示される右側のペインで「ヘッダー」セクションを見ます。
    • その中のレスポンスヘッダーに「X-Cache」という項目があります。
  5. Cacheの値を確認する
    • HIT: キャッシュに保存されていることを示します。
    • MISS: キャッシュに保存されていないことを示します。

以下の画像は、X-Cacheの値がHITになっているのでキャッシュが正常に利用されていることを示しています。

これにより、キャッシュが正常に機能していることを確認できます。

各CDNのキャッシュヘッダーの違い

キャッシュヒットの状況を確認することで、CDNが正しく機能しているかを評価できます。以下は主要なCDNプロバイダーでレスポンスヘッダーの値が異なります。

Cloudflareの場合

以下の記述は、cf-cache-status がHITしていることから、キャッシュからデータを返したことを示しています。

cf-cache-status: HIT

Fastlyの場合

以下の記述は、最初はキャッシュにデータがなくて取得し、次のリクエストではキャッシュからデータを返したことを示しています。

X-Cache: MISS, HIT

AWS CloudFrontの場合

AWSのコンテンツ配信ネットワークであるCloudFrontからデータを返したことを示しています。

X-Cache: Hit from cloudfront

CDNの効果を最大限活用する方法

デフォルトの初期設定では、キャッシュに保存される時間が短いファイルがあります。しかし、変更頻度が低いファイルに対しては、キャッシュ有効期限（TTL）を長く設定することで、キャッシュのヒット率を向上させることができます。例えば、静的な画像ファイルやCSSファイル、JavaScriptファイルなどが該当します。

変更頻度が低いファイルには、キャッシュ有効期限を1週間（604,800秒）や1ヶ月（2,592,000秒）に設定することを検討してください。これにより、ファイルがキャッシュされる期間が長くなり、サーバーへのリクエストを減らすことができます。

動的コンテンツのキャッシュ管理

動的コンテンツは、頻繁に変更が行われるため、キャッシュ管理が難しい場合があります。動的コンテンツとは、ユーザーごとに異なる情報を提供するコンテンツのことです。例えば、会員情報やログインページ、フォームなどが該当します。

動的コンテンツを適切にキャッシュ管理しないと、セキュリティ上の問題が発生する可能性があります。例えば、キャッシュされた会員情報が他のユーザーに表示されてしまうと、個人情報が漏洩する危険があります。これを防ぐために、以下の方法で動的コンテンツをキャッシュから除外することが重要です。

動的コンテンツの注意点
  • ログインユーザーのセッションが共有される
    • ログインユーザーのダッシュボードやプロフィールページが他のユーザーにも表示されてしまうことがあります。
  • 更新されたコンテンツが反映されない
    • CSSやJavaScriptの変更が反映されず、ユーザーが古いバージョンのページを表示することがあります。これにより、最新の機能やデザインが反映されず、ユーザー体験が損なわれます。
  • ショッピングカートが正しく機能しない
    • キャッシュが原因でショッピングカートの内容が更新されない、または他のユーザーのカートが表示されることがあります。これにより、購入プロセスが混乱し、売上が減少する可能性があります。
  • 管理ページの不正キャッシュ
    • 管理ページ（例：WordPressダッシュボード）がキャッシュされると、管理者が古い情報を基にサイトの管理作業を行ってしまうことがあります。

キャッシュ除外設定

基本的にはCDNプロバイダーによって設定方法が異なります。各CDNの設定方法を御覧いただき、「Cache-Control: no-store」や「Vary: Cookie」を指定して、個別のユーザーデータをキャッシュしないように設定します。

  • no-storeの説明
    • 「Cache-Control: no-store」は、HTTPヘッダーの一つで、ブラウザやCDNにリソースをキャッシュしないよう指示します。これにより、常に最新の情報が提供され、セキュリティが重要なデータやユーザー固有のデータに有効です。
  • Varyの説明
    • 「Vary」ヘッダーは、特定のヘッダー値に基づいてキャッシュを分けるために使用されます。「Vary: Cookie」を指定すると、クッキーの値に応じて異なるリソースがキャッシュされ、ユーザー固有のコンテンツが適切に配信されます。

まとめ

CDNを効果的に活用することで、サイトのパフォーマンスを大幅に向上させることができます。設定が完了しただけでは、キャッシュの効果が実感できるわけではありません。ポリシーの最適化や、除外設定など活用して、ページの速度の改善やサーバー負荷の軽減にお役立てください。

関連記事
こちらの記事もどうぞ
記事URLをコピーしました