Last updated on

打ち合わせで CDN と言われたとき — ライブラリ CDN とインフラ CDN の切り分け

  • CDN
  • Webフォント
  • WordPress
  • Vite
  • パフォーマンス

打ち合わせで表示速度の話題から CDN が出たが、相手の話がピンと来なかった。自分が知っていたのは Google Fonts や cdnjs 程度で、後から整理すると ライブラリ CDN と インフラ CDN が混ざっていたほか、Xアクセラレータ や キャッシュプラグイン まで話題に出ると、さらにごちゃごちゃした。

本記事は 理解の順序 を固定するためのメモ。速度の結論は Cursor への質問で得た回答の要約であり、よしあき個人のベンチマーク（同一条件で測った計測結果）ではない。

理解の順序（この記事の読み方）

次の順で読むと、打ち合わせの「CDN」がどこに当たるか追いやすい。

  1. 「CDN」を2種類に分ける — まずライブラリかインフラか。ここだけで会話の8割は切り分けられる
  2. 混同しやすい4レイヤー — インフラ CDN・ホスト高速化・WP プラグイン・ライブラリ CDN の違いを一覧で押さえる
  3. インフラ CDN・ホスト高速化・プラグイン — 打ち合わせでピンと来なかった側。用語・契約・エックスサーバー／シンレンタル・検証と本番の違い
  4. ライブラリ CDN — コーダーが載せ方を決めやすい側
  5. 画像 — 両方の論点が混ざるところ
  6. まとめ — 地図と優先順位

関連: Webフォントを自己ホストする手順と理由（フォント手順。CDN の横断整理は本記事）

1. 「CDN」を2種類に分ける

CDN は Content Delivery Network（コンテンツ配信ネットワーク）の略。Web の CSS・JS・画像・HTML などを、訪問者に近い場所から配る 仕組み全般を指す。名前は「配信網」だが、打ち合わせで「CDN」とだけ言われると 載せ方（ライブラリ CDN） と サイト全体の配信（インフラ CDN） が混ざりやすい。

「CDN」だけでは足りない。誰のドメインから何を配る話か を最初に切り分ける。

相手が言いがちなこと該当しうるレイヤー詳細は
「jQuery を CDN から…」「Google Fonts 使ってる？」ライブラリ CDN§4
「Cloudflare 入れてる」「ホストの CDN」インフラ CDN§3
「Xアクセラレータ ON にしてる？」ホスト付属の高速化（インフラ CDN とは別）§3
「キャッシュプラグイン入れましょう」サーバー内キャッシュ（CDN ではない）§3
「画像が重いから CDN」要確認§5

2種類の定義

種類何をするか例URL の見え方
ライブラリ CDNHTML から 別ドメイン の CSS / JS / フォントを読むGoogle Fonts、cdnjshttps://cdnjs.cloudflare.com/...
インフラ CDNDNS を CDN 向けにし、本体は CDN 設定側に登録（§3）Cloudflare、CloudFrontだいたい 自分ドメイン のまま
訪問者
  ↓
[インフラ CDN や ホスト高速化]  ← 手前でキャッシュ・配信
  ↓
オリジン（レンタルサーバー）
  ↑
HTML 内の <script src="https://cdnjs...">  ← ライブラリ CDN（別ドメイン）

ライブラリ CDN とインフラ CDN は独立している。 Cloudflare があっても cdnjs への接続は別。逆に cdnjs をやめても、インフラ CDN の要否は変わらない。

2. 混同しやすい4レイヤー

打ち合わせで「CDN」一言にまとめられがちだが、実際は 別レイヤー として押さえる。

レイヤー何をするか例追加契約だいたい誰が触る
① ライブラリ CDNHTML から別ドメイン URL を読むcdnjs、Google Fonts不要コーダー
② インフラ CDNDNS を CDN 向けにする（§3 の流れ）Cloudflare、CloudFront別アカウント（無料可）先方・インフラ
③ ホスト付属の高速化サーバー側リバースプロキシ等でキャッシュXアクセラレータ不要（ホスト契約内）サーバーパネル・先方
④ WP ページキャッシュ同じサーバー内で HTML をキャッシュWP Super Cache、WP Rocketプラグインのみ運用・先方

覚え方: ① は HTML に書く URL の話。②③④ は 自分ドメインの配信の仕方 の話。②と③はどちらも「速くする」が、Cloudflare は別会社、Xアクセラレータはホスト機能。

3. インフラ CDN・ホスト高速化・プラグイン

打ち合わせでピンと来なかったのは、だいたい ②③④ の側。② を中心に、③④ との違いもここで整理する。

用語: オリジンとエッジ

用語意味たとえ
オリジン元のサーバー（レンタルサーバー）。PHP が動く場所倉庫本体
エッジCDN が置いた 配信拠点。訪問者の近くから返す倉庫に近い店舗

