簡単!CloudFlareの設定方法

現在、ウェブサイトの速度は検索で上位のランキングを得るための重要な要素です。

WordPressブログの速度を向上させる要素はたくさんありますが、その中でもCDNはWordPressブログの高速化に役立つ可能性のある要因の1つです。

高速化可能な理由としては大きくは以下の2つです。

  1. コンテンツのキャッシュ化、最適化
  2. 閲覧者に近い分散サーバからの配信

CloudFlareでの高速化の記事についてあまり分かりやすくまとめたものがなかったため、本記事で備忘録の意味でもまとめておきます。

Cloudflareとは?

Cloudflare(クラウドフレア)とは、CDN(コンテンツ・デリバリー・ネットワーク)サービスを運営しているアメリカの企業です。

無料で使えるCDNサービスを提供している企業はほとんどなく、その中でCloudflareはオンリーワンな企業であると言えます。

一方でアメリカの企業が運営しているサービスなので、インターフェースがほとんど全て英語となっています。

英語が苦手な方でも設定可能なように、今回も画像付きで説明したいと思います。

CDNサービスとは?

CDNサービスとは、CloudFlareが保有している複数サーバーに、ブログ等を解説している自身のサーバー上のコンテンツの中でキャッシュ可能なファイル(画像やCSS、JS等)をキャッシュします。

そしてネットワーク上の近いCloudFlareの分散サーバからキャッシュされたデータを表示し、自身のサーバーの負荷を軽減し、高速に表示するサービスです。

Cloudflareのサーバは世界中の200の都市、90か国に分散されて配置されており、ネットワーク上の近い場所のサーバから表示されます。

Cloudflare サーバーロケーション
出典:Data Center Map | CDN Pop Locations Map | Cloudflare

Cloudflare・Xserverの設定方法

ではCloudflareの設定方法を説明していきたいと思います。事前情報として私の環境について記載します。

設定環境

私の設定環境はXserverでWP Super Cacheの環境となっています。ドメインのネームサーバ設定等の箇所については自身のドメインの取得環境に合わせて、読み替えていただければと思います。

また私はCache Enablerですが、W3 Total CacheのプラグインはCloudflareと統合されており、使いやすくなっています。キャッシュプラグインを入れていなければこちらのプラグインを採用してみてください。

  1. Xserver
  2. WordPress Newspaper 10のテーマ
  3. Cache Enabler

Cloudflareの設定方法

Cloudflareの大まかな設定の流れは以下のようになっています。

  1. Cloudflareへのサインアップ
  2. Cloudflareの設定
  3. Xserverのドメイン画面でのネームサーバ変更
  4. Cloudflareのネームサーバ反映確認
  5. Cloudflareの個別の詳細設定
  6. WordPressプラグインの追加

Cloudflareへのサインアップと設定方法

下部のサインアップをクリックします。

Cloudflare サインイン方法1

EmailアドレスとPasswordの入力を行い、Create Accountをクリックします。

Cloudflare サインイン方法2

自身のWEBサイトのドメインを入力します。私の場合は「umilcl.com」となります。Add siteをクリックします。

Cloudflare サインイン方法3

契約プランを選択します。特に希望がなければFreeプランを選択し、Confirm planをクリックします。

Cloudflare 初期設定方法1

設定したWEBサイトのDNSに関する情報を自動で収集し、設定してくれる。Continueをクリックする。

Cloudflare 初期設定方法2

ネームサーバの変更を行う。ここから自身のドメインを取得したサイトにてドメインのネームサーバの変更を行う。

Cloudflare 初期設定方法3

ネームサーバの変更

Xserverのドメインパネルをクリックする。

Cloudflare 初期設定方法4

ドメインパネルのネームサーバー情報の設定変更をクリックする。

Cloudflare 初期設定方法5

元々の5つのネームサーバは削除し、先ほどのCloudflareの2つのネームサーバーを入力し、変更を行う。

Cloudflare 初期設定方法6

