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

はじめに

前パートでドメインをhttps化 したことでWebサイトとして運用は十分に可能のため、ここからのパートは行わなくても大丈夫です。

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


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

Cloudflare は、Cloudflareが契約している世界194か所のデータセンターとグローバルネットワークを利用してサーバーにキャッシュさせるCDN (Content Delivery Network)サービスです。
CDN は、インターネット上にキャッシュ サーバーを分散的に配置することでユーザーに近い経路にあるキャッシュ サーバーからWebコンテンツを配信することでWebサーバーのレスポンスを改善する=読み込みを高速化する事が行えます。
デメリットは、Webサイトを変更してもユーザーがキャッシュ サーバーから変更前の情報を読んでいるため、すぐに反映させれないことです。

CDNサービス*1についてちゃんと調べたことがないのと、Cloudflareが気になっていたのでざっくりですが調べて見ました。 CDNのよいところ CDNはContent Delivery Networkの略語で、ウェブコンテンツ配信の最適化されたネットワークを指します。 有名なプロバイダーは ...
Cloudflareについてざっくり調べてみた - 2018年7月 - 超空洞 - 超空洞
こんにちは。フロントエンドエンジニアのほりでーです。 CDN(シー・ディー・エヌ)という種類のWebのサービスをご存知でしょうか? インフラの知識がある方にとってはお馴染ですが、デザインやフロントエンド中心の方にはあまり馴染みのないサービスかもしれません...
無料でサイトを大幅に高速化! CDNを知らない人のためのCloudFlare入門 | 東京上野... - 東京上野のWeb制作会社LIG

Cloudflare アカウント登録の説明はここでは省きます。

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」に変更します。

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

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

Page Rules の作成

何も設定を行っていないため、すべてのページがキャッシュされてしまい、管理画面での操作やプレビュー表示がキャッシュされた表示になってしまうので除外する設定を行います。

Page Rules を使用して「WordPress の管理者ページをキャッシュしない」「WordPress 管理者ページを除いて全てのページをキャッシュする」ルールを作成します。
Free Plan ではルール 3つまでは無料になっています。

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

Page Rules trigger certain actions whenever a request matches one of the URL patterns you define. Learn to create and edit page rules and understand the different settings available.This article f...
Understanding and Configuring Cloudflare Page Rules (Page Rules Tutorial) - Cloudflare Support

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

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

条件を3つ以上する場合はオプション有償になります。

無料枠 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 に移行/バックアップを行います。

2019年11月19日(火) に公開予定です。

はじめにアップロードしたメディア ファイルは、Google Compute Engine のVMインスタンス に格納されます。WordPress をクリック操作のみでデプロイ で設定した通りであれば、インスタンスが内蔵するHDD容量は「30 GB」になっております。WordPress 本体  = VMインス...
【WP-Stateless 設定 編】メディアをGoogle Clould Storage へ移行/バックアップ - GoogleにCloudする庭

その他カテゴリの最新記事