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

CloudFlareを無料で利用する時に最適な設定方法 Cloudflare(クラウドフレア)
この記事は約7分で読めます。

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

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

スポンサーリンク

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

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

CloudFlareの設定項目一覧

CloudFlareの設定項目一覧

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

SSL/TLS

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

概要

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

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

フルを選択した時に暗号化される通信
  1. *エンドユーザからCloudFlare間
    *サイト利用者を指します。
  2. CloudFlareから*オリジンサーバ間
    *みなさんが利用しているレンタルサーバ等を指します。
ロボ
ロボ

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

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

エッジ証明書

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

エッジ証明書の項目は「Cloudflareのクイックスタート」を利用していた場合、既に最適化されている可能性があります。
  • 常にHTTPSを使用:「オン」に設定します。
    httpへのリクエストをすべてHTTPSにリダイレクトする設定です。
  • HTTPS の自動リライト:「*オン」に設定します。
    *HTMLをリアルタイムで書き換える機能の為、Pagespeed insight等のスコアが下がる可能性有。HTTPのサイトへのリンクを貼らないように徹底できるのであれば「オフ」にします。

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

Speed

ここでは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を表示できます。
【*Rocket Loader™について
重要

Rocket Loader™はJavaScriptの読み込みを後回しにすることでサイトを高速化する機能のため、利用している環境によってはページが崩れたり、一部が表示されなくなったりすることがあります。

そのため、この機能は「オン」にした後にすぐサイトの表示を確認し、表示に問題がない場合のみ「オン」にすることをオススメします。

ルール

ページルール(Page Rules)の設定は「サイトの高速化・セキュリティ」に大きな影響があり、重要な項目ですので、別の記事に詳細をまとめました

私

下記の記事に記載した通りに設定していただくと、情報漏洩のリスクがなくなり、更にサイトを高速化できます。

WordPressサイトでCloudflareを使う時に最適なページルール設定
この記事では「WordPressサイト」で「Cloudflareを使う時」に【最適なページルール(Page Rules)設定】を書いています。

Scrape Shield

Scrape Shieldの項目では【メール アドレス暗号化】のみ「オフ」に設定しています。

これはコメントなどで書き込まれたメールアドレスを [email protected] という表示に自動的に変更することで、スパムなどに利用されることを防ぐ機能です。

「@」でメールアドレスを判別しているため、Twitterアカウント(@tanipoyo29)等にも機能が働いてしまいますので「オフ」としました。

スポンサーリンク

CloudFlareの最適な設定方法 まとめ

今回はCloudFlareを無料で利用する時に最適な設定方法を紹介しました。

「この記事で紹介した設定」と「WordPressサイトでCloudflareを使う時に最適なページルール設定」を行うことで、CloudFlareを無料で最大限活用できます。

私

設定後2ヶ月程経ちましたが、エラーなどもなくキャッシュも正常に機能しています。なお、この記事で記載していないCloudFlareの項目は、全て初期設定のまま利用しています。

毛玉
毛玉

【Google Analyticsのサイトの速度】を確認してみると、CloudFlare導入前と比べて「平均読み込み時間」が約2秒早くなったにゃ!ちなみにサーバーは「ConoHa WING」を使っているにゃ!

コメント

タイトルとURLをコピーしました