無料CDN『Cloudflare』で WordPressブログサイトを高速化＆負荷軽減！
こんにちは！ アキオ（@hiroakio97）です。
先日、WordPressのブログサイトを無料で運営する方法について書きました。
参考記事：WordPressのブログサイトを無料で運営！【Googleクラウド（GCP）ならAlways Free】
https://hiroakio.com/wordpress-on-gcp/
嬉しいことにこの記事、けっこう読んでもらっております。
安く抑えられるもんなら抑えたいですもんね、サーバ代。
内容はタイトルの通り、「Googleクラウド（GCP）を使って、無料でWordPressのブログサイトを立ち上げよう！」という話でしたが、
今回はその続編的お話。
「無料のCDN『Cloudflare（クラウドフレア）』でWordPressのサイトを高速化するよ！！」という内容です。
（サーバはGoogleクラウドに限りません。普通のレンタルサーバーでもCloudflreで高速化可能です😀）
Googleクラウドの無料枠でブログサイトを運営している方はもちろん、お使いのWordPressを無料かつ手軽に高速化したい全てのブログ運営者のお役に立てる記事になっております。
CDN（Content Delivery Network）とCloudflareって何？
まず最初に、「そもそもCDNとかCloudflareってなによ？🤔」って疑問にお答えしておきますね。
既にご存知の方、早くCloudflareの具体的な設定内容を知りたい方はここは飛ばして、次へどうぞ。
CDNは『Content Delivery Network』の略。
あえて日本語に訳すとしたら『コンテンツ配信網』と行ったところでしょうか。
インターネットの中でも、コンテンツ配信に特化したネットワークになります。
高速化の要『キャッシュ』
ここで少し話は変わりますが、WordPressの高速化と言われて、みなさんは何を思い浮かべますか？
テーマ＆プラグインの見直しや画像の軽量化など、高速化の術はいろいろありますが、
中でも特に効果が高いのはキャッシュを使うことでしょう。
WordPressをはじめとしたウェブの世界では、スピードに関して以下の３つのボトルネックが存在します。
- ユーザとサーバ間の通信
- サーバ内のコンテンツ生成処理
- ユーザ端末内での描画処理
図にするとこんな感じ。
①の通信は、ユーザの近くにサーバを置くことで、
②のサーバ内の処理は、高性能なサーバを使うこと、もしくはサーバ内の処理を簡素化することで、
そして③のユーザ端末内の処理は、端末内での処理を簡素化することで、
それぞれ改善を目指します。
ここでいう”簡素化”とは、従来の重たい処理をマシンパワーを必要としない軽い処理に変えることを意味しますが、
先ほどの『キャッシュの利用』もこれに該当します。
キャッシュとは英語でcache（現金のcashではありませんよ）、一時的なデータの保管場所または保管されたデータのことを指します。
例えば、一般的なWordPressの場合、サーバ内のプログラム（PHP）とデータベースがページの元となるHTMLを生成します。
ユーザからリクエストがあるたびに、毎回欠かさずです。
サーバがプログラム（PHP）を起動して、プログラムがデータベースから該当記事の情報を探し集めてHTMLを生成しユーザに返すわけですが、これは非常に重い処理です。
ところがサーバがHTMLのキャッシュ（一時的に保管されたデータ）を持っていればどうでしょう？
キャッシュされたHTMLを即、ユーザに返すことができます。
プログラムもデータベースも必要ありません。
速いですね！
同様に、ユーザの端末内にキャッシュを持ってもらう方法もあります。
画像やCSS、Javascriptなど、汎用的で変更の少ないコンテンツや処理結果をユーザ側で一時保管してもらうわけです。
図示するとこんな具合。
サーバもユーザ端末も、都度重たい処理を走らせる必要がなくなるため、負荷は軽減され速度は向上するわけです。
CDNを使った高速化
では３つのボトルネックのうち、最後に残った”ユーザとサーバ間の通信”はどのように解決したらいいのでしょう？
先ほどは”ユーザの近くにサーバを置く”ことで解決できると書きましたが、これって真面目に考えると結構難しいですよね。
例えば、東京にサーバを置けば福岡や広島など西日本のユーザからは遠くなってしまいます。
同じように、大阪に置けば札幌や仙台とは距離ができてしまいますね。
あちらを立てればこちらが立たず。。
さらに、これは個人的な事情ですが、、このサイトのサーバはアメリカのロサンゼルスにあります。
Googleクラウド無期限無料枠で使えるのが北米のみだった為です。
やむを得なかったのですが、、やはり遠い！
と、ここで遂に、本記事のテーマであるCDNの登場です！
先ほどのキャッシュを使ったサーバ高速化では、サーバ内にキャッシュを置いてサーバ内の処理軽減＆高速化を狙ったわけですが、
この考えをもう一歩グイッと推し進めたのがCDNになります。
つまりキャッシュを元のサーバに置くのではなく、「ユーザのそばにキャッシュを置こう！キャッシュ用のサーバをたくさん作ればいいじゃない」というのがCDNの考え方。
図示するとこうです。
オリジナルのサーバ（CDN的には『オリジン』と呼びます。）がどこにあろうと、世界の主要都市にキャッシュサーバがあれば通信の問題は解決です。
CDNは定期的にオリジンを監視しており、オリジンに加えられた変更はただちに世界中のキャッシュサーバにも適用されます。
高速化以外のCDNのメリット、デメリット
さらにさらに、CDNのメリットは高速化のみに留まりません。
第一に、CDNはオリジンの負荷を軽減します。
CDNを使うと、ユーザは基本的にキャッシュサーバへアクセスすることになり、オリジンへのアクセスはグッと少なくなる為です。
また、メンテナンスやアップデート、不具合などでオリジンが一時的に機能しない時にも、キャッシュサーバはキャッシュを保持しているためコンテンツの公開は継続されます。
第二に、CDNはサーバのセキュリティを向上してくれます。
CDNが間に入る為、攻撃はオリジンに到達しなくなります。
CDNのファイアウォールを使えば、悪意あるユーザからのアクセスをブロックすることも可能です。
第三に、CDNはサイトのSSL化やコンテンツの圧縮・最適化、HTTP/2対応、、などなどのプラスアルファを与えてくれます。
本来はApacheやnginxなどWebサーバ関連の知識が必要なSSL化やコンテンツ最適化、クライアント・キャッシュの設定などなどをCDNが自動でやってくれます。
便利！！
と、ここまでCDNのメリットばかりを語ってきました。
デメリットはないのかというと、１点あります。
CDNは基本的にキャッシュです。
ゆえに、コンテンツによっては不得意なものもあります。
例えば掲示板のような頻繁に更新され、リアルタイム性が求められるコンテンツは苦手です。
あとは通販サイトのショッピングカートのようにパーソナライズされたコンテンツも適用が難しいでしょう。
WordPressのブログサイトでは、コメントが多い場合、投稿やコメントをすぐに反映したい場合は注意が必要になります。
Cloudflareは無料のCDN
というわけで、CDNはサイトの負荷分散＆高速化に極めて有効な常とう手段。
が、いかんせん高価で「わたしのような個人サイト運用者には高嶺の花、、」と思っていました。
ところが、よくよく調べてみるとあるではないですか!?
無料のCDNが!!
それが『Cloudflare（クラウドフレア）』というわけです。
画像の最適化やロードバランサなど、一部の補助的な機能は月額20ドル（または200ドル）の有料プランへの加入が必要ですが、基本的なCDNの利用はデータ転送量によらず無料！
太っ腹ですね。
ちなみに、一般的にはCDNといえばAkamai（アカマイ）やアマゾンクラウド（AWS）のCloudFrontが有名ですが、Cloudflareも日本国内で第３位のシェアを誇っているようです。
*Wikipedia情報
Cloudflare導入の経緯と効果
そんなわけで、Cloudflareです。
具体的なCloudflareの設定手順の前に、まずはCloudflare導入でこのサイトに実際にどんな効果があったか簡単にまとめます。
スグにCloudflare設定の方法が知りたい方もちょっとだけお付き合いください。
Cloudflare導入のきっかけはStackdriverからの警告メール
先日の記事『WordPressのブログサイトを無料で運営！』にも書いた通り、Googleクラウドの無期限無料枠は他にはないユニークな存在です。
ありがたく使わせていただいています。本当に。
ただ、サーバとしていささか非力なのも事実。
目安としては月間20,000PVくらい、デイリー700PVくらいから不具合がチラホラ。。
”不具合”とは言っても、サーバがダウンしたり再起動が必要といった致命的なものではありませんが、
アクセスが多い時間帯にやや繋がりにくいような状況が発生するようです。
*この辺の数字や症状については、サーバの設定やお使いのテーマ、プラグインによって違ってくるはずです。参考程度に考えてください
Googleクラウドでは『Stackdriver』というWebサーバのモニタリング・ツールを無料で提供しています。
わたしはこのStackdriverでサイトを10分おきに監視しているんですが、週に数件、アラートが届くようになりました。
（10秒以内に正しいレスポンスが得られなければアラートのメールが届きます）
デイリーのPVが700を超えた頃からです。
とは言え、ほとんどの場合アラートが届いても、10分後の次のモニタリングでは問題の解決が確認されていました。
なのでさほど重要視していませんでしたが、、
時と共にアラートは次第に増えてゆき、ついに週に20件ほどの警告メールが届くようになりました。
そうしてようやく、今回、重い腰を上げたというわけです。
Cloudflare導入の効果は意外なところにもアリ
というわけで、サーバの負荷軽減のために無料CDN『Cloudflare』を導入しました。
もちろん『課金してサーバのスペックを上げる』という選択肢もあったんですが、CDNの方がメリットが大きそうだったので今回はこちらを選択。
安易な課金はわたしのポリシーに反しますしね。
サーバのスペックアップは最後の手段としてとっておきます。
そんなこんなで2019年5月25日にCloudflareを導入。
この記事を書いてる6月29日時点で1ヶ月が経過しているわけですが、端的に言うと非常に良いです。
まず第一に、Stackdriverからの警告メールは一切来なくなりました。
この1ヶ月、全くです。
次に、オリジンサーバのデータの転送量は半減しました。
さらに、サイトが大幅に高速化しました。
具体的には、Cloudflare導入前のレイテンシ（遅延時間）が1秒弱だったのに対し、導入後は0.2〜0.1秒ほどに。
Googleクラウドの常時無料枠でサーバを立ち上げた場合、そのロケーションはアメリカ国内となります。
一方で、このブログの読者の大半は日本人です。
つまり、物理的な読者との距離がかなりあったわけですが、これもCloudflareで解決。
ユーザはアメリカのオリジンへアクセスすることなく、最寄りの、しかもオリジンよりも高性能で高速なミラー・サーバが対応してくれるというわけです。
そして、これらの効果は実際に体感できます。
自分で自分のサイトを閲覧しても「お、ちょっと早くなったか！？」と感じましたが、
それ以上に、なんとユーザーの直帰率が下がりました！
長期的に見ればSEOの面でも効果がありそうです。
Cloudflare設定手順
では最後にCloudflareを設定する手順です。
Cloudflareはアメリカの会社で、設定画面は全て英語です。
が、特に難しいことはないので気後れしないでくださいね。
実際にわたしが作業した際のスクリーンショットを見ながら、ザッと説明していきます。
Cloudflareにサイトを登録し、プランを選択する
まずはCloudflareのサイトに行って、メールアドレスを登録しましょう。
https://dash.cloudflare.com/sign-up
次にサイトを登録します。
そしてプランを選択。
とりあえずは無料のFreeプランで良いでしょう。
これで登録完了です。
簡単ですね。
DNSを設定
登録が終わったら、続けてDNSを設定しましょう。
現在、あなたのサーバ（オリジン）のIPアドレスとドメイン名はあなたがドメインを取得したドメイン管理業者のDNSに登録されていると思います。
それをCloudflareのものに変更します。
わたしの場合はお名前.comでドメインを取得しています。
ユーザが多いので情報が多いのが良いですね。安いですし。
まずはCloudflare側の設定。
現在公開されているドメイン情報をもとに、Cloudflareが自動で設定を組み上げてくれます。
間違いないことを確認して次へ。
上の画面で”Continue”をクリックして次に進むと、次の画面ではCloudflareのネームサーバの名前が２つ表示されます。
このドメインサーバ名を控えて、ドメイン管理業者の管理ページへ。
ここはあなたがドメインを取得したドメイン管理会社ごとに操作が異なるところですが、お名前.comの場合は
- 管理ページトップ（https://www.onamae.com/navi/login/?btn_id=navi_login_onamaetop_header_newdesign&ab=navilogin_other_abflow）へログイン
- ”ドメイン設定 —> ネームサーバーを設定する —> ネームサーバーの変更”を選択
- ”他のネームサーバーを利用”を選択して先のCloudflareのネームサーバ名２つを入力し、登録
で作業完了です。
ここでもう一度Cloudflareの管理画面に戻り、ドメイン管理業者側の変更が済んだことを知らせると、、
「ドメイン管理業者の作業が完了するまで、24時間くらいかかるから待ってて」との指示が。
実際には、24時間はかからず30分ほどで作業が完了しました。
わたしのお名前.comのドメインの場合です。
Page Rules（ページ・ルール）の作成
最後にページ・ルールを作成します。
ページ・ルールというのは、つまり「何をキャッシュして、何をキャッシュしないのか」を定めたルールのこと。
例えばWordPressの場合、大半の読者向けのページはHTMLも含め全部まるっとキャッシュしてほしいんですが、一部の管理者向けのページ（サイトへのログインページとか投稿の編集ページとか）はキャッシュされると困るわけです。
記事を投稿できなくなっちゃいますから。
そういうルールを決めるのがページ・ルール。
以下の通りにすればバッチリです。
”hiroakio.com”の部分は、適宜ご自分のサイトのドメインに変更してくださいね。
やってることは簡単で、以下の通りです。
- wp-admin以下は管理者用のページなのでキャッシュしない（Bypass（バイパス）する）
- 同じく、preview=trueのページプレビューも管理者用のページなのでキャッシュしない
- その他のページは全てキャッシュする（Cache Everything）
これでページのHTML含め全てがキャッシュされます。
サーバ側の設定
オリジンサーバにCloudflare製のプラグインをインストールして、『Automatic Cache Management』をONします。
これをONにしておくことで、あなたが記事を新たにアップした際やリライトした際に、自動でCloudflareがキャッシュを更新してくれるようになります。
キャッシュの弱点である、更新がすぐに反映されない問題を解決してくれます。
ちなみに、プラグイン中で求められるAPIキーは、Cloudflareの管理ページ中の”My Profile”から取得できます。
その他のおすすめ設定
以上の設定でCloudflareはバッチリあなたのサイトをキャッシュし、世界中のユーザに迅速にあなたのブログを発信してくれます。
CloudflareにはCDNの付加価値的機能として以下のようなのもありますので、興味があれば使ってみるのもいいでしょう。
全て無料で使えます！
- HTTPS（SSL）対応
- ブラウザキャッシュをHTTPヘッダに追加
- HTTP/2対応
- IPv6対応
- WebSockets
どれも有効なものですから、一度試してみてもいいでしょう！
まとめ CDN導入はSEO的にも良さそう
そんなわけでCloudflareを使い始めて１ヶ月がすぎました。
その間、Googleアナリティクス、サーチコンソールなどで効果をみてきましたが、直帰率の低下や検索順位向上などみられました。
あとはAMPページへのアクセスが減って、オリジナルのアクセスが増えている気がします。
設定画面が英語なので若干取っ付きにくさはありますが、効果は間違いなくあります。
気になった方はぜひ挑戦してみてください。
今日のところはまあこんなところで。
ではでは。