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

コードの圧縮

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

Kinsta CDNを有効にする

CDNを有効にするには、MyKinstaにログイン後、「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を有効にすると、コード圧縮機能が利用できるようになります。コード圧縮は、コメントや空白のような不要な要素をコードから削除する機能です。

上記の要素は、人間がコードを編集するときには便利ですが、ブラウザには一切必要ありません。これを削除することで、コードを最適化、ページサイズを小さくし、ページの読み込み時間を短縮することができます。

コード圧縮の有効化

「設定」ボタンをクリックして、お好みの設定を選択します。

表示されたコード圧縮のポップアップで、「CSS」「JS」、またはその両方を選択し、「設定を変更」ボタンをクリックします。

注意事項

• コード圧縮を有効にした後は、必ずサイトを確認してください。一部のブラウザでは圧縮に問題がある場合があります。問題が発生した場合は、コード圧縮を無効にしてください。
• コード圧縮の有効化には、数分かかる場合があります。
• Cloudflareアカウントをお持ちの場合、圧縮を行うには、Cloudflareでキャッシュをクリアする必要があります（CloudflareダッシュボードまたはCloudflareプラグインを使用）。
• 弊社でホストするドメイン上で提供される.cssまたは.js拡張子のすべてのファイルは、圧縮を有効にするファイルタイプに応じて圧縮されます。例えば、example.comを弊社でホストし、CSSファイルの圧縮を選択すると、example.com/wp-content/themes/yourtheme/style.cssとexample.com/wp-content/plugins/woocommerce/some-file.cssは圧縮されますが、 twitter.com/styles/example-shared.cssなど外部サイトにリンクしたアセットはこの機能では圧縮されません。
• ファイル名に「.min」が含まれているファイルはすべて対象外となります。.minが含まれるファイルはすでに圧縮されているため、特に効果は得られません。

コード圧縮のチェック

1. サイトにアクセスし、ブラウザでデベロッパーツールを開いてください。
2. 「Network」 タブで、JS または CSS ファイルをダブルクリックして、新しいタブで開きます。必ず、テーマやプラグインにより事前に圧縮されていないものを選んでください。
3. ファイルに空白やコメントがないか確認します。圧縮されていないJSやCSSファイルがある場合は、CDNのキャッシュをクリアしてページを数回読み込み直した上で、JSやCSSファイルを再度確認してください。
4. ページの再度読み込みを数回行っても、ファイルが圧縮されない場合は、圧縮されていないファイルのURLをカスタマーサポートまでお知らせください。

CDNコード圧縮のメリット

コードの圧縮はCloudflareのエッジで実行され、そこでキャッシュされるので、プラグインを使用したコードの圧縮よりも高い効果が得られます。

• サーバー（弊社サーバー）で、ファイル圧縮のためにリソース（CPU、メモリ、ストレージ）を使用する必要はありません。Cloudflareがその役割を担います。
• その後、圧縮したファイルをサーバーから配信する必要はありません。Cloudflareにより、リクエストを行ったサイト訪問者に最も近いエッジサーバーから直接ファイルが提供されます。
• Cloudflareはバックグラウンドでファイルを圧縮するので、圧縮されていないアセットへの最初のリクエストが、圧縮のためのCloudflareの処理によって遅れることはありません。そして、そのアセットへの次のリクエストが出されると、キャッシュされた圧縮済みのファイルが利用されます。

画像の最適化

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

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

可逆圧縮または非可逆圧縮の機能が有効であるとき、CloudflareのPolish機能により、CDNで画像のWebPバージョンが自動作成されます（オンザフライ最適化）。WebPバージョンがCloudflareのCDNにキャッシュされ、以下の条件に合致した時に配信されます。

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

画像最適化の有効化

「CDN」画面で「画像最適化」セクションの「設定」をクリックします。

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

可逆圧縮

可逆圧縮を使った最適化は、画質に影響を与えません。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キャッシュのクリア

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

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

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

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

wp kinsta cache purge --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時間年中無休でご利用可能なライブチャットサポートよりお気軽にお問い合わせください。