CloudFlareを無料で利用する時に最適な設定方法

この記事ではCloudFlareを無料で利用する時に最適な設定方法を書いています。

前回の「Cloudflareの登録方法」では、無料登録から実際に機能させるところまでを紹介しましたが、今回はより効果的にCloudFlareを利用する為の設定方法を解説します。

早速ですが、CloudFlareを無料で利用する時に最適な設定方法を項目ごとに紹介していきます。

CloudFlareの設定項目一覧

CloudFlareには上画像のように様々な設定項目があり、多くは初期設定のままで利用できます。今回は初期設定から変更することで、パフォーマンスが向上する項目だけを記載しています。

ここではSSL/TLSの項目での設定方法を書いています。

SSL/TLSの「概要」の項目では基本的に【フル】を選択します。

フルに設定することで、下記の通信が暗号化（httpsの通信）されます。

【フルを選択した時に暗号化される通信】

ロボ

エンドユーザ→CloudFlare→オリジンサーバ間、つまり全ての通信が暗号化される設定です。

【他の設定ではない理由】
（知りたい人だけご覧ください）

オフ（保護なし）：SSLをオフにすると、HTTPSが無効になり、サイト利用者に「このWebサイトは安全ではありません」というメッセージが表示されてしまいます。
フレキシブル：暗号化されるのは「エンドユーザからCloudFlare間」のみとなりますので「CloudFlareからオリジンサーバ間」はノーガードになってしまいます。
※もともとhttpで運営しているサイトのみフレキシブルを選択します。
フル (厳密)：この設定を使用するためには、オリジンサーバに証明書をインストールする必要があります。利用しているオリジンサーバ（レンタルサーバ）によっては証明書のインストールができないこともありますので、今回は選択していません。
※オリジンサーバに証明書をインストールできる場合はフル (厳密)を選択します。

ここでは下記2つの項目を確認してください。

エッジ証明書の項目は「Cloudflareのクイックスタート」を利用していた場合、既に最適化されている可能性があります。

常にHTTPSを使用：「オン」に設定します。
httpへのリクエストをすべてHTTPSにリダイレクトする設定です。
HTTPS の自動リライト：「*オン」に設定します。
*HTMLをリアルタイムで書き換える機能の為、Pagespeed insight等のスコアが下がる可能性有。HTTPのサイトへのリンクを貼らないように徹底できるのであれば「オフ」にします。

クライアント証明書・オリジンサーバー・カスタムホスト名の項目は使用しません。「フル (厳密)」を選択する場合のみ、オリジンサーバーの項目からオリジン証明書を作成できます。

ここではSpeedの項目での設定方法を書いています。

Speedの「概要」の項目はサイトの速度を測定する時に使用します。また「Browser Insights」は使用しません。

Speedの項目では「最適化」のみを編集します。下記の通りに設定してください。

Auto Minify（JavaScript・CSS・HTML）：全て「*オン」に設定。
*ソースコードの縮小・最適化をテーマの設定やWordPressのプラグインで行っていない場合。
*cocoonの高速化やAutoptimize等で同様の機能をオンにしている場合は「オフ」にします。
Brotli（ブロトリ）：「オン」に設定。
Googleが開発した圧縮方式でGzip以上にコンテンツを圧縮して、サイト表示を高速化することができますが、劇的な高速化に繋がるということはないです。「オフ」にする特別な理由がなければ「オン」で良いと思います。
*Rocket Loader™：「オン」に設定。
Javascriptを非同期にロードし、ページコンテンツのレンダリングを妨げないようにすることでペイント時間（表示速度）を改善する機能。（JavaScriptの読み込みを後回しにする）
AMP Real URL：「オフ」に設定。
私はAMPを利用していませんので「オフ」にしていますが「オン」にすることでAMP ページに、従来のGoogleAMPのキャッシュURLではなく、実際のサイトURLを表示できます。