WordPress で Cloudflare 設定をセットアップする方法?
公開: 2024-04-19Cloudflare パートナーとして、WPOven でホストするサイトの DNS、ファイアウォール、CDN として Cloudflare を使用することをお勧めします。 このガイドは、WordPress サイトに最適な Cloudflare 機能を活用するために Cloudflare とその公式 WordPress プラグインをセットアップするための小さな参考資料として役立ちます。
速度とセキュリティを向上させるために、Web バージョンと Cloudflare WordPress プラグインの両方で Cloudflare を使用し、その設定を構成する方法について説明します。 このガイドは、サイトが WPOven でホストされているかどうかに関係なく、WordPress を使用しており、Cloudflare の使用に興味があるすべての人に適用されます。
Cloudflareドメインネームサーバー(DNS)
これはCloudflareが提供するコア機能であり、DNSをホストし、その際にサイト上のリバースプロキシも有効にし(これは必要に応じて無効にすることができます)、さまざまなサービスと機能拡張を提供します。 上記のように Cloudflare を設定すると、デフォルトで既存の NS レコードがインポートされ、必要に応じて簡単に追加できます。 Cloudflare は、ドメインレジストラが高度な NS レコードを設定するオプションを提供していない場合、または機能が制限されている場合に、DNS をホストするのにも非常に便利です。
DNS レコードは、DNS サーバーによって提供される、ドメインまたはホスト名の処理方法に関する情報を含む指示です。 さまざまなサービスがさまざまなタイプの DNS レコードを使用します。 この場合、主に、一般に A 名として知られるアドレス名と、一般に C 名として知られる正規名に関心があります。
- 名前: このレコードは、ドメイン名がサーバーの IP アドレスにどのようにマップされるかを示します。
- C Name : あるドメインが別のドメインをどのように指すかを示します。
以下に、一般的なドメイン名レコードの一部を示します。
http://www.electricmonk.org.uk/wp-content/uploads/2013/06/dns_records.bmp (表に変換)
現在の要件では、A 名のみを設定し、www C 名がサーバーの IP を指すようにします。

ほとんどのユーザーにとってデフォルトの設定で十分であるため、これについては詳しく説明しません。詳細については、Cloudflare のヘルプセクションを参照してください。
Cloudflareコンテンツ配信ネットワーク(CDN)について

CDN またはコンテンツ配信ネットワークは、世界中に地理的に分散されたサーバーのグループを指します。 これらのサーバーは連携して、訪問者の位置に基づいて Web サイトへのアクセスを提供します。
Cloudflare CDN は、DNS が Cloudflare でホストされているサイトに対する無料のサービスです。 デフォルトでは、すべての静的アセットがキャッシュされ、メイン ページが引き続きサーバーから取得されるため、サイトの読み込み時間が短縮されます (後で説明するように、この動作は変更できます)。
その後、Cloudflare はユーザーに最も近いデータセンターからこれらの静的資産を提供し、読み込み時間を短縮し、サーバー上の帯域幅とサーバー負荷を軽減します。 サイトで CDN を有効にするには、サイトで Cloudflare が有効であり、バイパス モードではないことだけが必要です。Cloudflare の背後にある場合、NS レコードにオレンジ色の雲が表示されます。
WordPress ユーザーには、他の CDN を使用するというオプションもあります。これについては過去に記事を書きました。こちらから読むことができます。
ここでは、CDN が有効になっている場合の読み込み時間と、現在最適化が適用されていないバニラ e コマース サイトの CDN の読み込み時間の簡単な比較を示します (サイトはダラスのデータセンターでホストされているため、シドニーからテストを実施しました) –

ご覧のとおり、サイトはデフォルトではあまりうまく機能していません (Gtmetrix を使用しています)。次に、2 ~ 3 回更新した後に CDN を有効にすると、次の結果が得られます (状況は改善されました)。
さらに進んで静的 HTML サイトを主に実行したい場合は、状況をさらに改善して、Cloudflare にサイトを完全にキャッシュさせ、世界中で高速に読み込むことができます。 これを行うには、Cloudflare にいくつかのページ ルールを追加する必要があります。これにより、Cloudflare がメイン ページをキャッシュし、最初のバイトまでの時間 (TTFB) がさらに短縮されます。

