炭火Blog

WordPressのブログを完全無料で高速化する全設定[Cloudflare+Cache Enabler]

Blogging
///

※このページにはプロモーションが含まれています。

Table of Contents

プラグインはできるだけ使わないようにしています。理由はプラグインの更新が止まった時に困らない為にと、WordPressを使っている時に広告が出るのが好きでは無いからです。

無料で利用できるCDNであるCloudflareを使う場合にプラグインを使わなくても、セキュリティの向上やアクセスの高速化はある程度の恩恵があります。

Cloudflareには無料で使えるFreeアカウントから始まり、月額制で価格が上がるほど高性能なCDNを利用できます。速度やカスタマイズ性、セキュリティの面からも差別化されていますが、個人のブログならFreeアカウントで十分のように感じます。

約1年間、Cloudflareを使いながら試行錯誤して現在の設定になりました。それなりに上手く使えているのではと考えてこの文章を書いていますが、私は専門家ではありません。この投稿の内容がすべての方にとって良い方法である確認はできません。もし同じように設定をされるなら、ご自分の環境で不具合や不利益が無いようにご注意をお願いします。

Cloudflareをしばらく使った感想

理屈から言えばプラグインでページキャッシュを作り、それをCDNで配信させれば動的にサイトを作成するWordPressの弱点である、アクセスされてからのページを作成する事でページの描写が遅くなるのは克服されます。

プリロード機能のついたプラグインでサーバーのCronを使い、深夜にページキャッシュを作れば良いのではと考えて試したのですが、どうもFreeアカウントではキャッシュを持つ時間が短いのか、あるいは持たない場合があるのか、思っていたような結果は得られませんでした。

ただ、確認できたのはページキャッシュは作っていたほうが作っていないよりページの読み込み速度が速くなるということです。正確にいえば「速くなることがある」です。

FreeアカウントではアクセスがあってCDNにキャッシュが残っても、すぐに消えるようです。当然ですが無料で使っている人にリソースは避けないのでしょう。

Freeアカウントの最大のメリットはオリジンサーバー(当ブログはシン・レンタルサーバー)のスペックが気にならなくなる点です。シン・レンタルサーバーならCloudflareを使わなくても問題なくブログの配信ができますが、そうでない弱いサーバーでも個人ブログならCloudflareの力で相当のアクセスは捌けるのではと思います。

Cloudflareを使ったページの読み込みをGoogle社のPageSpeed Insightsで測定する場合は、少し時間をおいて、複数回測定する必要があります。

それは、PageSpeed Insightsが測定するCDNの場所はアメリカで、当ブログのように日本からのアクセスのみの場合はアメリカのサーバーにキャッシュが無いからです。一度測定をした時にキャッシュをし、二度目でキャッシュから配信をするので測定結果が速くなります。

逆に何度か測定しても速度が上がらない場合は、どこかの設定が間違えている可能性があります。

PageSpeed InsightsとGTmetrixの測定結果

私が試した中では、CloudflareのFreeアカウントとCache EnablerプラグインというKeyCDN用のページキャッシュプラグインを使う場合が最もPageSpeed Insightsの速度が速くなりました。点数はモバイル、デスクトップともに100なのですが、モバイルのSpeed Indexで1秒を切ろうと思い手を尽くしてみましたが、それは無理でした。

下の画像がPageSpeed InsightsとGTmetrixの測定結果になりますが、常にこの結果が出るというわけではなく、概ねこのくらいの速度になるとお考えください。

私はブログを書くより読み込みの速度がどうやれば速くなるかを試行錯誤する方が面白く感じるくらいなので、Cloudflareを利用する以外にもあらゆる速度対策をしています。例えばプラグインはCache Enablerだけを使用して、その他の機能追加はPHPを書いて行っています。

自分だけでは無理でもChatGPTに聞けばすべて教えてくれるので、便利なったものです。

モバイルの測定結果
PageSpeed Insight モバイル
デスクトップの測定結果
PageSpeed Insights デスクトップ
GTmetrixの測定結果(Summary)
GTmetrix Summary
GTmetrixの測定結果(Waterfall)
GTmetrix Waterfall

