コンテンツデリバリネットワーク（CDN）は、ウェブサイトの高速化に欠かせない要素の1つです。CDNは、サーバーの負荷を軽減し、サイト訪問者へのコンテンツの配信速度を上げてくれます。この結果、ユーザー体験からSEOまで、すべてを向上することができます。CDNについて理解するには、まずWordPress CDNを使ってみましょう。
この記事では、WordPressサイトにCDNを導入する簡単な方法をご紹介します。
その前に、CDNの基本的な定義、CDNを使用すべき理由、使用するメリットについても触れていきます。また、スピードテストの結果をみながら、どの程度のパフォーマンス向上を期待できるかもご説明していきます。
WordPress CDNとは
CDNとは、コンテンツデリバリネットワークの略であり、世界中に設置されたサーバーのネットワーク（別名：POP）です。画像、CSS、JavaScript、動画配信など、WordPressサイトの静的・動的なコンテンツのコピーを取得して、配信します。
CDNの仕組み
まず始めに、CDNとWordPressに特化したサーバーを混同しないように気をつけましょう。この2つは、全く別物になります。CDNは、サーバーではなく、サイトの速度を上げるために導入することができるネットワークです。Kinstaのサーバーは非常に高速ですが、CDNを使えば、さらなる高速化を実現することが可能です。
では、具体的にCDNはどのように機能するのでしょうか。例えば、Kinstaでサイトを運営する場合は、米国、ヨーロッパ、南米、アジアなどの地域の中から、データセンターの所在地を選ぶことになります。例えば、「アイオワ州カウンシルブラフス、米国」を選択したとします。
これは、サイトが物理的にアイオワ州カウンシルブラフのサーバーに置かれることを意味します。そのため、ヨーロッパからサイトにアクセスする場合は、テキサス州ダラスからアクセスするよりも読み込みに時間がかかります。これは、データをより遠くまで転送する必要があるためです。
これは、レイテンシと呼ばれ、ネットワーク上でのデータ伝送に伴う時間や遅延を指します。距離が遠くなればなるほど、レイテンシは大きくなります。
そこで活躍するのがCDNです。CDNを使用すれば、訪問者の近くにあるサーバーからサイトのコンテンツを読み込むことが可能になり、レイテンシを減らすことができます。このCDNサーバーは、POP（Point of presence）とも呼ばれます。
WordPressユーザーの中には、コンテンツデリバリネットワークは複雑そうと敬遠してしまう方もいます。ですが、CDNは意外とシンプルです。これから、CDNの仕組みとその実装方法を簡単な3つのステップでご紹介していきます。
ステップ1
Kinsta CDNのような無料CDNを提供するサーバーを利用するか、別途CDNプロバイダを利用してください。サードパーティのCDNプロバイダは、多くの場合、データ使用量に応じて無料プランと有料プランを提供しています。
ステップ2
サイト上でCDNを有効化します。Kinsta CDNの場合は、MyKinstaでボタンをクリックするだけで完了です。サードパーティCDNの場合は、CDN EnablerやWP Rocketなどの無料プラグインを使用してインストールします。
プラグインが自動でアセットをCDNにリンクしてくれるため、コンテンツを登録するなどの作業は不要です。CDNの導入は、以前と比べて非常に簡単になっています。
ステップ3
ユーザーがサイトを訪問すると、コンテンツは世界中に設置されたサーバーから読み込まれます。ヨーロッパの訪問者は、ヨーロッパのサーバーから、アメリカの訪問者は、最寄りのアメリカのサーバーからコンテンツを受信します。
CDNの仕組み
通常、CDNには、ユーザーを正しい場所にルーティングするため、エニーキャストとジオロケーションルーティングの2つの技術が使われています。CDNは、ユーザーのリクエストがどこから来ているかを自動的に検出し、ユーザーから最も近いサーバーにルーティングします。
しかし、WordPress用サーバーのために、戦略的にサーバーの位置を選ぶことも重要です。CDNがメディアやコンテンツの配信をサポートしてくれるとはいえ、プロキシサーバーでフルページキャッシュを行わない限り、サイトの読み込み時にはサーバーに対してリクエストが必要になるためです。
現在Kinstaでは、37カ所のデータセンターが利用可能です。
CDNのメリット
WordPressサイトへのCDNの導入には、さまざまなメリットがあります。
1. パフォーマンスの向上
パフォーマンスの向上は、CDNを使用する最大のメリットの1つです。サイトの読み込みが速いほど、コンバージョン率が高く、直帰率が下がり、訪問者の平均滞在時間が長くなることが繰り返し証明されています。総合的なユーザー体験を向上させることが可能です。
サイトの読み込みが遅く、サイトを離れてしまった経験があるはずです。サイトの運営側からすれば、これは何よりも避けたいことです。サイトパフォーマンスの重要性について、業界を代表する面々が発表している統計データをみてみましょう。
- ページの表示が1秒遅れると、コンバージョン率が7％減少する（出典: Kissmetrics）
- BBC調べでは、サイトの読み込みに1秒かかるごとに10％のユーザーがサイトを離れる（出典: Creative Bloq）
- 読み込み時間が1秒遅れるごとに、コンバージョン率は20％も低下する（出典: ThinkWithGoogle）
- Pinterestでは、ページの読み込み時間を約40%短縮すると、会員登録が15%増加した（出典: Pinterest Engineering on Medium）
WordPressサイトのパフォーマンス向上に貢献するCDNの特長は、いくつかあります。
TTFBの削減
WordPress CDNは、データの転送に必要な物理的距離を縮めることで、レイテンシの低減に役立つことは既に触れましたが、CDNは、TTFB（Time To First Byte）も短縮してくれます。
TTFBとは、ブラウザがサーバーから最初の1バイトのデータを受け取るまでの時間です。データの取得に時間がかかればかかるほど、ページの表示に時間がかかることになります。
よくある誤解に、TTFBはDNSルックアップの後から計算されるというものがあります。ネットワーク上におけるTTFBの本来の計算方法では、ネットワークのレイテンシが算入されます。また、この計算は3段階のステップを伴い、遅延やレイテンシはその間常に発生する可能性があります。
TTFBが伸びる原因には、低品質のコードやサーバーでの誤ったキャッシュ設定など、さまざまな理由が考えられますが、地理的な距離も1つの懸念材料です。
ここで、2つのテストを実施し、Cloudflare提供のKinsta CDNを使用した場合と、使用しない場合のTTFBの違いをみてみましょう。各テストを5回ずつ行い、その平均値を出します。
テスト1. CDN未使用時のTTFB
Kinsta CDNを無効にした状態でPingdomのテストを実行した結果は、以下のとおりです。
- 合計読み込み時間：1.45秒
- 平均TTFB：約136ミリ秒
テスト2. CDN使用時のTTFB
次に、Kinsta CDNを有効にして、再度テストを行いました。
- 合計読み込み時間：788ミリ秒に減少
- 平均TTFB：37ミリ秒に改善
CDNの使用時と未使用時で、大きな差がでました。
尚、物理的な距離を縮めることで得られる実際の改善効果を示すため、ストックホルムのサーバーを使用してテストしています。ストックホルムには、CDNのPOPがあり、コンテンツはストックホルムから配信されていることになります。
キャッシュによる配信の高速化
ファイルを高速で配信できる理由の1つとして、WordPress用サーバーやプラグインでキャッシュを使用するのと同じように、CDNもキャッシュを使用しています。
注意）CDNがメディアのコピーを取得する際、キャッシュを有効にするには、1度か2度、訪問者からのリクエストが必要になります。リクエストには、HTTPヘッダ「X-Cache」が設定され、キャッシュされているかどうかを示します。通常、初回（または2回目）のリクエストでは、ファイルにはキャッシュされていないことを意味する「MISS」が表示されます。
2回目以降のリクエストで、「HIT」と表示されると、CDNにキャッシュされている状態になります。ファイルは、ETagヘッダ、expiresヘッダ、CDNキャッシュの手動パージなどに基づきキャッシュされたままになります。
Cloudflare提供のKinsta CDNなどのCDNを使用すると、フルページ、リバースプロキシを利用して、キャッシュの設定を次のレベルに引き上げることができます。例えば、セカンダリドメインではなく、1つのプライマリURLですべてをキャッシュすることが可能になります。
gzip圧縮で通信量を大幅に節約
WordPress CDNは、ファイルの圧縮と解凍に使用されるファイル形式、そしてソフトウェアアプリケーションであるgzipを採用しています。gzip圧縮はサーバー側（もしくはCDNサーバー／POP上）で有効になり、HTML、スタイルシート、JavaScriptのファイルサイズを縮小することができます。
画像については、すでに別の方法で圧縮されているため対象外です。gzip圧縮のおかげで、最大70%の通信量を削減した事例もあり、最も手軽な最適化の1つです。評価の高いCDNプロバイダを利用すれば、この機能は通常、デフォルトで有効になっています。
HTTP/2
HTTP/2は、すべてのCDNで利用されている優れたプロトコルであり、アセットの配信を高速化してくれます。優れた多重化と並列化、ハフマン符号を用いたHPACK圧縮、ALPN拡張、サーバープッシュなど、さまざまな機能によってパフォーマンスが改善されます。
2. 帯域幅の費用削減
サーバー（オリジンサーバー）のCPUやリソースの負荷を分散できることもCDNの利点の1つです。これによって、以下の実現が可能です。
- トラフィックの急増によりサーバーに過度に負担がかかる事態を防止
- 帯域幅の消費にかかる費用を削減
- トラフィック上下に伴う帯域幅料金の変動を回避
何か問題が起きれば、サーバーから高額な請求が来たり、超過料金の支払いを求められたりする恐れがあり、これはなんとしても避けたいものです。
費用削減に活用できるCDNの別の利点は、直リンクを防止できることです。HTTPリファラを制限し、アセットが他のサイトに転用されるのを防ぎます（画像の保護については、こちらの解説記事をご覧ください）。
ハフポストの騒動をご存知の方もいるかもしれません。ハフポストがThe Oatmealのウェブサイトから画像を許可なく転用（直リンク）したところ、AWSからThe Oatmealのサイト運営者に1,000ドルの請求書が送られてくるということがありました。その後、The Oatmealのサイト管理者は、ハフポストとその読者に向けて、直リンクされた画像を以下の画像に差し替えました。
このように高額なホスティング費用が発生することのないように、直リンク対策は必ず実施するようにしましょう。
3. 高可用性とスケーラビリティ
CDNは、高い可用性とスケーラビリティを与えてくれます。コピーされたコンテンツが、世界各地のPOPでアクセスできるようになるため、1つのサーバーがダウンしても、ウェブトラフィックは別のサーバーに転送されます。また、CDNはスケーラビリティを考慮して構築されているため、その点も安心です。CDNが負荷の大部分を処理するため、小規模な共用サーバーを利用している場合は、クラッシュからサイトを保護することもできます。
4. SEO
Googleは、2010年に検索ランキング要素としてサイトの表示速度を採用しました。これが実際にどの程度重視されているかはわかりませんが、ユーザー体験に大きく影響することから、重要な要素であることは間違いありません。
Brian Dean氏は、上位100万件のドメインを分析し、サイトの表示速度とGoogle検索ランキングの関係性を調査して、正の相関を見つけています。このような調査の妥当性を証明することは難しいですが、サイトの表示速度を上げれば、確実にGoogle検索で有利に働きます。つまり、Googleは表示速度の速いサイトを評価しています。
CDNは、サイトのページ表示速度だけでなく、画像などのメディアのクロール率を高め、Google画像検索でのインデックスに相関しています。
5. セキュリティの強化
多くのCDNでは、ウェブアプリケーションファイアウォール（WAF）やオリジンシールドを導入することで、以下のようにセキュリティを一層強化することができます。
- UDPとICMPプロトコルを標的とするものをはじめ、あらゆる形態と規模のDDoS攻撃を軽減
- SYN/ACK、DNSアンプ、レイヤー7攻撃をブロック
- （完全防備にはらないが）プロキシを使うことで接続元のIPアドレスを隠すことが可能
DDoS攻撃を阻止する方法については、Kinstaの事例紹介記事をご覧ください。Easy Digital Downloadsプラグインを使った小さなECサイトで、7日間で1つのページに対して500万回以上のリクエストが殺到しました。
このECサイトは通常、1日に30〜40MBの帯域幅を使用し、訪問者数は数百人程度でしたが、一瞬にしてデータ転送量が1日15〜19GBまで増えてしまいました。これは、4650％の増加です。それにも関わらず、Googleアナリティクスでは、トラフィックの増加がみられませんでした。
この対処法として、Sucuriのウェブアプリケーションファイアウォールをサイトに導入したところ、以下のグラフの通り、帯域幅とリクエストが瞬時に減少し、それ以来問題が発生することがなくなりました。このような問題が発生した場合は、WAFやオリジンシールドの導入は有意義な投資になり、問題への対処にかかる時間の節約にもなります。
CDNは、トークン認証のようなセキュリティ機能も提供しています。期限を過ぎるとユーザーがそのコンテンツにアクセスできなくなる、有効期限付きのセキュアリンクを生成することができます。
CDN使用時、未使用時のスピードテスト
WordPress CDNのメリットを並べ立てるだけでなく、実際にテストを行って、その結果をみてみましょう。
- 4カ所を拠点とし、CDNの使用、未使用の状態でそれぞれテストを5回実施
- サイトはKinstaで運営されているものを使用し、CloudFlare提供のKinsta CDN（無料）を利用
- サーバーの所在地は、米国のアイオワ州
重要）CDNのスピードテストを行う際は、メディアがキャッシュされるように数回行ってください。CDNのキャッシュについては先で触れた通り、HTTPヘッダ「X-Cache」に、キャッシュされた状態になると「HIT」と表示され、キャッシュされていない場合には「MISS」と表示されます。キャッシュを構築せずにテストを行った場合は、CDNのサイト高速化の効果が正しく確認できない可能性があります。
CDN未使用（テキサス州ダラス、米国）
テキサス州ダラスのサーバーで、CDNを使用せずにPingdomテストを5回実行し、その平均値を出します。
CDN未使用（メルボルン、オーストラリア）
メルボルンのサーバーで、CDNを使用せずにPingdomテストを5回実行し、その平均値を出します。
CDN未使用（カリフォルニア州サンノゼ、米国）
カリフォルニア州サンノゼで、CDNを使用せずにPingdomテストを5回実行し、その平均値を出します。
CDN未使用（ストックホルム、スウェーデン）
最後に、ストックホルムのサーバーで、CDNを使用せずにPingdomテストを5回実行し、その平均値を出します。
CDN使用（テキサス州ダラス、米国）
次に、比較のため、テキサス州ダラスのサーバーから、Kinsta CDNを使用してPingdomテストを5回実行し、その平均値を出します。
CDN使用（メルボルン、オーストラリア）
メルボルンのサーバーで、Kinsta CDNを使用してPingdomテストを5回実行し、その平均値を出します。
CDN使用（カリフォルニア州サンノゼ、米国）
カリフォルニア州サンノゼのサーバーで、Kinsta CDNを使用してPingdomテストを5回実行し、その平均値を出します。
CDN（ストックホルム、スウェーデン）
ストックホルムのサーバーで、Kinsta CDNを使用してPingdomテストを5回実行し、その平均値を出します。
測定結果
それでは、測定結果をもとに、CDNが合計読み込み時間にどれだけ影響するかをみてみましょう。
- テキサス州ダラス（米国）─CDNで合計読み込み時間を8.11%短縮
- カリフォルニア州サンノゼ（米国）─CDNで合計読み込み時間を33.02%短縮
- メルボルン（オーストラリア）─CDNで合計読み込み時間を54.19%短縮
- ストックホルム（スウェーデン）─CDNで合計読み込み時間を54.7%短縮
ダラスとサンノゼでは、CDNによってページの読み込み時間の違いはわずかですが、メルボルンの結果をみると、読み込み時間に大きな差があることがわかります。これは、テストサーバーの所在地に関係しています。
今回のテストで使用したKinstaのサーバーは、アイオワ州に位置しています。そのため、ダラスやサンノゼからCDNを使わずにサイトを読み込む場合、データの転送距離はそれほどありません。しかし、オーストラリアでは、その距離が大幅に広がるため、読み込み時間に大きな差が生じます。
CDNを有効にすれば、コンテンツとメディアはオーストラリアのシドニーにあるKinsta CDN POPから読み込まれるため、ダウンロード時間が圧倒的に短縮されます。スウェーデンのストックホルムも同様です。
読み込み時間を最大50%短縮できる可能性があるとすれば、CDNを利用しない手はありません。
CDNの必要性
CDNが自分のサイトに必要かどうか、疑問を抱く方が多いようですが、サイトの規模やトラフィックにかかわらず、CDNはいかなる条件下でも使用する価値があります。
上記で挙げたすべてのメリットを考えてみてください。また、ほとんどのCDNソリューションは非常に手頃な価格で提供されており、Kinstaを利用している場合は、Kinsta CDNを無料で使用できるため、費用がかさむこともありません。もちろん、CDNはSEO、サイトの表示速度、ユーザー体験の向上などに有用です。
さらに掘り下げて調査が必要になる場合としては、特定の地域の訪問者にのみコンテンツを提供することが挙げられます。
例えば、カナダのオンタリオ州でウェブサイトを持つ小さなショップを経営していて、他の地域での顧客の獲得にはあまり興味がないとします。この場合には、CDNプロバイダのPOPがどこにあるのかを調べなくてはいけません。
ウェブサーバーがオンタリオ州にあるにもかかわらず、最寄りのPOPが米国にあるCDNプロバイダを利用してしまうと、逆にサイトの速度を低下させてしまう可能性があります。非常に稀なケースですが、この場合はCDNを使用しない方が得策と言えます。
優れたCDNプロバイダ
現在、優れたCDNプロバイダが数多く存在していますが、Kinstaでは、サーバー組み込み型のCDNの利用が可能です。Cloudflare提供で、高速かつ簡単に有効化でき、完全無料です。KinstaのCloudflare統合をぜひ無料でご活用いただきたいところですが、特定の理由で外部CDNまたはプロキシの利用が必要になることもあります。
その場合、Kinstaと互換性のあるCDNソリューションをお選びいただくことをおすすめします。以下のリンクをクリックすると、Kinstaとの統合方法をそれぞれご覧いただけます。
WordPressサイトにCDNを導入する方法
統合方法は、CDNサービスごとに異なりますが、幸い、どれもWordPressをサポートしているため、設定は簡単です。各サービスのマニュアルを確認するか、必要であれば、それぞれのカスタマーサポートへお問い合わせください。
Kinsta CDN
HTTP/2とIPv6に対応し、200カ所以上の拠点を持つコンテンツデリバリネットワークであるCloudflareと提携し、世界中のアセットやメディアの配信を高速化します。現在は、米国、南米、ヨーロッパ、アフリカ、アジア（日本等）、オーストラリアなどの地域でサービスを提供しています。
Kinsta CDNを有効にする方法は、こちらをご覧ください。MyKinstaの管理画面（バックエンド）からワンクリックで設定可能です。
また、帯域幅の使用状況、リクエスト数上位のファイル一覧、HTTPステータスコードなどを確認できるサイト分析画面もあります。
MyKinstaでは、企業レベル（すべてのサイトのデータを集約）とサイトレベルで分析を見ることができます。
Cloudflare
Kinsta以外のサーバーでサイトを運営していて、Cloudflareを使用している、または興味がある場合は、WordPressサイトにCloudflareを導入する方法をご覧ください。
ただし、Kinstaを利用している場合は、Cloudflare提供のCDN（Kinsta CDN）を無料で使用できるため、別途インストールするよりも、Kinsta CDNを使用するほうが簡単です。
Cloudflare統合の一環として、エッジキャッシュにより、Kinstaサイト/ページキャッシュデータがCloudflareグローバルネットワークの260+箇所のデータセンターのいずれかに保存されます。
エッジキャッシュはKinstaのすべてのプランにて無料でご利用いただけます。別途プラグインのインストールは不要です。キャッシュしたWordPressサイトのHTML配信にかかる時間を平均で50％以上削減することができます。
サードパーティCDN
CDNを自分で導入することをお考えの場合、プロバイダの無作為なURLではなく、メディアやアセット用にサブドメインを使用することをおすすめします。
例: cdn.yourdomain.com
これによって、サイトのブランディングを高めるだけでなく、インデックスの問題も軽減されます。
プロバイダでCDNの設定後、無料のWordPressプラグインを活用すれば、アセットを素早くリンクし、CDNサービスへ自動的にコピーすることができます。以下、おすすめのWordPress CDNプラグインをご紹介します。
おすすめのCDNプラグイン・拡張機能
これからご紹介するCDNプラグインは、WordPressサイト上で自動的にCDNを有効にするのではなく、サードパーティのCDNサービス（Cloudflare、Fastly、Sucuriなど）をWordPressサイトに接続し、CDNがサイトのアセットを取得して、訪問者にコンテンツを配信できるようにするものです。
基本的に、トップクラスのWordPress CDNプラグインは、接続と操作が簡単です。
以下がおすすめのWordPress CDNプラグイン一覧です。
- Cloudflare─ワンクリックでインストール可能。ウェブアプリケーションファイアウォール設定や、自動プラットフォーム最適化ツールが利用でき、250以上の高速で信頼性の高いデータセンターでサイトを高速化してくれる、優秀なCDNサービスです。Kinstaを利用している場合は、プラグインを追加することなく利用できます。
- Bunny.net─CDNサービスでもあり、WordPress CDNプラグインでもあるBunny.netを使えば、リンクを交換してCDNに追加する迅速な統合が可能です。自動のHTTPS設定、独自CDNホスト名、特定のディレクトリをCDN経由の配信から除外する機能で、パフォーマンスの向上がすぐに期待できます。
- LiteSpeed Cache─LiteSpeed Cacheはキャッシュプラグインですが、無料のQUIC.cloud CDNキャッシュ機能が利用でき、任意のCDNプロバイダに接続することも可能です。最小化、画像の最適化、遅延読み込みなど、幅広い機能でサイトのパフォーマンスを向上することができます。
- W3 Total Cache─多くのキャッシュプラグインは、CDNとしても利用でき、W3 Total Cacheもその1つです。人気のCDNと統合し、複雑な設定なしですぐにサイトのパフォーマンスを上げることができます。メディアやテーマファイルなどをCDNに送信すると同時に、使用前にそのデータをキャッシュ、圧縮してくれます。
- CDN Enabler─CDN Enablerは、アセットが外部CDNから提供されるようにすべてのURLを書き換えてくれるプラグインです。KeyCDNのアカウントと連動し、キャッシュパージ、パフォーマンス向上などが可能になります。
CDNを利用した画像インデックス
CDNの設定後は、Googleに画像が適切にインデックスされているか確認したいところです。
Yoast SEOプラグインを使っている場合は、「functions.php」ファイルの一番下に以下のコードを追加してください。ドメインとCDNドメインは、自分のものに書き換えましょう。
function wpseo_cdn_filter( $uri ) {
return str_replace( 'http://yourdomain.com', 'http://cdn.yourdomain.com', $uri );
}
add_filter( 'wpseo_xml_sitemap_img_src', 'wpseo_cdn_filter' );これを行わないと、以下のように、画像のインデックスが解除されてしまう恐れがあります。これは、Google Search Consoleでいつでも確認することができます。
しかし、Google Search Consoleには欠点があり、画像がインデックスされていても、それが表示されないことがあります。画像がインデックスされているかどうかを確認するには、Google画像検索に「site:https://yourdomain.com」と入力してください。
重要）CDNのURLは入力しないでください。画像はCDNから配信されますが、ルートドメインにインデックスされます。
Google画像検索で画像が表示されれば、問題なくインデックスされています。
まとめ
この解説記事を通して、WordPress CDNの数々のメリットをご紹介しました。CDNを利用すれば、世界中でメディアの読み込みを高速化し、TTFBを削減し、帯域幅の費用とサーバーの負荷を劇的に減らすことができます。
さらには、ページの読み込み速度が速くなり、Google検索ランキングにも有利に働きます。そして何よりも大切なのは、訪問者のユーザー体験をより良いものにできることです。
HTTP/2 CDNは、Kinstaのすべてのホスティングプランでご利用いただけます。CDNの使用について、ご不明点はございますか？コメント欄でぜひお聞かせください。
コメントを残す