ページ ルールではサイトで直接作業することができないため、マシン上にローカル ホスト ファイル エントリを設定して、ドメインがサーバーを直接指すようにする必要があります。 これらのホスト レコードの設定については、こちらを参照してください。 また、変更を行ったときにキャッシュをクリアするには、Cloudflare プラグインがサイトにインストールされている必要があります。 ここからダウンロードするか、WordPress 内部の新しいプラグインの追加検索を使用してダウンロードできます。
ここでは、ルールが適用される前と後の、有効化されたルールとロード時間の簡単な比較を示します。 これは、独自の無料の Cloudflare APO の代替手段と考えることができます。


GTMetrix で 100 近くの評価を得てさらに数値を上げたい場合は、WPOhub プラグインのニトロ ブースト機能を試してください。これにより、JavaScript の読み込みが遅延され、ページ速度と GTMetrix のパフォーマンスの両方が向上します。
最適な結果を得るためにCloudflare設定を構成するにはどうすればよいですか?
Cloudflareには、Webサイトを支援し、安全かつ高速にするためのオプションが多数用意されていますが、問題は、それらのすべてがWordPressで完全に動作するわけではないことです。 ただし、心配する必要はありません。WordPress サイトに最適な Cloudflare 設定の一部を以下に示します。
- クラウドフレアSSL
- HTTPS設定
- Cloudflareの速度の最適化
- キャッシュ設定
- Cloudflareを使用したWordPressファイアウォール
- Cloudflareのネットワーク設定
1.クラウドフレアSSL
Cloudflareのもう1つの優れた機能は、Cloudflareを通じてホストされるすべてのWebサイトに無料のSSLが提供されることです。 この機能により、サイトとクライアント間の通信が安全であり、覗き見できないことが保証されます。 Cloudflareは、複数の設定方法をサポートしています。
Cloudflareは4つのSSL/TLS暗号化モードを提供します。
- Off : このモードでは暗号化が完全に無効になります。
- 柔軟: ブラウザと Cloudflare の間の接続のみを暗号化します。
- Full : エンドツーエンド暗号化を実装しますが、オリジンサーバーでの自己署名証明書の使用を許可します。
- フル (厳密) : エンドツーエンドの暗号化を提供し、Cloudflare からの無料のオリジン証明書、または信頼できる認証局 (CA) からの証明書を必須とします。 セキュリティを最適化するために、完全 (厳密) SSL モードを使用することを強くお勧めします。

2. 常に HTTPS を使用する
フル モードまたはストリクト モードをお勧めします。通常、ほとんどのセットアップではデフォルト設定で問題ありませんが、必要に応じて次の設定を微調整できます。
- [エッジ証明書] で [常に HTTPS を使用する] を有効にします。これにより、サイトへの安全でないアクセスが許可されなくなります。
- 同様に、コンプライアンス標準で要求されている場合でも、「最小 TLS バージョン」を以下のように 1.2 に設定すると、安全とみなされません。
- 同様に、「自動 HTTPS リライト」を有効にします。これにより、HTTP サイトから HTTPS サイトに移行するときに、混合コンテンツの警告が表示されなくなります。

