Web制作コラム

CDNとは|なぜ速くなるのか、入れると何に気をつけるか

用語・技術解説

画像やCSSを訪問者の近くから配る仕組みです。効く場面と、入れたあとに起きがちな混乱をまとめます。

CDN とは、サイトのファイルを各地のサーバーに置いておき、訪問者から近い場所から配る仕組みです。Content Delivery Network の略です。

なぜ速くなるのか

  • 距離が短くなる … 遠くのサーバーまで往復しなくて済みます
  • 本体のサーバーが楽になる … 画像やCSSの配信を任せられます
  • アクセスが集中しても耐える … 多くの要求をCDN側で処理します

国内向けのサイトで、国内のサーバーを使っている場合、距離による効果は小さいです。それよりも、サーバーの負荷を下げる効果と、画像を自動で軽くしてくれる機能のほうが実益があります。

入れると効くサイト

  • 画像が多いサイト
  • アクセスが一時的に集中するサイト(メディア掲載、キャンペーン)
  • 海外からも見られるサイト
  • 共用サーバーで、表示が重くなりがちなサイト

主なサービスの比較

どれを選ぶかは、いまサイトがどこに載っているかでほぼ決まります。CDN だけを独立して選ぶより、サーバーと同じ事業者にそろえたほうが設定も請求も1つで済みます。

サービス向いている規模導入のしかた特徴
Cloudflare小〜大ネームサーバーを預ける無料プランがある。キャッシュ・防御・DNS をまとめて持てる。管理画面だけで設定が完結する
Amazon CloudFront中〜大AWS 側で設定S3 や EC2 と組み合わせる前提。細かく制御できるが設定項目は多い
Google Cloud CDN中〜大GCP 側で設定GCP に載せている場合の第一候補。単体で使うことは少ない
Fastly中〜大設定を自分で書く反映とキャッシュ削除が速く、条件分岐を自分で書ける。メディア系で採用例が多い
Akamai問い合わせて契約歴史が長く拠点数が多い。大規模・企業向けで、価格帯も上がる
さくらのウェブアクセラレータ小〜中さくらの管理画面国内向けで安価。さくらのサーバーと組み合わせやすい
bunny.net / KeyCDN小〜中管理画面でオリジンを指定従量課金で安い。機能は絞られているが、画像配信だけなら十分

※ 横にスクロールできます

料金と提供される機能はどのサービスも頻繁に変わります。金額は必ず公式の料金ページで確認してください。無料プランには、帯域や用途(動画の大量配信など)に条件が付いていることがあります。

WordPressのサイトで選ぶとき

  • まずレンタルサーバーの契約内容を見る … CDN やサーバー側キャッシュの機能が最初から付いていることがあり、追加契約が要りません
  • 効果を見てから決めたい … Cloudflare の無料プランで始めるのが手軽です
  • AWS や GCP に載っている … 同じ事業者のものを使います。設定も請求もまとまります
  • 画像だけ軽くしたい … CDN を入れるより、画像専用の配信機能や WebP 化のほうが手間が小さく済みます

Cloudflare を使う場合、ネームサーバーを Cloudflare に移すことになります。このときメールの設定(MXレコードなど)も一緒に移し替えないと、切り替えた瞬間にメールが届かなくなります。移行前に、いまのDNSの設定をすべて書き出しておいてください。

入れたあとに起きる混乱

直したのに変わらない

いちばん多い相談です。CDN側に古いファイルが残っていると、サーバーのファイルを直しても表示は変わりません。更新したらCDNのキャッシュを削除する、という手順を決めておいてください。

キャッシュの段は何層にもなります。ブラウザ、WordPressのキャッシュプラグイン、サーバーのキャッシュ、CDN。手前から順に消していくと切り分けられます。

管理画面やフォームがおかしくなる

ログイン後のページや、フォームの送信結果までキャッシュされると、別の人の画面が見えたり、送信できなくなったりします。管理画面とフォームのURLはキャッシュの対象から外してください。

アクセス解析の数字が変わる

サーバー側でアクセス元を記録している仕組みだと、訪問者のIPではなくCDNのIPが記録されることがあります。設定で元のIPを渡すようにします。

正常な操作が弾かれる

CDNに付属する防御機能が、管理画面の操作やファイルのアップロードを攻撃と判断して止めることがあります。必要な操作が通らない場合は、この設定を見直します。

入れる前にやることがある

重い原因が画像の大きさやプラグインの多さである場合、CDN を入れても体感はあまり変わりません。まず画像を適切なサイズにして、使っていないプラグインを削除してください。それでも足りないときに検討する、という順番が無駄がありません。

当社では、構築時点で画像と読み込みを整えたうえでお渡ししています。いまのサイトで何が重いのかを調べてほしいというご相談も承っています。

「用語・技術解説」のコラム

この記事と同じカテゴリの記事です。

一覧に戻る

SERVICES

WordPressとECサイトの制作、
まとめてご相談いただけます

WordPress

WordPress制作・構築代行

デザインデータやコーディング済みHTMLを、オリジナルテーマとして構築します。プラグイン開発も対応。

構築基本費用 50,000円

詳しく見る
コーディング

コーディング代行

デザインデータをHTML/CSSに起こします。WordPress化まで通しでも、コーディングだけでも承ります。

1ページ 15,000円〜

詳しく見る
React

Reactコーディング代行

デザインデータをReactのコンポーネントとして実装します。既存アプリへの画面追加・UI改修だけでも承ります。

1ページ 18,000円〜

詳しく見る
Next.js

Next.js制作・コーディング代行

検索エンジンに読まれるHTMLを返せるNext.jsで構築します。静的書き出しでレンタルサーバーでも公開できます。

1ページ 18,000円〜

詳しく見る
EC / WordPress

WelcartでのECサイト構築

WordPress専用のネットショップ構築プラグイン。機能面まで踏み込んだカスタマイズができます。

デザイン制作+構築 一式 120万円〜

詳しく見る
EC / EC-CUBE

EC-CUBEでのECサイト構築

国産オープンソースのECパッケージ。決済・受注・在庫まわりを業務に合わせて作り込めます。

デザイン制作+構築 一式 120万円〜

詳しく見る
EC / ASPカート

ECサイト制作代行

Shopify・MakeShop・カラーミーなどのカートに、オリジナルデザインを組み込みます。

構築基本費用 100,000円

詳しく見る

制作のご相談も承っています

デザインデータと画面数をお知らせいただければ、お見積りと納期をご提示します。