KinstaのCDN

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

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

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

Kinsta CDN

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

Kinsta CDNの速度

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

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

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

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

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

Kinsta 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形式に自動的に変換し、サイトの速度とパフォーマンスを向上させる画像最適化機能があります。

コードの圧縮

Kinsta CDNを有効にする

コンテンツデリバリネットワーク（CDN）を利用すると、すべての静的コンテンツ（画像、CSS、JavaScriptファイルなど）がCDNを通じて配信されます。上限は1ファイルあたり5GBです。

MyKinstaの「WordPressサイト」画面では、ステージング環境を含む1つまたは複数のサイトのCDNを一括で有効にすることができます。サイト名の左にあるチェックボックスを使用して、CDNを利用したいサイトを選択します。右上に出現する「操作」ドロップダウンをクリックして、「CDNの変更」を選択してください。

「利用する」を選択して「CDNを変更」をクリックします。

変更が適用されると、その旨を伝えるメッセージが表示されます。

また、「WordPressサイト」＞（サイト名）＞「キャッシュ」画面に移動し、「CDN」タブの「利用する」をクリックして、単一のサイトでCDNを有効にすることもできます。

表示されるポップアップウィンドウで「CDNを利用する」をクリックして確定します。

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

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

CDNファイルとURLの除外

CDNを有効にすると、デフォルトで特定のファイルがCDNから除外されます。

• robots.txtファイル
• .well-knownディレクトリ内のすべてのファイル
• 名前に「sitemap」を含むファイル（ファイル名の先頭、中間、末尾問わず）

CDNからのファイルの除外設定

CDN画面の「CDNからのファイルの除外」セクションの「設定」をクリックし、除外するディレクトリパス、URLパス、またはファイル拡張子を設定します。

除外設定

除外したい（ディレクトリ）パス、URL（パス）、またはファイル拡張子を貼り付けます。

• ディレクトリに基づいたファイルの除外：「wp-content/uploads/custom-image-folder」「/my-documents、/data-feed.txt」のように、公開ディレクトリ/フォルダからの相対パスで、一度に1つのディレクトリまたはファイルパスを貼り付けて、「ディレクトリを追加」をクリックします。これらのディレクトリとサブディレクトリ（存在する場合）内のすべての静的アセットがCDNから除外されます。
• URLに基づいたファイルの除外：「homepage」「/blog/2021」「/shopping」のように、1ページずつパス（プロトコルやドメインは含めない）を貼り付けて、「URLを追加」をクリックします。これらのページ上のすべての静的アセットが、Refererヘッダーに基づいてCDNから除外されます。ページがブラウザに読み込まれると、静的アセットに対するすべてのサブリクエストは、そのページのURLと一致するRefererヘッダーを持ちます。Refererヘッダーに除外したURLパスを持つサブリクエストは、CDNから除外されます。
• 種類に基づいたファイルの除外：「.jpg」「.jpeg」「.gif」など、1つまたは複数の拡張子を追加するには、ドロップダウンメニューから各ファイルの種類を選択し、拡張子ごとに「拡張子を追加」をクリックします。追加した拡張子で終わるファイルは、サイトファイルのどこに格納されているかに関わらず、CDNから除外されます。拡張子をフィールドに入力し始めると、予測結果が表示され、スムーズに追加することができます。

除外対象の編集

除外したパスまたはURLを編集するには、該当項目の右側にある鉛筆（編集）アイコンをクリックします。

「除外対象の編集」ポップアップで変更を加え、「除外対象を編集」をクリックして保存します。

除外対象の削除

除外対象を削除するには、編集アイコンの隣にあるゴミ箱（削除）のアイコンをクリックします。

項目のボックスにチェックを入れて複数の項目を同時に削除したり、一覧の上部にあるボックスにチェックを入れてすべてを一括削除したりすることも可能です。

注意事項