3. Cloudflareの速度の最適化
ウェブサイト速度の最適化をお探しの場合、Cloudflare には専用のタブがあります。 速度の最適化に関連するすべての設定は「速度」タブにあります。
3.1 画像のサイズ変更
Cloudflareの画像サイズ変更機能はビジネスプラン専用であり、正しく設定されている場合、次のような利点があります。
- 画像のサムネイル作成をWordPressからCloudflareにオフロードするのに役立ちます。
- CPU 使用率を節約し、追加の CPU パワーを必要とせずに、より多くのユーザーがサイトにアクセスできるようにします。
- サムネイルをサーバーに保存する必要がないため、ディスク容量が削減されます。
- 画像リンクに何かを追加してサイズを変更することで機能します。
たとえば、画像の URL のサイズを変更する場合: 「https://example.com/wp-content/uploads/2024/09/sampleimage.jpg」
サイズ変更後は次のように変更されます: https://example.com/cdn-cgi/image/fit=contain,format=auto,metadata=none,onerror=redirect,quality=70,width=720/ https://yourdomain.com/wp-content/uploads/2024/09/sampleimage.jpg “
3.2 自動縮小
この特定の Cloudflare 機能は、キャッシュされた CSS、JSS、HTML を縮小するのに非常に役立ちます。 アセットを縮小するために WP Rocket などのサードパーティ WordPress プラグインを使用していない場合は、Cloudflare の Auto Minify 機能を使用することをお勧めします。
WPOven ユーザーには、この点でさらに利点があります。 Cloudflareの統合とは別に、WPOven独自のMinificationプラグインを使用し、ホスティングプランに無料でバンドルされている統合WP Rocketを有効にすることもできます。
3.3 クラウドフレアのポリッシュ
Cloudflareの洗練機能はプロプランユーザーのみが利用でき、WordPressサイトでサポートされている画像形式を自動的に圧縮します。
- Cloudflare Polishは、JPG、PNG、GIFなどの画像ファイルを自動的に圧縮します。
- Cloudflareのエッジで動作するため、WordPressサイトのサーバーの速度が低下することはありません。
- Polish は WEBP 形式もサポートしており、最適化された WEBP 画像を Chrome や Brave などの互換性のあるブラウザに提供します。
- 特に他の画像最適化プラグインを使用している場合、サーバーの CPU 使用率が削減されるため、WordPress サイトに役立ちます。
- ポーランド語に最適化されたイメージはサーバーに保存されず、WEBP バージョンをサーバーに保存する必要がないため、ディスク容量が節約されます。
3.4 ブロトリ圧縮
Brotli 圧縮は Gzip 圧縮に似ていますが、インターネット上での送信を高速化するためにファイルを小さくする異なるアルゴリズムに従っています。 Google によって開発され、Gzip よりも圧縮率が優れています。
Brotli の欠点は、広くサポートされていないことですが、だからといって有効にしてはいけないというわけではありません。 ブラウザがサポートしていない場合は、自動的に Gzip 圧縮に切り替わります。
3.5 ロケットローダー
Rocket Loader は、JavaScript ファイルをよりスマートにロードすることで Web サイトを高速化するのに役立つ Cloudflare のもう 1 つの機能です。
- これにより、ページのレンダリングをブロックするコンテンツが減少し、ページの読み込み時間が短縮されます。
- 1 つの JavaScript ファイルがロードされるのを待ってから次のファイルに移動するのではなく、すべての JavaScript ファイルを一度にロードします。
- これは、すべての JavaScript の読み込みが完了するまで待つ必要がないため、ページをより速く読み込むことができることを意味します。
- これは、派手な機能のために JavaScript を大量に使用する Web サイトで特に便利です。
- Rocket Loader を有効にしてサイトをテストし、ページ速度が向上するかどうかを確認することをお勧めします。
3.6 ミラージュ
Mirage は、主にモバイルと低速接続に焦点を当てた Cloudflare のもう 1 つのプロ機能です。 仕組みは次のとおりです。
- Web ページの読み込み中、Mirage は最初にぼやけた画像を表示し、ページが読み込まれた後、ぼやけた画像を元の画像に置き換えます。
- また、複数の画像を 1 つのリクエストに含めることもできるため、ページの読み込みが速くなります。
- Web サイトに多くの画像があり、多くの人が携帯電話でアクセスする場合、Mirage を使用するとサイトの読み込みが速くなります。
3.7 HTTP/2 の優先順位付けの強化
拡張 HTTP/2 優先順位付けは、Cloudflare Pro ユーザーのみが利用できる機能です。
- HTTP/2 は、リソースを同時に読み込むことで Web サイトを高速化しました。
- Cloudflareの強化されたHTTP/2優先順位付けは、ウェブサイトのHTMLを分析して、最速のパフォーマンスを得るために最初にロードするリソースを決定することにより、それを超えています。
- Cloudflare によると、この機能によりページの読み込み時間を最大 50% 短縮できるとのことです。
4. キャッシュ設定
キャッシュを改善するには、次の設定に従います。

