WordPress 用に CDN77 をセットアップする方法

以前このブログで、WordPress で CDN サービスを使用する利点と、CDN が WordPress を高速化する最良の方法の 1 つである理由を何度も検討しました。訪問者がホストサーバーから遠く離れている場合に、パフォーマンスがどの程度向上するかを観察しました。今日の記事では、CDN77 で CDN リソースを作成する方法と、それを適切に調整する方法について段階的なガイドを行うので、興味を持っていただければ幸いです。その後、WordPress に特定のプラグインのセットをインストールし、すべてが正常に動作しているかどうかを確認します。

このガイドの最初のステップは、CDN77 アカウントを作成することです。まだアカウントをお持ちでない場合は、CDN77 の 14 日間の無料トライアルをご利用いただけます。登録には数分しかかかりません。次に、([CDN] タブの下の) [新しい CDN リソースの作成] をクリックして、実際に CDN リソースを作成します。この記事の目的として、ラスベガスのデータセンターでホストされている映画ブログに CDN を実装します。

完全な HTTPS ソリューションを実装する予定であるため、CDN77 では新しい「HTTPS」を使用します。このオプションは、ホストサーバーから CDN サーバーへのデータ転送を保護します。

サイトが SSL モードで実行されている場合は、CDN77 で SSL のみのリソースを作成する必要があります。そうしないと、混合コンテンツエラーが発生する危険があります。この種のエラーは、ブラウザが SSL モードで実行されており、安全でない HTTP リクエストを通じて突然リソースをロードしようとした場合に発生します。

CDN77 で SSL をセットアップする方法

無料の SSL 証明書は 2 つの方法で設定できます。 xxx.c.cdn77.org のサブドメインに共有 SSL 証明書を使用することも、独自の CNAME を使用することもできます (上の図を参照)。一般に、cdn.yoursite.com のような CNAME を使用することをお勧めします。

CDN77 共有ソリューションを選択する場合、SSL サブドメインが適切に機能するためにこれ以上の手順は必要ありません。

今回はCNAMEを設定します。つまり、サイトを cdn.ourdomain に置き換えると、ウェブサイトのコンテンツに HTTPS 経由で即座にアクセスできるようになります。 CDN77 を使用すると、数回クリックするだけで SSL を取得できます。

微調整してください！

リソースを作成したら、最初に [その他の設定] メニューを確認します。 HTTPS を使用する場合は、HTTP/2 を有効にしておくことが絶対に必須です。通常の HTTP/1.x と HTTP/2 の間の速度の向上は大幅です。 CDN77 はデフォルトで HTTPS リソースの HTTP/2 モードで動作し、時間を半分に短縮します。

HTTPS を経由する場合は、HTTPS の Google 標準に準拠するためにリダイレクト 301 を実行し、HTTPS リダイレクトを有効にする必要もあります。

最適なパフォーマンスを得るには、[クエリ文字列を無視] で [すべて無視] を有効にします。サイトが 1 時間ごとに更新する必要がある動的に読み込まれるコンテンツを実行している場合を除き、クエリ文字列を無視してすべて無視することができます。これにより、キャッシュとサイトのパフォーマンスが大幅に向上します。

CDN77 では、キャッシュの有効期限オプションも提供しています。大量の写真をロードする場合は、これを可能な限り高い設定 (12 日間) に設定する必要があります。

このガイドでは、まず速度を考慮します。したがって、CDN は画像の静的コンテンツのみを提供し、それ以外はすべてオリジンサーバーからロードされます。

Javascript と CSS に CDN を使用してみませんか?

前回の記事で、CDN ネットワークの要求されたノードでコンテンツが利用できない場合に CDN のパフォーマンスがどのように変化する可能性があるかについて説明したことを思い出してください。まだキャッシュされていないファイルがたまたま CSS ファイルだった場合、読み込み時間が長くなり、パフォーマンスに悪影響を及ぼす可能性があります。これは、CDN で CSS を提供しない場合よりもサイトのレンダリング速度に大きく影響する可能性があります。

CSS と JavaScript ファイルは、ウェブサイトをブラウザで読み込むために不可欠であり、CDN サービスのようなキャッシュメカニズムの対象となるべきではありません。ただし、CDN 上に静的リソースを作成して、この重要なファイルをダンプすることができます。これはより高度なテクニックであり、このチュートリアルの範囲を超えるレベルまで WordPress を調整する必要があります。

すべてを適切に調整したら、[データセンター] メニュータブに進むことができます。