Cloudflareのネームサーバ反映確認

ネームサーバの変更完了後、先ほどの画面に戻り、Done, check nameserversをクリックし、設定反映を確認する。問題なければsuccessと表示されるが、反映に少し時間がかかります。時間をおいて再度アクセスしてみてください。

Cloudflare 初期設定方法3

Cloudflareの個別の詳細設定方法

ここまででCloudflareの初期設定は終わりましたが、速度向上のための最適設定にはいくつか設定を行う必要があります。

設定を行う項目は以下の5つです。それぞれ以下の項で説明します。

  1. SSL/TLS
  2. Speed
  3. Caching
  4. ページ ルール
  5. ネットワーク

SSL/TLS設定

SSL/TLSでは基本的にはhttpsの通信を行うため、「お客様のSSL/TLS暗号化モードフル」の設定を「フル」にする。

Cloudflare SSL/TLS設定

Speed設定

Speedの「最適化」のタブにて以下の2つの設定を行う。

「Auto Minify」はソースコードの最適化を行ってくれるサービスです。他にWordPressのプラグインを入れていない場合は設定を行うと高速化可能ですが、私は「Autoptimize」の方が性能がよいため、Offとしています。

Cloudflare Speed設定2

以下が「Autoptimize」の紹介と設定方法となります。Cloudflareの設定を使用しない場合は参考にしてください。

「Rocket Loader」はをサードパーティのスクリプトも含め Javascript を非同期にロードし、ページ コンテンツのレンダリングを妨げないようにすることでペイント時間を改善する機能です。

表示されたページが崩れたり、描画されないことがなければ基本的にはOnとします。

Cloudflare Speed設定1

Caching設定

「キャッシュをパージ」はCSSの変更や、リライト等、WEBサイトに変更を加えた際にキャッシュを取り直す必要が出た場合に行います。

該当ページのみであれば、カスタムパージ、すべてやり直す場合はすべてパージを行います。

「キャッシュレベル」はスタンダードとします。またこれだけだとキャッシュ対象が絞られるため、すべてキャッシュさせるために「ページ ルール」にて追加設定を行います。

「ブラウザ キャッシュ TTL」はブラウザキャッシュの保存期間を設定します。私は.htaccessにて設定を行っているため、既存のヘッダーを優先としています。

設定していない方は「7日」、または「14日」程度に設定してください。

「開発者モード」は設定変更をすぐに確認可能なようにCloudflareのプロキシ機能をOffにして直接サーバのデータを閲覧可能にする機能です。開発中はOnにします。

Cloudflare Caching設定

ページ ルール設定

「ページ ルール」にてキャッシュされる対象を追加するため、キャッシュの設定を行います。

「ページ ルールを作成」から設定追加を行います。

wp-adminをかならず1の番号として、先に反映されるようにしてください。管理画面もキャッシュされてしまいます。

Cloudflare ページ ルール設定1