• パーセントエンコーディング（別名URLエンコーディング）は、URL中のスペースや特定の特殊文字をエンコードする手法で、必要に応じて、バックグラウンドで処理されます。スペースなどの特殊文字を含むURLパスを入力した場合、MyKinsta上では入力通りに表示されますが、意図した通りに動作する様、エンコード処理後の値が保存・使用されます。URLパスがエンコードされているかどうかが不明な場合は、ページやアセットのURLにアクセスし、ブラウザのアドレスバーからURLパスをコピーしてください。
• ディレクトリパスやURLパスのサブパスも同様に除外されます。例えば、「/blog」と入力すると、「/blog/category-1」や 「/blog/category-1/some-post-title」などのサブページもCDNをバイパスするようになります。サブページを除外したくない場合には、除外したいページのすべてのパスを追加してください。「blog/category-2/some-title」と入力すれば、「/blog」「/blog/category-1」「/blog/category-2/some-other-title」などのページは除外されず、「blog/category-2/some-title」だけが除外されます。
• 一度に入力できるパスやファイル拡張子は1つだけです。
• 「ディレクトリに基づくファイルの除外」フィールドにディレクトリパスとファイル名を追加することで、単一の特定のファイルを除外することができます。

除外項目の追加例

public/wp-content/my-custom-folderディレクトリにあるすべての静的アセットを除外

「ディレクトリに基づいたファイルの除外」フィールドに「/wp-content/my-custom-folder」を貼り付けます。

そのディレクトリから静的アセットを読み込んでいるページにアクセスし、ブラウザの開発者ツールの「Network（ネットワーク）」タブを確認すると、静的アセットがCDNをバイパスしていることがわかります。

公開ディレクトリのdata-feed.txtファイルを除外

「ディレクトリに基づくファイルの除外」フィールドに「/data-feed.txt」を追加します。

/shop/item-1ページにあるすべての静的アセットを除外

「URLに基づいたファイルの除外」フィールドに「/shop/item-1」を追加します。

その後、「https://example.com/shop/item-1」にアクセスし、ブラウザの開発者ツールの「Network（ネットワーク）」タブを確認すると、ページのすべての静的アセットがCDNをバイパスしていることがわかります。

すべてのPDFファイルを除外

「種類に基づいたファイルの除外」に「.pdf」を追加します。

PDFファイルのあるページにアクセスし、ブラウザの開発者ツールの「Network（ネットワーク）」タブを確認すると、そのファイルがCDNをバイパスしていることがわかります。

画像の最適化

サイト表示時間の大部分を占める原因となるのが画像です。弊社では、数回のクリックで画像を最適化することでサイトの表示速度を改善し、訪問者のユーザー体験を向上することができます。画像の最適化は、CDNを使用している場合にのみ実行可能です。

サイトのファイルに保存されている画像そのものを変更することはなく、画像を新規作成した上で最適化が実行されます。このようにして新たに作成された画像は、ストレージを消費せず、ご利用のプランに付帯するディスク容量が削られることはありません。

可逆圧縮を利用すると、CDNはCloudflareのPolish機能を使ってGIFとPNG画像のWebPバージョンをオンザフライで自動生成します。非可逆圧縮を利用すると、CDNによりGIF、PNG、JPEG画像のWebPバージョンが生成されます。CloudflareのCDNにキャッシュされたWebPバージョンは、以下の状況で配信されます。

1. 訪問者のブラウザのAcceptヘッダーにWebPが含まれている
2. 圧縮された画像が元画像より圧倒的に小さい

画像最適化の有効化

「CDN」タブの「画像最適化」セクションの「設定」をクリックし、WordPressサイトの画像最適化を設定して有効化します。

ポップアップウィンドウで、可逆圧縮または非可逆圧縮を選択します。

可逆圧縮

可逆圧縮を使った最適化は、画質に影響を与えません。GIFとPNG画像のみが圧縮され、WebPバージョンが作成されます。メタデータはすべての画像から削除されます。

画質の維持を重視する場合は、この方法を選択してください。JPEG画像を圧縮して、WebPバージョンを作成するには、非可逆圧縮を選択します。

「設定を保存」をクリックすると、「画像最適化」セクションに以下のメッセージが表示されます。

非可逆圧縮

非可逆圧縮での最適化では、画像をできる限り小さくするためにJPEG圧縮が行われることから、画質が低下する可能性があります。可逆圧縮と同様に、GIFやPNG画像が圧縮され、すべての画像からメタデータが削除されます。また、すべての画像の Webp バージョンが作成されますが、WebPバージョンは、非可逆圧縮または可逆圧縮された画像よりも大幅に小さい場合のみ使用されます。

画質よりも最大限の最適化を重視する場合には、この方法を選択してください。

「設定を保存」をクリックすると、「画像最適化」セクションに以下のメッセージが表示されます。

画像最適化のテスト

画像の最適化は、画像のURLやファイル拡張子を変更したり、サイトのページのHTMLを変更したりすることはありません。画像が最適化されていることを確認するには、ブラウザの開発者ツールで、画像のHTTPヘッダーを確認します。

