【Cloudflare 設定 編】Webサイトの表示速度を高速化

前回のフェーズ「【SSL化 編】ドメインをhttpからhttpsへ設定」でドメインをhttps 化を行いました。

今回は、Cloudflare を利用してWebサイトの表示を高速化したいと思います。
また、次のパートでGoogle Cloud Storage をドメインで使用するときにもCloudflareを利用します。

WordPressで検索すると出てくるCloudflare とは

Cloudflare は、世界中のデータセンターとグローバルネットワークを利用してサーバーにキャッシュさせるCDN （Content Delivery Network）サービスです。
CDN は、インターネット上にキャッシュ サーバーを分散的に配置することでユーザーに近い経路にあるキャッシュ サーバーからWebコンテンツを配信することでWebサーバーのレスポンスを改善する=読み込みを高速化する事が行えます。

詳しくはこちらの記事を御覧ください。

超空洞

Cloudflareについてざっくり調べてみた - 2018年7月 - 超空洞

https://itaoyuta.hatenablog.com/entry/2018/07/06/225951

CDNサービス*1についてちゃんと調べたことがないのと、Cloudflareが気になっていたのでざっくりですが調べて見ました。 CDNのよいところ CDNはContent Delivery Networkの略語で、ウェブコンテンツ配信の最適化されたネットワークを指します。 有名なプロバイダーは ...

東京上野のWeb制作会社LIG

 

27 tweets

19 users

無料でサイトを大幅に高速化! CDNを知らない人のためのCloudFlare入門 | 東京上野...

https://liginc.co.jp/362476

こんにちは。フロントエンドエンジニアのほりでーです。 CDN（シー・ディー・エヌ）という種類のWebのサービスをご存知でしょうか？　インフラの知識がある方にとってはお馴染ですが、デザインやフロントエンド中心の方にはあまり馴染みのないサービスかもしれません...

Cloudflare にドメインを登録

利用するドメインの登録を行います。

「+Add a Site」をクリックします。

ドメイン を入力し「+Add site」をクリックします。

Free を選択し、「Confirm Plan」をクリックします。

Replace with Cloudflare’s nameservers のネームサーバーをGoogle Domains のネームサーバー に入力します。

Google Domains のネームサーバー変更

Google Domains のネームサーバーに先ほどのCloudflare のネームサーバー に変更します。

「カスタム ネームサーバーを使用する」を選択し、Cloudflare のネームサーバーに変更し、「保存」をクリックします

Cloudflare で接続を確認

Cloudflare サイト にアクセスすると最初に登録したサイト名が表示されており、ステータスが「Active」に変更されていればネームサーバー の変更が完了しており、Cloudflare と接続ができていることになります。

実際に反映されるまでGoogle Domains より時間がかかります。
体感的に10～30分ぐらいでした。

ドメイン 設定を行う

サブドメイン もCloudflare に登録する場合は、「+Add record」をクリックします。

各項目を入力し、「Save」をクリックします。
Cloudflare にサブドメインが登録完了しました。

Cloudflare の各項目を設定

http アクセスをhttps リダイレクトへ

まだ、サイトがSSL化していなくても後ほどSSL化を行うのでCloudflare を使って常時SSLのためにリダイレクト設定を行います。

上部にある「SSL/TLS」を選択し、タブ「Edge Certificates」を選択します。

Always Use HTTPS を「On」に変更します。

「https://～～～/」にアクセスされても「https://～～～.com/」にリダイレクトされます。

※『【SSL化 編】ドメインをhttpからhttpsへ設定』でhttp をhttps にリダイレクトさせる 設定を行っているのでこの設定はしなくても良いです。

Page Rules の作成

デフォルトの設定のままでは、WordPress 管理コンソールも含むすべてのページがキャッシュされてしまいます。

管理コンソールやプレビュー表示がキャッシュの除外にする設定を行います。
Page Rules を使用して下記の内容に適用したルールを作成します。

• WordPress 管理コンソール（管理画面）をキャッシュしない
• WordPress 管理コンソールを除いて全てのページをキャッシュする

Free Plan ではルール 3つまでは無料になっています。

Cloudflare のルール設定は公式ページで解説されています。

Cloudflareヘルプセンター

Cloudflareのページルールを理解した上で設定する（ページルールチュートリアル）

https://support.cloudflare.com/hc/ja/articles/218411427-Cloudflare%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%AB%E3%83%BC%E3%83%AB%E3%82%92%E7%90%86%E8%A7%A3%E3%81%97%E3%81%9F%E4%B8%8A%E3%81%A7%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B-%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%AB%E3%83%BC%E3%83%AB%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB-