- 「キャッシュ」メニューに移動し、「構成」をクリックします。
- Google のルールに従うために、「ブラウザ キャッシュ TTL」を少なくとも 1 か月に設定してください。
- キャッシュ時間が長いということは、Cloudflare を使用してより多くの訪問者がサイトをすぐに閲覧できることを意味します。
- Cloudflare APO を使用している場合、キャッシュ時間を長く保つことでサイトをさらに高速化できます。
4.1 クローラーヒントを有効にする

- 「クローラー ヒント」をオンにすると、検索エンジンの動作が向上し、サーバーの負荷が軽減されます。
4.2 常時オンラインを有効にする

- 「常にオンライン」では、サイトがダウンした場合に備えてサイトのコピーが保存されますが、オンライン ストアには適さない可能性があります。
4.3 キャッシュレベル
「キャッシュレベル」は「標準」のままにすることをお勧めします。
4.4 スマート階層型キャッシュ トポロジの有効化

- 「スマート階層型キャッシュ トポロジ」を使用して帯域幅を節約し、サイトの運営コストを安くします。
4.5 キャッシュ予約を有効にする

- 「キャッシュ予約」を使用して、サイトの一部をキャッシュに長期間保持することもできますが、費用がかかる場合があり、画像などの特定の種類のファイルに対してのみ機能します。
5. Cloudflareを使用したWordPressファイアウォール
Cloudflare を使用するもう 1 つの利点は、その Web アプリケーション ファイアウォールがすべての Web サイトで提供されることです。
ほとんどの攻撃から Web サイトを保護するには、少なくとも 2 つのルールに従うことをお勧めします。 例: DDoS、ブルート フォースなど。
すでに Web サイトに強力なパスワードを使用している場合でも、心配する必要はありません。 ただし、ボットや攻撃者からのリクエストが大量にあると、CPU に損害を与えたり、リソースを過剰に使用したりする可能性があります。
ルールを始めるには、まず IP アドレスをホワイトリストに登録する必要があります。 これを行うには、Cloudflareパネルに移動し、「ファイアウォール」タブをクリックし、ツールをクリックします。
[ツール] セクションで、IP を追加できます (パブリック IP を知るには、Google で「私の IP は何ですか」と検索します)。動的 IP をお持ちの場合は、さまざまな時点で割り当てられた IP と同様の IP 範囲を入力できます。

次に、標準の WordPress サイトでよく見られる最も一般的な問題に対処するために、いくつかのページ ルールを追加します。
1. wp-login.php へのアクセスをブロックします。このページはサイトへのログインに使用され、攻撃者が総当たり攻撃を実行するための一般的なエンドポイントであるため、ブラウザが使用されているかどうかを確認するルールを作成します。また、追加のチェックを実行して、ボットではないことを確認します。
以下のようなページルールを作成し、デプロイします –

このルールの追加を避けるために、プラグインを使用して WordPress ログインを非表示にすることもできます。
2. また、xmlrpc.php へのアクセスも制限します。そのため、サイトへのブルート フォース攻撃にも使用されません。ファイアウォール ルールの下のファイアウォールで次のルールを作成できます。JetPack 以外のすべてのアクセスをブロックします (あなたはこのページで JetPack IP 範囲のリストを見つけることができます)