初回はオリジンから取ってエッジに置き、次以降はエッジから返せることがある、というイメージ。

② インフラ CDN（Cloudflare 等）

  • URL は 自分ドメイン のまま（https://example.com/ の見え方は変わらない）
  • Cloudflare 等のアカウント が別途要る（無料プラン可）
  • テーマを直すだけでは始まらない

DNS を CDN 向けにする（② の流れ）

やっていること は次の2か所に分かれる。

訪問者
  ↓
 DNS … example.com を名前解決するとき、CDN 側の IP またはホスト名が返る
  ↓
 CDN（Cloudflare 等） … キャッシュがあれば返す。無ければ本体から取る
  ↓
 本体（オリジン） … レンタルサーバー等。PHP が動く場所
設定する場所内容
ドメインの DNS（レジストラや Route 53 等）訪問者向けに CDN 向け の A レコード・CNAME、またはネームサーバーを Cloudflare 等に変更
CDN の管理画面本体（オリジン） の IP やホスト名を登録。「元データはここから取る」

こうではない: 同じドメインに CDN 用 IP と本体用 IP の A レコードを2本並べる イメージ。訪問者の DNS には 本体 IP を並べず、本体は CDN 設定の内側 に置く。

A レコードだけとは限らない。 Cloudflare では管理画面にオリジン IP を書いて プロキシ ON にすると、訪問者が使うのは Cloudflare 側になる、など製品ごとの細部はある。受託では 「DNS は誰が触るか」「本体は CDN 側に登録済みか」 を確認すれば足りることが多い。

AWS の ELB（ロードバランサー）も「DNS を前段向け + 裏に本体を登録」に 形は似る が、主目的は キャッシュではなく負荷分散。CloudFront の方が CDN（②）に近い。

③ ホスト付属の高速化（Xアクセラレータ）

エックスサーバー と シンレンタルサーバー の両方で使える。追加の CDN 契約は不要（ホスト契約内）。公式では「CDN」とは書かず 「Webサイトを高速・安定化させる機能」。

  • サーバーパネルから ドメイン単位 で ON
  • Ver.1: 静的ファイルのキャッシュ
  • Ver.2: 上記 + PHP の高速化
  • 内部は リバースプロキシ でキャッシュ（静的は保存 5分 等。詳細は 公式マニュアル）

② Cloudflare との違い: ② は DNS を CDN 向けに変える（上記）。③ Xアクセラレータは DNS は触らず、同じホストのパネルで ON にする。契約も設定場所も別。

受託の注意: Basic 認証や IP 制限を .htaccess でしていると、キャッシュの挙動に影響しうる（マニュアルに注意あり）。検証環境では OFF のまま のことも多い。

同系統で サーバーキャッシュ設定・ブラウザキャッシュ設定 もパネルにある（Xアクセラレータとは別機能）。

検証環境（シンレンタル等）と本番の違い

よしあきの受託 検証環境（シンレンタル上のサブドメイン + FTP デプロイ）では、②③ が本番と同じとは限らない。打ち合わせの「CDN」が どの環境の話か も切り分ける。

項目検証環境（よくある状態）本番（先方環境）
② Cloudflare 等入っていない ことが多い先方・ホストで ON のことがある
③ XアクセラレータOFF のまま、または Basic 認証と併用を避けるパネルで ON のことがある
Basic 認証docroot に .htaccess で閉じる（WP 案件は Actions で FTP）本番では通常なし
④ ページキャッシュ入れない・最小限のことが多い運用で入ることがある
① ライブラリ CDNコーダーが載せ方を決める点は 本番と同じ同左

Basic 認証と ③ の関係: Xアクセラレータは リバースプロキシにキャッシュ する。.htaccess で IP 制限や Basic 認証をしていると、意図しないキャッシュ や 制限のすり抜け の注意が 公式マニュアル にある。検証 URL を Basic で閉じているなら、③ を ON にしない 判断が無難なことが多い。

打ち合わせの落とし穴: 「CDN 入れましょう」が 本番の ②③ の話なのに、手元の検証 URL の表示速度と混同しやすい。検証は ①（載せ方）と容量最適化 を直し、②③ は本番のインフラ確認 として聞く。

④ WordPress プラグイン — CDN そのものではない

種類例実際
インフラ CDN 連携Cloudflare 公式、WP Rocket の Cloudflare 連携すでに有効な CDN の purge 等。CDN を新規に有効化する本体ではない ことが多い
ページキャッシュWP Super Cache、W3 Total Cache、WP Rocketオリジン（同じサーバー） 内の HTML キャッシュ。②③ とは別物
画像だけShortPixel、Imagify 等圧縮や 画像 URL だけ 外部配信