1. サイトにアクセスし、開発者ツールを開きます（ページまたは画像を右クリックして「検証」をクリック）。
2. 「ネットワーク」タブで必要に応じてページを再読み込みし、画像を選択します。
3. 選択した画像の「ヘッダー」タブで「レスポンスヘッダー」が表示されるまでスクロールし、以下のヘッダーと値を確認します。
   1. cf-polished：画像の元の形式とファイルサイズが表示されます。WebPバージョンが元の画像よりもファイルサイズが大きい場合は、元の画像がそのまま使用されます。
   2. content-type：URLやファイル拡張子に関係なく、どのようなファイル形式で提供されているかが表示されます。
   3. ki-cache-type：CDNであることを確認します。
   4. ki-cf-cache-status：HITであることを確認します。ki-cache-typeヘッダーのCDNと組み合わせで、画像が弊社CDNによって配信されていることを示します。

画像最適化の無効化

画像の最適化を無効にするには、MyKinstaにログイン後、「WordPressサイト」＞（サイト名）＞「CDN」に移動し、「画像最適化」セクションの「設定」をクリックします。表示されたウィンドウで「なし」を選択して、「設定を保存」をクリックしてください。

無効化が適用されると、「画像最適化」セクションに以下のメッセージが表示されます。

Kinsta CDNの無効化とCDNキャッシュのクリア

MyKinstaでCDNキャッシュをクリアする

CDNキャッシュのクリアは、サイトのフロントエンドに変更がうまく反映されない場合の最初のトラブルシューティングとして効果的です。例えば、CSSに変更を加えたにもかかわらず、フロントエンドに変更が表示されない場合は、古いCSSファイルがキャッシュされている可能性があります。

MyKinstaの「WordPressサイト」画面からステージング環境を含む1つまたは複数のサイトのサーバー、CDN、およびエッジキャッシュを同時にクリアすることができます。Redisアドオンをご利用の場合は、Redisオブジェクトキャッシュもクリアされます。

サイト名の左側にあるチェックボックスを使用して、キャッシュをクリアしたいサイトを選択します。右上に出現する「操作」ドロップダウンをクリックし、「キャッシュのクリア」を選択します。

クリアするキャッシュの種類を選択して、「キャッシュをクリア」をクリックします。

キャッシュのクリアが完了すると、その旨を伝えるメッセージが表示されます。

また、「WordPressサイト」＞（サイト名）＞「キャッシュ」画面に移動し、「CDN」タブの「CDNキャッシュをクリアする」をクリックして、単一サイトのCDNをクリアすることもできます。

この処理には5分ほどかかる場合があります。

Kinsta MUプラグインでCDNキャッシュをクリアする

Kinsta MUプラグインがサイトにインストールされている場合、WordPress管理画面でCDNキャッシュをクリアするか、WP-CLIを使用して以下のコマンドでCDNキャッシュをクリアすることができます。

wp kinsta cache purge --cdn

KinstaのCDNを無効にする

MyKinstaの「WordPressサイト」画面では、ステージング環境を含む1つまたは複数のサイトのCDNを一括で無効にすることができます。サイト名の左にあるチェックボックスを使用して、CDNを利用したいサイトを選択します。右上に出現する「操作」ドロップダウンをクリックして、「CDNの変更」を選択してください。

「無効化する」を選択して、「CDNを変更」をクリックします。

変更が適用されると、その旨を伝えるメッセージが表示されます。

また、「WordPressサイト」＞（サイト名）＞「キャッシュ」画面に移動し、「CDN」タブの「無効化する」をクリックして、単一サイトのCDNを無効にすることもできます。

Kinsta CDNのテスト

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

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

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

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

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

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

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

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

cf-cache-statusとki-cf-cache-status両方のヘッダーにHITという値が表示されるはずです。MISSやDYNAMICのような値が表示される場合は、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、画像ファイル、またはウェブフォント）をクリックします。

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

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

cf-cache-statusとki-cf-cache-status両方のヘッダーにHITという値が表示されるはずです。MISSやDYNAMICのような値が表示される場合は、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

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

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

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

弊社のCDNが有効である場合、cf-cache-statusとki-cf-cache-status両方のヘッダーにHITという値が表示されるはずです。MISSやDYNAMICのような値が表示される場合は、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を無効にしてください。

まとめ

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