以下の式を使用してルールを構築することもできます。
1 |
( http . request . uri contains "xmlrpc.php" and not ip . src in { 192.0.64.0 / 24 192.0.65.0 / 24 192.0.66.0 / 24 192.0.67.0 / 24 192.0.68.0 / 24 192.0.69.0 / 24 192.0.70.0 / 24 192.0.71.0 / 24 192.0.72.0 / 24 192.0.73.0 / 24 192.0.74.0 / 24 192.0.75.0 / 24 192.0.76.0 / 24 192.0.77.0 / 24 192.0.78.0 / 24 192.0.79.0 / 24 192.0.80.0 / 24 192.0.81.0 / 24 192.0.82.0 / 24 192.0.83.0 / 24 192.0.84.0 / 24 192.0.85.0 / 24 192.0.86.0 / 24 192.0.87.0 / 24 192.0.88.0 / 24 192.0.89.0 / 24 192.0.90.0 / 24 192.0.91.0 / 24 192.0.92.0 / 24 192.0.93.0 / 24 192.0.94.0 / 24 192.0.95.0 / 24 192.0.96.0 / 24 192.0.97.0 / 24 192.0.98.0 / 24 192.0.99.0 / 24 192.0.100.0 / 24 192.0.101.0 / 24 192.0.102.0 / 24 192.0.103.0 / 24 192.0.104.0 / 24 192.0.105.0 / 24 192.0.106.0 / 24 192.0.107.0 / 24 192.0.108.0 / 24 192.0.109.0 / 24 192.0.110.0 / 24 192.0.111.0 / 24 192.0.112.0 / 24 192.0.113.0 / 24 192.0.114.0 / 24 192.0.115.0 / 24 192.0.116.0 / 24 192.0.117.0 / 24 192.0.118.0 / 24 192.0.119.0 / 24 192.0.120.0 / 24 192.0.121.0 / 24 192.0.122.0 / 24 192.0.123.0 / 24 192.0.124.0 / 24 192.0.125.0 / 24 192.0.126.0 / 24 192.0.127.0 / 24 } ) |
これら 2 つの基本ルールを使用すると、WordPress が直面する最も一般的なブルート フォースや自動化された脅威をブロックできます。

6. Cloudflareのネットワーク設定
Cloudflareの「ネットワーク」設定で、HTTP/2、HTTP/3 (QUICあり)、および0-RTT接続再開をオンにします。

- HTTP/2 は複数の処理を同時に実行することで処理を高速化しますが、HTTP/3 は QUIC と呼ばれる新しいデータ送信方法を使用してさらに高速化します。
- HTTP/3 を使用すると、より適切なセットアップが使用されるため、サイトはより速く Cloudflare に接続します。
- また、Cloudflare の 0-RTT 接続再開により、以前にサイトにアクセスしたことがあるユーザーのサイトの読み込みが速くなります。
最適な結果を得るためにCloudflare WordPressプラグイン設定を構成するにはどうすればよいですか?
Cloudflare を使用して静的アセット、または動的に生成されたアセットをキャッシュするため、Cloudflare が提供する WordPress プラグインをインストールするのが最善です。 これにより、サイトを更新した場合に Cloudflare キャッシュを簡単にクリアできます。また、提供されている自動プラットフォーム最適化 (APO) 機能を使用している場合にも必要になります。
インストールを開始するのは非常に簡単です。WordPress の [新しいプラグインの追加] セクションにアクセスして Cloudflare を検索します。プラグインが見つかったら、[インストール] をクリックしてプラグインをアクティブ化するだけです。プラグインに必要な設定は、プラグインを接続することだけです。 Cloudflare を使用して、サイトから変更について通知できるようにします。
サイトをCloudflareプラグインに接続するには、グローバルAPIを共有したくないため、トークンメソッドを使用します。そのため、次の設定を使用してカスタムトークンを作成します。

トークンが作成されたら、トークンをコピーしてプラグインをアクティブにすると、次のページが表示されます –