Page Rulesがリクエストが定義されたURLパターンの一つにリクエストが一致する時はいつでも特定のアクションがトリガーされます。ページルールの作成方法と利用できる様々な設定について説明します。本記事は以前、 Page Rules Tutorial と Is There a Page Rules Tu...

上部の「Page Rules」を選択し、「Create Page Rule」をクリックします。

Page Rules の「Create Page Rules」をクリックします。

無料枠 3つのルールを使って次の条件を設定します。
優先順位は1から優先されます。

1. /wp-admin/ 以下（管理コンソール）はキャッシュしない。
2. preview=true（ページプレビュー）はキャッシュしない。
3. 1と2 を除いて全てのページをキャッシュを8時間は保管する。（8時間後にキャッシュを行われる）

ルール1：/wp-admin/ 以下はキャッシュしない。

/wp-admin/ 以下（管理者ページ）はキャッシュしないようにBypass 設定を行います。

各項目を変更し、「Save and Deploy」をクリックします。

• If the URL matches：*ドメイン/wp-admin/* を入力。
• Then the settings are：Cache Level を選択し、Bypass を選択。
  • ＋Add a Setting をクリックし、Disable Performance を選択。

ルール2：preview=true はキャッシュしない。

preview=true（ページプレビュー）をキャッシュしないようにBypass 設定を行います。

各項目を変更し、「Save and Deploy」をクリックします。

• If the URL matches：*ドメイン/*preview=true* を入力。
• Then the settings are：Cache Level を選択し、Bypass を選択。
  • ＋Add a Setting をクリックし、Disable Performance を選択。

ルール3：1と2 を除いて全てのページをキャッシュを8時間は保管する。

全てのページをキャッシュし、8時間は保管をする設定を行います。
各項目を変更し、「Save and Deploy」をクリックします。

• If the URL matches：*ドメイン/ を入力。
• Then the settings are：Cache Level を選択し、Cache Everything を選択。
  • ＋Add a Setting をクリックし、Edge Cache TTL を選択し、保持される期間 を選択。

作成したルール の優先順位を次のように設定します。

1. /wp-admin/ 以下（管理者ページ）はキャッシュしない。
2. preview=true（ページプレビュー）はキャッシュしない。
3. 1と2 を除いて全てのページをキャッシュを8時間 保管する。（8時間後にキャッシュを行われる）

キャッシュのルール作成は完了です。

まとめ

PageSpeed Insights を使ってCloudflare 導入前と導入後（1日後）のスコアを計測していみました。（スクリーンショットは撮り忘れ…）
導入前後は同じ状態で、httpsでの測定結果になります。

• 導入前
  • モバイル：64
  • PC：83
• 導入後：
  • モバイル：70
  • PC：91

CDNにより、パフォーマンスと速度が向上したことでスコアが上がってのかなと思います。

運用上で邪魔と思ったのが、何か変更した後に公開上で確認したいと思ってもキャッシュにより直ぐに確認ができないのは面倒だな とは感じました。確認するにはCloudflare でDevelopment Mode をOnにするか、Purge Cache を行うしかありません。
しかし、Google Cloud Storage をドメインで使用したいときに、httpになるのをhttp化してくれるのはかなり大きいと思います。

次はVN インスタンスに保存しているメディアをGoogle Cloud Storage に移行またはバックアップを行います。

GoogleにCloudする庭

2019.11.19

【WP-Stateless 設定 編】WordPres の画像をGoogle Clould Storage へ移行/バック...

https://googlecloud.4watcher365.dev/google-cloud/google-cloud-storage_wordpress/

前回は「Let’s Encrypt でSSL 証明書を発行とリダイレクト設定」を行いました。今回は、WordPress のメディアをGoogle Cloud Storage（GCS）に格納/バックアップの設定を行います。現在のWordPress は、Google Compute Engine（GCE） で構築したため、WordPress でア...

全記事

1. 【はじめ 編】無料を目指してGCPでWordPress 環境構築
2. 【WordPress構築 編】Google Cloud Platform でWordPress をクリック操作のみでデプロイ
3. 【WordPresss設定 編】WordPressのアップロード上限を変更&Bitnami バナーの削除
4. 【https化 編】SSL 証明書の発行とリダイレクトの設定
5. 今ココ→【Cloudflare 設定 編】Webサイトの表示速度を高速化
6. 【WP-Stateless 設定 編】WordPres のメディアをGoogle Clould Storage へ移行/バックアップ
7. 【振り返り 編】GCE でWordPressを構築 with SSL化
8. 【支払い 編】WordPress×GCPでの2020年1月の支払い料金