弊社にとって、お客様のサイトのパフォーマンス最大化が最優先事項の1つです。弊社のホスティングスタックは、コンピューティング最適化(C2)仮想マシンから高度に調整されたソフトウェア構成まで、すべてパフォーマンスを考慮して構築されています。

コンテンツデリバリネットワーク(CDN)は、最新のホスティングスタックに欠かせない機能です。弊社では、Cloudflare提供の高性能CDNを追加費用なしでご利用いただけます。このページでは、CDNの概要およびCDNを有効化する方法をご紹介します。

弊社の新規WordPressサイトでは、CDNがデフォルトで有効化されます。

KinstaのCDN

無料のCloudflare統合によって、弊社で運用されるすべてのサイトでセキュリティが保護されます。エンタープライズレベルのファイアウォールとDDoS攻撃対策に加え、Cloudflareの堅牢なグローバルネットワークによる高性能HTTP/3 CDNをご利用いただけます。

CDNの速度

弊社CDNのパフォーマンスを測定するため、米国アイオワ州のGoogle Cloudデータセンターで運用されているWordPressブログサイトを使い、世界10箇所でベンチマークテストを実施しました。このブログは、カスタムテーマを使用しており、テキストやグラフィックなど、様々なコンテンツが公開されています。テストしたページには、30以上の静的アセット(JS、CSS、画像、フォントなど)のリクエストがあり、総量は3.2MB。1箇所につき、計3回のテストでページ表示速度を測定し、平均時間を算出しました。

パフォーマンスのベンチマークテストの結果、弊社CDNを有効にすると、ページの表示速度が最大44%高速化されることが分かりました。CDN有り/無しで測定した各地の結果は、以下の表をご覧ください。

なお、CDNによるパフォーマンスの向上は、オリジンサーバー(今回のテストの場合は、米国アイオワ州)に近い場所においては、あまり見られない可能性があります。

所在地 CDN無し(秒) CDN有り(秒) 差分比率
フランクフルト 2.64 2.19 -17.05%
アムステルダム 3.05 1.7 -44.26%
ロンドン 2.78 1.55 -44.24%
ニューヨーク 1.16 0.835 -28.02%
ダラス 0.721 0.849 +17.75%
サンフランシスコ 1.1 1.2 +9.09%
シンガポール 4.91 3.41 -30.55%
シドニー 4.72 3.95 -16.31%
東京 2.83 2.18 -22.97%
バンガロール 4.43 4.82 +8.80%

Cloudflareは、100カ国以上、260+都市を網羅する世界最大級のCDNネットワークを誇ります。一方、KeyCDN、Bunny CDN、StackPathなどの他の主要CDNサービスのPoPは60未満です。

弊社のCDNをご利用いただくと、追加費用なしで、世界各地から静的アセットを配信できるようになります。

CDNの機能

Cloudflareのネットワークによって、弊社のCDNには、従来のCDNサービスにはない以下のような機能があります。

HTTP/3対応

HTTPプロトコルの最新版であるHTTP/3をサポートしています。HTTP/3は、HTTP/2と比較して、より高速な0-RTTハンドシェイク、SSL暗号化、優れたパフォーマンスを実現します。

ChromeやFirefoxなどの主要ウェブブラウザがHTTP/3のサポートを開始していることから、CDNでのサポートも重要になります。現時点では、HTTP/3対応のCDNサービスはほとんどありません。また、弊社のCDNでは、必要に応じて自動的にHTTP/2に切り替わるため、訪問者のブラウザがHTTP/3をサポートしていなくても安心です。

プライマリドメイン対応

Cloudflareはリバースプロキシサービスです。これは、セカンダリドメインなしで機能を利用できることを意味します。弊社のCDNをご利用いただくと、お客様のサイトのキャッシュされたアセットは、セカンダリCDNドメインではなく、プライマリドメインから配信されます。

Googleは、プライマリドメインから画像を配信することがSEOに有利になることはないと述べていますが、セカンダリCDNドメインを使用しないメリットは他にもあります。例えば、セカンダリCDNドメインを使って画像URLを共有すると、将来的にCDNサービスを変更した際に、HTTP 404エラーが頻発する可能性があります。この問題は、静的アセットをキャッシュし、プライマリドメインで配信することで解決できます。

また、セカンダリドメインのURLを書き換える必要がなくなり、WordPressマルチサイトとの互換性も向上します。

画像の最適化

PNG、GIF、JPEG画像をWebP形式に自動的に変換し、サイトの速度とパフォーマンスを向上させる画像最適化機能があります。

コードの圧縮

JavaScriptとCSSファイルから不要な要素を削除する「コード圧縮」機能で、ページの読み込み時間やサイトに必要な帯域幅を削減することができます。

CDNを有効にする方法

CDNを有効にするには、MyKinstaにログイン後、「WordPressサイト」>(サイト名)>「CDN」で、「CDNの有効化」をクリックします。

MyKinstaでCDNを有効化
MyKinstaでCDNを有効化