以下の設定のように、自身の「ドメイン/*」、または「*ドメイン/*」でルールを設定します。キャッシュレベルは「Cache Everything」とし、「7日」保存されるようにします。

Cloudflare ページ ルール設定2

また管理画面は対象外とするため、自身の「ドメイン/wp-admin/*」、または「*ドメイン/wp-admin/*」でルールを設定します。キャッシュレベルは「スキップ」とし、「パフォーマンスを無効にする」設定をします。

Cloudflare ページ ルール設定3

ネットワーク設定

「ネットワーク」では「HTTP/3(QUIC使用)」をOnにします。最新のHTTP/3を使用している場合に、高速化が可能となります。

またその他の「HTTP/2」、「IPv6互換性」はCloudflareが基本的にはこのプロトコルで動作しているため、変更不可となっています。

Cloudflare ネットワーク設定

WordPressプラグインの追加

WordPressのCloudflareプラグインを導入することで、キャッシュパージを更新と同時に行ってくれるようになるため、手間が省けおすすめです。

Cloudflare のインストール方法

  1. 「プラグイン」→「新規追加」から「Cloudflare」を検索し、「今すぐインストール」をクリックします。さらに「有効化」も行います。
Cloudflare プラグイン インストール方法

Cloudflareの連携設定

  1. CloudflareのWEBサイトにログインし、右上の「マイプロフィール」をクリックする。
  2. 「APIトークン」のタブを選択し、「トークンを作成する」をクリックする。
Cloudflare プラグイン API設定方法2
  1. 「Wordpress テンプレートを使用する」をクリックする。
Cloudflare プラグイン API設定方法3
  1. 特に変更は不要なので、次に進み、「APIトークン」を発行する。発行されたAPIトークンをWordoressのプラグインで入力し、連携する。
Cloudflare プラグイン API設定方法4
  1. WordPressの左の管理パネルの「設定」から「Cloudflare」をクリックし、設定画面を開く。
  2. 「have an account already? sign in here」から自分のCloudflareの登録したメールアドレスと先ほど発行したAPIトークンを入力し、連携する。
Cloudflare プラグイン API設定方法1
  1. Cloudflareと連携できたので、「Automatic Cache Management」をOnにしてサイトの更新を行った場合に自動的にキャッシュパージを行ってくれるように設定を行う。
Cloudflare プラグイン 設定方法

まとめ

以上でCloudflareの設定は完了となります。Cloudflare等のCDNサービスを活用すると分散サーバ+キャッシュ機能でアクセス者が増加してきた場合などに高速でデータ配信が可能となるため、おすすめです。

皆さんも活用してユーザービリティの向上を図ってみてください。

ブログ高速化に関するまとめ記事を作成しましたので、他の高速化方法については以下を参照してしてください。

UMilCLhttps://umilcl.com
兼業ブロガー。メインは大手製造業システム企画・設計・プロジェクト管理。工場のプロセス制御が主な業務。 得意分野: プロセス制御と統計、機械学習、画像処理、システム技術 保有資格: プロジェクトマネージャー、情報処理安全確保支援士、ネットワークスペシャリスト、応用情報処理、第一種衛生管理者

Similar Articles

Comments

返事を書く

コメントを入力してください!
ここに名前を入力してください

Follow US

1ファンいいね
6フォロワーフォロー
89フォロワーフォロー
4,242フォロワーフォロー
0SubscribersSubscribe

Archive

Most Popular

Synology DS220j DS220+の比較・レビュー

SynologyのエントリーモデルのDS220jとDS220+が発売され、2020年モデルもある程度そろってきました。 DS220はエントリークラス、DS220+はフラッグシップモデルとなりますが、違いはどこにあるか調査しました。

Synology DS220j レビュー【エントリーモデル後継機】

SynologyのエントリーモデルのDS218jの後継機が発売されたので、改善点と問題点をまとめています。 簡単にまとめると大変コスパのよいエントリーモデルのNASを踏襲した機能向上が行われており、上位機種とのスペックを要求する機能の差別化はそのままです。

Synology DS220+と他DS+シリーズ3種の比較・レビュー

SynologyのDS220+、DS420+、DS720+、DS920+の2ベイと4ベイのDS+シリーズが4機種の後継機が5月20日に発売されました。DS+シリーズ4種のスペックについて比較していますので、購入時の参考にしてみてください。

Windows10のHyper-V環境へのCentOS 8のインストール方法

この投稿では検索にてHyper-V環境へのCentOS8インストールを見に来てくれた方がいたので、CentOS7だけでなく、Windows 10上のHyper-V環境へのCentOS 8.1のインストール方法についても今回投稿します。

【2020年1月】子育て中ママが端末購入するならOPPO Reno A【購入後レビュー有】

妻のスマホ(Google Pixel 3a)が購入から5か月で子供の手により水没したので、防水性能の高い楽天モバイルより発売されているOppoのおすすめの最新機種「OPPO Reno A」の購入を検討した内容を紹介します。