CDN77 は、ネットワークの各ノードを有効/無効にする便利な方法を提供します。重要なのは、最もアクティブに使用されているノードを慎重に選択することです。これは簡単にわかります。読者をフォローするだけです。

必要なノードがわかったら、不要なノードをすべて無効にすることをお勧めします。これには簡単な説明があります。ネットワーク上のノードが増えるほど、すべてのノードを更新するのに時間がかかるため、パフォーマンスが低下します。一般に、ノードの数を減らすと、キャッシュのパフォーマンスも向上します。賢明に選択してください。

初めてサイトのパフォーマンスをテストする場合は、パージとプリフェッチが便利です。パージは特定のコンテンツを CDN ネットワークからプッシュします。コンテンツを変更し、更新するためにキャッシュをフラッシュする必要がある場合に便利です。プリフェッチはその逆で、特定のコンテンツを CDN キャッシュに強制的に入れます。

すべての構成が完了したら、CNAME を独自のドメインに向けることができます。これを行うには、レジストラまたは DNS セクションのホスティングパネルにルールを作成し、図に示すように cdn.yourdomain.com を CNAME xxx.rsc.cdn77.org に指定する必要があります。これにより DNS に指示されます。サブドメインのすべてのトラフィックを実際に必要な場所にリダイレクトします。パフォーマンスには影響しませんので、ご安心ください。さらに、派手な cdn.yourdomain.com を使用していることを読者に示す目的もあります。

cdn77.org アドレスを使用したい場合は、何もする必要はありません。WordPress でコンテンツを置き換えるときにそのアドレスを使用するだけです。

WordPress 側

WordPress 側では、これが適切に機能するようにプラグインを追加する必要があります。便利な無料プラグインである CDN Enabler を使用します。このプラグインを使用する理由は単純です。ほとんどの CDN プラグインでは、CDN に送信するフォルダーをこのように詳細に制御することができません。このプラグインはこれに対応しており、JavaScript や CSS ファイルは含めず、アップロードされた画像のみを含める必要があるため、このケースでは非常に重要です。

インストールしたら、ここでプラグインを見つけることができます…

微調整してみましょう！

カスタマイズについて話したときのことを覚えていますか? WordPress で CDN を適切に設定する方法に関する最も重要な事実は次のとおりです。 CDN プラグインの大部分は、CDN が「複製」するディレクトリを含めるように指示し、通常は wp-content を含めるように指示します。一般的な設定ではこれで問題ありませんが、wp-content フォルダには、大量の JavaScript や CSS ファイルを含む別の非常に機密性の高いフォルダ、プラグインやテーマフォルダが詰め込まれているため、パフォーマンスには良くありません。前述したように、キャッシュされないとパフォーマンスが低下する可能性があります。

では、これをどうやって修正すればよいでしょうか? wp-content/uploads フォルダーを含めるだけです。とてもシンプルな解決策です！

ショックを受けたかもしれませんが、CDN を処理するプラグインの大部分ではこれを行うことができません。このサブフォルダーのみを含めると、CDN がアップロードフォルダー (写真のみ) に指示されます。

サイトを簡単に更新するだけで、CDN がコンテンツを取得できるようになります。この例では、Firefox の [開発者] タブ (F12) を開き、最初の画像を検索しました。リンクが置き換えられ、ホストサーバーではなく CDN から直接読み込まれていることがはっきりとわかります。

前後

これがどうなったのか見てみましょう!

左側の画面では、スウェーデン (ラスベガスのホストサーバーから遠く離れていることを覚えていますか?) からサイトを読み込むのにかかる時間が表示されます。右側の画面では、パフォーマンスが向上し、時間が短縮されたことがわかります。ほぼ半分にカットされました！重要なファイルはすべてラスベガスのサーバーからロードされていますが、画像などの負荷の高いファイルはスウェーデンのノードからロードされています。

まとめ

CDN を WordPress サイトに実装する強力な方法を学習できたことを願っています。サイトの読み込み速度に不可欠な CSS や Javascript ファイルなど、一部の技術は非侵入的です。 CDN のあらゆる利点を活用し、同時に欠点を最小限に抑えることができるようになりました。ぜひ CDN の無料トライアルを試して、この記事のヒントを活用して WordPress サイトを高速化できるかどうかを確認してください。記事をお楽しみいただければ幸いです。いつものように、ご質問や疑問がございましたら、以下のコメント欄に残してください。