次に、ポップアップ画面で「CDNを利用する」をクリックして、変更を保存します。

「CDNを利用する」をクリックしてCDNを有効化
「CDNを利用する」をクリックしてCDNを有効化

CDNでキャッシュされるファイルの種類

ファイルは、MIMEタイプではなく、ファイル拡張子に基づいてキャッシュされます。CDNから特定のコンテンツを除外したい場合はこちらをご覧ください。

7z afm apk avi avif bmp bz2 cff
css cur dmg doc docx eot epub exe
ffil flac flv gif gz ico iso jfif
jpeg jpg js json lwfn m4a m4v map
mid midi mkv mov mp3 mp4 mpga odp
ods odt ogg ogv otf pdf pfb pfm
png ppt pptx pro qt rar rtf scss
ttf std svg svgz tar tgz tif tiff
txt wav webm webp wmv woff woff2 xls
xlsx xml xsf zip zst

<CDNを無効化またはパージする方法

最新のCDNが有効になっています」の横にある緑色のチェックマークは、CDNが現在稼働していることを意味しています。「CDN」ページには、他にも「無効化」と「CDNキャッシュをクリアする」の2つのボタンがあります。

  • 無効化─CDNを無効にすることができます。
  • CDNキャッシュをクリアする─CDNキャッシュを削除することができます。これは、フロントエンドで変更が反映されない場合に有用です。例えば、CSSに変更を加えた後、フロントエンドに反映されない場合は、旧CSSファイルがキャッシュされている可能性があります。CDNキャッシュの削除は、基本的な解決策の1つです。
CDNの無効化とCDNキャッシュの削除
CDNの無効化とCDNキャッシュの削除

CDNをテストする方法

弊社のCDNは、セカンダリCDNドメインを使用しないため、静的ファイルのURLをテストしてもCDNの機能を確認することはできませんが、ウェブサイトの速度テストツールが有用になります。

なお、速度テストを実行する前に、静的アセットのHTTPヘッダーを調査し、弊社のCDNから読み込みが行われているかどうか確認することをお勧めします。以下、HTTPヘッダーの確認方法をいくつかご紹介します。

HTTPステータス&リダイレクトチェッカーで確認する

HTTPステータス&リダイレクトチェッカーは、任意のURLのHTTPステータスとリダイレクトチェーンを確認できるKinstaの無料ツールです。レスポンスヘッダーでCDNが動作しているかどうかを確かめることができます。

まずは、サイト上の静的アセットのURLを見つけます。該当の画像を右クリックし、URLをコピーしてください。コピーしたURLをHTTPステータス&リダイレクトチェッカーに貼り付け、「チェック」を押します。

すると、以下のような結果が表示されます。

HTTPステータス&リダイレクトチェッカーの結果に表示されるHTTPヘッダー
HTTPステータス&リダイレクトチェッカーの結果に表示されるHTTPヘッダー

レスポンスヘッダ」のcf-cache-statuski-cf-cache-statusの値を確認します。この値は、Cloudflareアカウントを使用しているか(Cloudflareドメイン)、または使用していないか(非Cloudflareドメイン)によって異なります。

非Cloudflareドメイン(Cloudflareアカウントをお持ちでない場合)

cf-cache-statuski-cf-cache-status両方のヘッダーにHITという値が表示されるはずです。MISSDYNAMICのような値が表示される場合は、CDNキャッシュを呼び出すため、数回チェックを実行してください。また、アセットがCDNによって配信されていることを示すki-cache-tagヘッダーが表示されるはずです。

Cloudflareドメイン(Cloudflareアカウントをお持ちの場合)

cf-cache-statusヘッダーは、キャッシュがお客様のCloudflareアカウントから返されているかを示し、ki-cf-cache-statusヘッダーは、キャッシュが弊社のCloudflare CDNから返されているかどうかを示します。cf-cache-statusの値がDYNAMICまたはBYPASSで、ki-cf-cache-statusの値がHITの場合、弊社のCDNが有効で、お客様のCloudflareアカウントのCDNが(通常ページルールで)無効であることを意味します。

ウェブブラウザで確認する

ウェブブラウザに組み込まれている開発者ツールを使って、CDNの動作を確認することもできます。今回は、Google Chromeを使用して、静的アセットのHTTPヘッダーをチェックする方法をご紹介します。Chromeのデベロッパーツールを起動するには、ページ上で右クリックし、「検証」を選択します。

右クリックで「検証」を選択し、デベロッパーツールを起動
右クリックで「検証」を選択し、デベロッパーツールを起動

次に、「Network」タブをクリックして、ページを再読み込みします。ページが読み込まれると、デベロッパーツールのウィンドウの左側にページの静的アセットの一覧が表示されます。お客様のドメインから読み込む静的アセット(CSS、JS、画像ファイル、またはウェブフォント)をクリックします。

デベロッパーツールの「Network」にあるHTTPヘッダー
デベロッパーツールの「Network」にあるHTTPヘッダー