「CDN プラグイン入れましょう」→ ② 全体 CDN / ③ ホスト高速化 / ④ サーバー内キャッシュ / 画像だけ のどれかを確認する。

追加契約が要るか

方法レンタルサーバー以外の契約
③ Xアクセラレータ不要
② Cloudflare 無料アカウントは別、有料契約は不要
② CloudFront 等別請求 になりやすい
④ ページキャッシュプラグインプラグインのみ。CDN 契約ではない

誰が決めるか・効きやすい条件

先方・ホスト契約・インフラ が主。コーダー単独では決まらないことが多い。

効きやすい効きにくい
画像、CSS / JS（ハッシュ付き）WP の動的ページ
キャッシュ可能な静的 HTMLログイン後・管理画面
更新頻度が低いアセットフォーム、在庫・会員系

ファイルが重いまま載せても転送量は減らない。 圧縮・WebP が先。

打ち合わせで聞き返すとよいこと

  • 本番に Cloudflare（②） や Xアクセラレータ（③） は入っているか
  • 入っているのは ② と ③ のどちら（または両方） か
  • デプロイ後の キャッシュ purge は誰がやるか
  • 「CDN プラグイン」は ④ ページキャッシュ の話ではないか
  • 「CDN を入れる」= ① ライブラリ CDN（cdnjs 等）をやめる 意味ではない
  • 話しているのは 検証環境か本番か（上記）

4. ライブラリ CDN

コーダーが HTML や enqueue で 外部 URL を直書きする話。① に当たる。

共通の整理

観点整理
「CDN だから速い」「ほかのサイトで取った分が効く」は いまは当てにしにくい（下記）
接続先サードパーティを足すほど DNS・TLS・接続が増える
プライバシー外部ドメインへのアクセスは 法務確認が入りやすい。要否は案件ごと
速くしたいとき載せない → 容量を絞る → 同一オリジンから の順が再現性が高い

他サイトのキャッシュは期待できるか

昔よく聞く説明:

  • jQuery や Google Fonts は 同じ CDN URL で読んでいる
  • 訪問者が 別サイトで取っていれば 再ダウンロード不要

以前 は URL が同じならブラウザキャッシュを 共有し得た（条件は多い）。現在 は キャッシュパーティション により サイトごと に分かれる。code.jquery.com でも A サイト経由の分は B サイトでは使われない。

※ ②③ のキャッシュ は自分サイト内の話で、他サイトとの共有とは別。

資産ごとの目安

資産よくある CDNよしあきのテンプレ既定メモ
フォントGoogle FontsWOFF2 自己ホスト別記事
jQuery（WP）code.jquery.com 等WP コア同梱Migrate・プラグイン互換に注意
Splide 等cdnjs / unpkgnpm → Vite で bundlecdnjs は例外
画像（テーマ）画像 CDN URL 直書きビルド or テーマ assets圧縮・WebP が先

Web フォント（Google Fonts）

きちんと絞った自己ホストの方が、最適化されていない Google Fonts より有利になりやすい、という整理（AI 回答の要約）。fonts.googleapis.com → fonts.gstatic.com と 接続先が増える。手順は 別記事。

jQuery（WordPress）

同一オリジンの /wp-includes/js/jquery/ の方が 追加接続が増えない ぶん有利になりやすい。CDN 差し替え単体での LCP 改善は期待小。

Splide

npm で入れ bundle する。cdnjs は例外（バージョン固定・SRI・接続先を確認）。

5. 画像

①②③④ すべての論点が混ざりやすい ところ。

話題レイヤー整理
「画像が重い」どれでもない圧縮・WebP が先。CDN 以前の問題
テーマ画像を CDN URL 直書き① に近いビルド出力に乗せる方が再現しやすい
投稿メディアを Cloudflare 配信②インフラ CDN
Xアクセラレータで静的キャッシュ③ホスト高速化
最適化プラグイン④ または画像だけプラグイン依存

6. まとめ

理解の地図

打ち合わせで「CDN」
  ├─ ① ライブラリ CDN … cdnjs 等（HTML の別ドメイン URL）→ コーダー
  └─ 自分ドメインの配信
       ├─ ② インフラ CDN … Cloudflare 等（別アカウント）
       ├─ ③ ホスト高速化 … Xアクセラレータ等（契約内・パネル ON）
       └─ ④ WP ページキャッシュ … プラグイン（CDN ではない）

優先順位（速度）

  1. どのレイヤーの話か 確認する
  2. 容量を軽くする（画像・フォント）
  3. ① は同梱・自己ホスト（コーダー側）
  4. ②③ は先方環境 を確認。検証（シンレンタル + Basic）と本番は別 — 検証で CDN が効いていなくても本番の話と混同しない

フォント手順: 2026-04-29b