ほとんどの設定は、最適に使用できるようにすでに構成されています。
完全なステップバイステップをお読みになるには: Cloudflare を WordPress サイトにインストールする方法?
1. Cloudflare 自動プラットフォーム最適化 (APO)
Cloudflareを使用する場合、デフォルトではWebサイトの静的アセットのみをキャッシュします。 ただし、必要に応じて Web ページをキャッシュすることもできます。 唯一の問題は、Web サイトを更新して操作するには追加の手順を実行する必要があることです。
ただし、Cloudflare WordPress プラグインの使用を選択した場合、この問題も解決できます。 プラグインを使用するとすべてが自動化され、余分な手順が削減されます。
どのように機能するかを見てみましょう。
APO を使用すると、ページを含むすべての Web サイト評価がエッジ ノードに移動されます。 これにより、Web サイトの TTFP が全体的に削減され、全体的なユーザー エクスペリエンスが向上します。
この機能は、無料プランの 5 ドルの有料アドオンとして利用でき、追加の Cloudflare WordPress プラグインをサイトに追加する必要があります。
これは有料アドオンであるため、現時点ではここでは取り上げません。
2. アルゴとレールガン
Argo と Railgun は、cloudflare が提供する 2 つのパフォーマンス強化機能です。
アルゴ
- これは、Web サイトのトラフィックが最速のルートを見つけるのに役立つ Cloudflare の追加サービスです。
- Argoを使用すると、訪問者はCloudflareのネットワーク内の遅いスポットを回避し、サイトの読み込みを高速化します。
- テストでは、Argo によりページの読み込みが 20 ~ 30% 速くなることを示しています。
- これは、Webサイトの速度をさらに向上させたいCloudflareユーザーにとって素晴らしい機能です。
レールガン
Railgun は、Web サイトのコンテンツが訪問者に届くまでの時間を短縮する、もう 1 つの Cloudflare ツールです。 仕組みは次のとおりです。
- これにより、サーバーとCloudflareのサーバーの間に安全なパスが作成されます。
- Railgun は、リクエスト間で変更されるサイトの部分のみを送信するため、読み込みが速くなります。
- この機能は上位プランまたはプロ プランに限定されており、サーバー上に追加のソフトウェアが必要です。
- ほとんどの Web サイトでは Railgun は必要ありませんが、忙しい e コマース ストアやキャッシュできないトラフィックの多い Web サイトでは貴重です。
まとめ
Cloudflare 設定を適切に構成する方法と、WordPress サイトの公式設定を理解することで、Web サイトの速度、セキュリティ、パフォーマンスを向上させることができます。
Cloudflare は、経営するビジネスの種類に関係なく、WordPress サイトに起こり得る最高のことの 1 つです。 それはあなたのウェブサイトに多大な価値を加える恩恵となる可能性があります。 WordPress および WordPress が管理する最速のホスティングと組み合わせれば、長期的には Web サイトの成功に勝るものはありません。

よくある質問
WordPress で Cloudflare を使用する必要がありますか?
はい、通常、WordPress で Cloudflare を使用することが推奨されます。 コンテンツ配信ネットワーク (CDN)、セキュリティ保護、DNS 管理などの機能を通じて、サイトのパフォーマンス、セキュリティ、信頼性を向上させることができます。 さらに、Cloudflare は基本機能を備えた無料プランを提供しており、すべての WordPress ユーザーがアクセスできます。
Cloudflare を使用して WordPress を保護するにはどうすればよいですか?
Cloudflareは、セキュリティとコンテンツ配信ネットワーク(CDN)を提供することで最もよく知られています。 したがって、WordPress サイトで Cloudflare を有効にすると、DDoS 攻撃やマルウェア攻撃などのさまざまな脅威から保護できます。ただし、それは、ユーザー側で何もアクションを起こすべきではないという意味ではありません。 また、安全で信頼できる専用サーバーで Web サイトをホストする必要があります。
CloudflareはSEOを改善しますか?
はい、Cloudflare は、ページの読み込み時間を短縮し、Web サイトのセキュリティを強化し、ダウンタイムを削減し、SSL 暗号化を提供することで、間接的に SEO を改善できます。 これらの要素は、ユーザー エクスペリエンスの向上と検索エンジンからの信頼の向上に貢献し、SEO ランキングの向上につながる可能性があります。

私は WPOven INC の共同創設者で、現在カナダのバンクーバーに住んでいます。 私の興味は、Web 開発から製品開発、クライアント プロジェクトまで多岐にわたります。 私は Web 開発、WordPress、起業家精神にも興味があります。