Headers」タブに「Response Headers」が表示されたら、cf-cache-statuski-cf-cache-statusの値を確認します。この値は、Cloudflareアカウントを使用しているか(Cloudflareドメイン)、または使用していないか(非Cloudflareドメイン)によって異なります。

非Cloudflareドメイン(Cloudflareアカウントをお持ちでない場合)

cf-cache-statuski-cf-cache-status両方のヘッダーにHITという値が表示されるはずです。MISSDYNAMICのような値が表示される場合は、CDNキャッシュを呼び出すため、数回チェックを実行してください。また、アセットがCDNによって配信されていることを示すki-cache-tagヘッダーが表示されるはずです。

Cloudflareドメイン(Cloudflareアカウントをお持ちの場合)

cf-cache-statusヘッダーは、キャッシュがお客様のCloudflareアカウントから返されているかを示し、ki-cf-cache-statusヘッダーは、キャッシュが弊社のCloudflare CDNから返されているかどうかを示します。cf-cache-statusの値がDYNAMICまたはBYPASSで、ki-cf-cache-statusの値がHITの場合、弊社のCDNが有効で、お客様のCloudflareアカウントのCDNが(通常ページルールで)無効であることを意味します。

ターミナルで確認する

ターミナル(コマンドライン)の操作に抵抗がない場合は、curlコマンドでHTTPヘッダーを確認する方法もあります。サイト上の静的アセット(画像)を右クリックして、URLをコピーします。

以下のコマンドを使用します。コマンドの末尾にあるURLを先ほどコピーしたアセットのURLに置き換えてください。

curl -L -s -o /dev/null -D - https://kinstacdn.kinstalife.com/wp-content/uploads/2021/01/post-one.jpg

コマンドを実行すると、以下のようなレスポンスが返されます。

静的アセットへのcurlに対するレスポンスのcf-cache-status、ki-cf-cache-status、ki-cache-tagを確認
静的アセットへのcurlに対するレスポンスのcf-cache-status、ki-cf-cache-status、ki-cache-tagを確認

cf-cache-statuski-cf-cache-statusの値を確認します。この値は、Cloudflareアカウントを使用しているか(Cloudflareドメイン)、または使用していないか(非Cloudflareドメイン)によって異なります。

非Cloudflareドメイン(Cloudflareアカウントをお持ちでない場合)

弊社のCDNが有効である場合、cf-cache-statuski-cf-cache-status両方のヘッダーにHITという値が表示されるはずです。MISSDYNAMICのような値が表示される場合は、CDNキャッシュを呼び出すため、数回チェックを実行してください。また、アセットがCDNによって配信されていることを示すki-cache-tagヘッダーが表示されるはずです。

Cloudflareドメイン(Cloudflareアカウントをお持ちの場合)

cf-cache-statusヘッダーは、キャッシュがお客様のCloudflareアカウントから返されているかを示し、ki-cf-cache-statusヘッダーは、キャッシュが弊社のCloudflare CDNから返されているかどうかを示します。cf-cache-statusの値がDYNAMICまたはBYPASSで、ki-cf-cache-statusの値がHITの場合、弊社のCDNが有効で、お客様のCloudflareアカウントのCDNが(通常ページルールで)無効であることを意味します。

注意事項

弊社のCDNご利用にあたって、以下の点にご注意ください。

  • サードパーティのCDNサービスを利用している場合、弊社のCDNを有効化する前に無効にすることをお勧めします。1つのサイトに対し複数のCDNサービスを使用すると、アセットのパージに関する問題が生じる恐れがあります。
  • 弊社Cloudflare統合とお客様のCloudflareアカウントを併用する場合、一部のキャッシュ最適化の設定が弊社の設定を上書きしたり、その逆が行われたりすることがあります。この場合、弊社のCDNを有効化すると、CloudflareのFree、Pro、Businessプランよりも大きなファイルをキャッシュできるようになります。
  • キャッシュ可能な最大ファイルサイズは5GBです。
  • 静的アセットは、自動的にHTTPSで配信されることはありません。すべてのアセットをHTTPSで配信するには、MyKinstaで「HTTPSリダイレクト」をご利用ください。
  • 弊社のCDNをご利用いただくと、Cache-Controlヘッダーは、"Cache-Control", "public, max-age=31536000, s-maxage=31536000"に設定され、Nginxまたはお客様のCloudflareアカウントのBrowser Cache TTLで設定されたExpiresまたはCache-Controlヘッダーは、この値に上書きされます。独自のExpiresまたはCache-Controlの設定が必要な場合には、弊社のCDNを無効にしてください。

まとめ

Kinstaでは、すべてのお客様に、追加料金なしで高性能CDNをご利用いただけます。無料のCloudflare統合によって、世界中の260+POPから自動的にコンテンツが配信されます。CDNについてご質問がありましたら、24時間年中無休で利用可能なカスタマーサポートまでお気軽にお問い合わせください。