Cloudflareの設定

Cloudflareの設定において、Freeアカウントでは使えない機能や変更する必要がないと思う箇所は記載していません。高速化対策はできる限り行った上でCloudflareを使用する前提なのでRocket Loaderなどは使用していません。

Rocker LoaderやAlways Onlineなどの機能ははONにすると速度が落ちますが、ONにしたほうが速くなる場合はONにしてください。

キャッシュ設定

ルール / ページルール

URL (必須)https://xxxxxxxx.com/*
キャッシュ レベルCache Everything
ブラウザ整合性チェックON
Auto MinifyHTML
ブラウザキャッシュTTL1年
セキュリティレベル基本的にオフにする
エッジ キャッシュ TTL1日
IP ジオロケーション ヘッダーON
Cache Deception アーマーON

ページルールでCache Everythingを設定することでHTMLもキャッシュできるようです。すべてをキャッシュさせてから、管理画面などのキャッシュさせたくない部分を別途に設定します。

元々存在したページルールという設定はFreeアカウントでは3までしか使えませんでしたが、新たにキャッシュルールという設定項目が追加され、こちらは10項目の設定ができます。しかも同じ設定項目に複数のアドレスを設定できるので、Cache Everythingをページルールで設定し、それ以外はキャッシュルールで設定します。

https://xxxxxxxx.com/*はCloudflareを利用するサイト。

CSSとJavaScriptは圧縮してからアップロードするのでAuto MinifyはHTMLのみを使います。プラグインのCSSとJavaScriptが圧縮されてない場合は、そのようなプラグインを使わないのが一番ですが、そうも行かない場合は必要に応じてONにしてください。

ブラウザキャッシュTTLは1年に設定するとPageSpeed Insightで注意されなくなります。

セキュリティレベルは高くするほど安全になりますが、速度が落ちます。

エッジ キャッシュ TTLはCloudflareがキャッシュを保持する時間です。ニュースサイトのように頻繁にページが更新されるような場合は1秒に設定することもあるそうですが、1日に1回ランキングが書き換わるだけの当ブログでは24時間同じで構いません。また、上でも述べたように1日と設定してもその時間保持されるとは限りません。

Caching / Cache Rules

ホスト名次を含むxxxxxxxx.com
キャッシュの適格性キャッシュの対象
再検証中に古いコンテンツを提供するON
URIクリエー次を含むpreview=true
Cookie次を含むwordpress_logged_in
URIパス次にある /wp-admin /wp-login.php /wp-sitemap.xml /robots.txt
キャッシュの適格性キャッシュをバイパスする

「再検証中に古いコンテンツを提供する」を有効にするためだけにキャッシュルールを一つ使用します。

2つ目はキャッシュさせないページの設定です。管理画面をキャッシュさせてしまうと、上部に管理バーを表示させている場合は、ログインしてない状態でも管理バーが見えてしまうことがあります。ユーザー名が見えてしまうので管理画面や投稿ページのプレビューページなどはキャッシュの対象から外します。

Speed / 最適化

コンテンツの最適化BrotliON
Cloudflare FontsOFF
Early HintsON
Rocket LoaderOFF
プロトコルの最適化HTTP/2ON
HTTP/2 からオリジンON
HTTP/3 (QUIC 使用)ON
0-RTT 接続再開ON

BrotliはGzipより圧縮率の高い圧縮方法なのでONににします。効果があるかhttps://www.giftofspeed.com/gzip-test/で試してください。「Brotli Is Enabled」と表示されていれば効果があります。

Caching / 構成

キャッシュ レベルスタンダード
ブラウザ キャッシュ TTL既存のヘッダーを優先
Crawler HintsON
Always Online™OFF
開発モードOFF

Caching / 階層型キャッシュ / 階層型キャッシュ トポロジー / スマート階層型キャッシュ トポロジー

ONにします。

セキュリティ設定

セキュリティ / WAF

ソースIPアドレスリストに含まれない
URIパス次にある/wp-admin /wp-login.php /xmlrpc.php /wp-config.php

