Cloudflareを使ったら100点になった
ブログにCloudFrareを導入してみた
Cloudflareは以前から興味があったのだけど、必要性が無かったことと不具合が出たとか記事を見たりしたのでなんとなくずっと敬遠していた。
最近相談があった案件が、一時的にアクセス数が結構多くなりそうな内容だったので、何か少しでも対策をと思い、Cloudflareを思い出し試しにこのブログに導入してみた。
結論から言うと速くなった！
体感は分からないけど、Google PageSpeed Insightsが100点になった。
もともと記事も少ないし、XSERVERのXアクセラレーターV2など標準でついてる高速化機能をオンにしてた時で充分速かったけど、やっぱり数字として100点が出たのは嬉しい。
Cloudflare導入前の構成
Cloudflareを導入する前は以下のような構成。
【プラグイン】
- EWWW Image Optimize（画像.webp化）
- WP Fatest Cache（ページキャッシュ）
【サーバーの設定】
- Xアクセラレーター
- サーバーキャッシュ
- XPageSpeed
この構成で、スクリーンショットは取ってないけど
携帯電話…95点 デスクトップ…97点
とかだった気がする。
正直自分のブログぐらいなら充分すぎる。
Cloudflare導入後の構成
【キャッシュサーバー】
- Cloudflare
【プラグイン】
- EWWW Image Optimize（画像WebP化）
- WP Fatest Cache（ページキャッシュ）
【サーバーの設定】
- Xアクセラレーター
結果はタイトル通り
GT metrixはAで99%
ちょっとしたトラブルもあった
一部のJavaScriptが動かなくなった
自分のJavaScriptの書き方が悪いのか、CloudflareのRoket Loaderの機能をONにすると、自前で作った自動目次生成のJavaScriptが動かなくなった。
※Roket LoaderはJavaScript が含まれるページのペイント時間を改善する機能。
WPのフロント側の管理者バーが表示した状態がキャッシュされる
ログインした状態でフロント側にアクセスした時にその状態がキャッシュされて、ログインしてない人にも上部の管理バーが付いたページを表示してしまう状態になった。
これはCloudflareのページルールで「キャッシュレベル」を「Cache Everything」にしているとなる。
ということが分かったので「スタンダード」に戻した。
ただ「Cache Everything」だと画像・JS・CSSなどファイルだけではなく、ページのHTML丸ごとキャッシュしてくれて、オリジンサーバーの負荷が結構押さえられるようなので、使えないのは残念。
一応、Businessプランを契約して、Cookieをページルールに使えるようにすれば対応できるとかなんとか…
でも月額200ドルかかるから、ちょっと試す気にもならない…
もうちょっと調べてみたら出てきた、このKINSTAの記事をざっと見るとCloudflare純正のWPプラグイン「Automatic Platform Optimization for WordPress（APO）」と若干の月額費用で解決できそう。
費用はProプラン月額20ドルにアップグレードか、APO単体サブスクリプション月額5ドル。
月額5ドルならいいかな、今度試してみよう。
重複する機能をどれに任せればいいのか問題
トラブルというほどではないが、CSS・JSのファイル統合や圧縮機能、ブラウザキャッシュの機能は、サーバーにもプラグインにもCloudflareにもあって重複しているので、いったいどれで設定すればいいのか分からない。
とりあえずは、Cloudflareで出来ることはCloudflareやることにして他をオフにした。
感想
面倒くさそうと敬遠してたけど、思っていたより全然簡単に導入できるのが良かった。
しかも、無料でも充分使えるのがすごい。
ページルールは3つまでだけど、まぁなんとかなる。
それに本当にアクセスが多くなって、
オリジンサーバーの負荷を抑えたい！本気でサイトパフォーマンスを上げたい！
と思ったら、月額20ドルは安いと思う。
あとは、6月にCloudflare自体に障害があって、有名なサイトやサービスがアクセス出来ない状態になってたから、リスクもちょっとだけあるのは理解しておこう。
今回Cloudflare試して良かった。これでアクセス負荷の分散に少し賢くなった。
このブログ自体は全然アクセスなんてないから、基本的にサーバー標準の高速化で充分だけど、いつかCloudflareに20ドル払うような日が来たらいいかな。