ルール テンプレート / ゾーン ロックダウンから許可する IP アドレスをカスタムリストに作成して、特定のIPアドレス以外からアクセスされないようにできます。

特にログイン画面にアクセスされないようできるのは、セキュリティ上ありがたいです。

IPアドレスを登録する場合IPv4の場合はそのままのアドレスを書けばよいのですが、IPv6の場合は

wwww:xxxx:yyyy:zzzz::/64

このようにアドレスの前半と「:/64」を組み合わせて登録するようです。カスタムリストを使わずにフルのIPv6を使ってアドレス制限をかけることはできますが、フルのIPv6の後半部分はコロコロ変化します。PCを再起動すれば必ず変わりますし、そうしなくても変わりますので、「:/64」を使うことをお勧めします。

ルール / 変換ルール / レスポンス ヘッダーを変更

次の場合…受信リクエストが一致する場合…すべての受信リクエスト
スタティック設定Content-Security-Policybase-uri ‘self’; object-src ‘none’; frame-ancestors ‘self’
スタティック設定Cross-Origin-Opener-Policysame-origin-allow-popups
スタティック設定Permissions-Policygeolocation=(),microphone=(),camera=()
スタティック設定X-Content-Type-Optionsnosniff
スタティック設定cache-controlmax-age=31536000

Content-Security-Policyはサイトを表示させるソースを限定してセキュリティを高めます。PageSpeed Insightで提案される内のscript-srcは、JavaScriptのソースを制御するのですがGoogle AdsenseがContent-Security-Policyに対応していない(使用するアドレスが多すぎる上に、日々変更される)ので設定できません。

それ以外は説明を理解できたもので当ブログで不具合が起きていないものだけを記載しています。

セキュリティ / ボットボット / ファイト モード

ONにします。

Cache Enablerの設定

色々のプラグインを試しましたが、Cloudflareを利用する場合はページキャッシュとブラウザキャッシュのキャッシュがあれば良いので、複雑な機能は必要が無さそうです。ブラウザキャッシュはプラグインに依存しないので(Cloudflareで設定ができますし、.htaccessを使うこともできます。)ページキャッシュだけ作れるプラグインの中でWP Super CacheとCache Enablerの2つが広告や、有料の機能がないプラグインです。

作成しているのもAutomaticとKeyCDNなので更新も続くでしょう。

Cache EnablerはKeyCDN用に作られているのですが、試したところCloudflareでも使えるようです。画像の測定結果は私の環境では最速のもので、CDN用に作られているプラグインだから良いのでしょうか。Super Page Cache for Cloudflareプラグインでもここまでは速くなりませんでした。

Cache Enablerプラグインの設定ページには

Combine Cache Enabler with KeyCDN for even better WordPress performance and achieve the next level of caching with a CDN.

訳:Cache EnablerをKeyCDNと組み合わせることで、WordPressのパフォーマンスがさらに向上し、CDNを利用した次のレベルのキャッシュが実現します。

と、記載されておりCDNとページキャッシュプラグインの併用は効果があることが伺い知れます。

このプラグイン残念ながら日本語には翻訳されていないのですが、設定項目が少ないので翻訳するのに時間がかかりません。

プラグイン設定

Cache BehaviorExpirationCached pages expire 24 hours after being created.

キャッシュの持続時間を24時間にするだけで設定は終わりです。

その他のキャッシュのコントロールはCloudflareで行います。プラグインには24時間毎にページキャッシュを作成してもらうだけです。

最後までお読みくださり、誠にありがとうございます。

Amazon.co.jp
クリエイターのためのChatGPT活用大全:創作の幅が一気に広がる!
Amazon.co.jp
ChatGPT最強の仕事術

関連投稿

週間アクセスランキング

このブログを書いている人

管理者 ほんだ

数多くあるブログの中で、このページをお読みくださりありがとうございます。このブログは、炭火で美味しいものを作ることを中心に、日々の趣味についてを文章にすることで、WordPressを使ってのWebページ作成を忘れないようにしています。熱帯魚の世話や野菜の栽培、Linuxについて興味のあることを、つたない文章で綴っています。兵庫県在住です。