Super Page Cache for Cloudflareプラグインを使用したサイトの高速化
※このページにはプロモーションが含まれています。
モバイルの読み込みの速度を速くしようと考え、自分なりに対策を行いました。
- テーマの自作
- 描写に関するプラグインの不使用
- ウィジェットの不使用
- CSSファイルの分散化
テーマの自作と言ってもUnderscoresというスターターテーマから不要な機能を削除して、思うように表示できるように手を加えただけのものです。
表示されることが多い投稿ベージのスタイルシートファイルの容量を削減するために、投稿ページ用・固定ページ用・その他（フロントページ、カテゴリーページetc）の3つに分けています。
投稿ページの容量の約半分をWebフォントが占めているので、Webフォントを使わなければPageSpeed Insightでのモバイルスコアは100点になりますが、できれば他の方法を使って高速化を図れないかと考えました。
もちろん無料で。
探した結果、試してみる価値がありそうだと思ったのが「CDN(content delivary network)」を使う方法です。
CDNを使って世界中にあるサーバーにキャッシュされたデーターを配信することで、もとのサーバーの負荷を軽くして通信速度を速します。
無料のCDNサービスは無いと思っていたのですが、無料で使えるCDNがあるんですね。
Cloudflare – Webパフォーマンスとセキュリティを追求する企業
今回はWordPressで作られたサイトをCloudflareを使って高速化する方法と、なぜこのプラグインを選んだかを記事にします。
まずCloudflareを使えるようにしますが、画像つきで詳しく解説されているサイトが多くあるのでそちらを参考に行ってください。
次に実際の設定についての考察になります。
キャッシュ用のプラグインを使わない場合
Cloudflareは無料プランではHTMLをキャッシュしません。HTML以外のファイルはキャッシュされて高速なサーバーから配信されますので、私の環境では5%ほどモバイルの点数が上がりました。
この時、WordPress側では行うことは一切ありませんが、Cloudflare側ではページルールの設定が必要になります。「Cloudflare ページルール設定」で検索してみてください。
Amazon セールとイベント
冬の味覚ポイント高還元カニ特集 【期間限定】ダブルポイント祭りキャッシュ用のプラグインを使ってページキャッシュを作る
HTMLをキャッシュしてくれないのなら、プラグインでページキャッシュを作ってそれをCloudflareにキャッシュしてもらおうという考え方です。
WP Super Cache
キャッシュをプレロードすることで、ページキャッシュをCloudflareで配信できるようです。
W3 total cache
結果：途中で断念
設定するところが多すぎて理解するのに時間がかかるのと、肝心のCloudflareとの連携がWordPressを日本語表示にしているとできません。
設定の一般にある言語設定とユーザーの編集にある言語設定の2つを英語にするとCloudflareの設定をするためのボタンが押せるようになります。
しかし苦労して登録が進んだにもかかわらず、プラグインで行った設定の変更はエラーが出てCloudflare側に反映されません。
このプラグインは自宅サーバーのようなパワーのあるサーバーで生きると思います。私のような安い共用サーバーでは他人に迷惑なだけで、サイトの読み込みの速度アップにはならないと判断して使用をやめました。
Cloudflare
Cloudflare社のプラグイン。
結果：無料プランでは意味なし
月に5ドルをCloudflare社に支払うとAutomatic Platform Optimizations (APO)が使えるようになります。
パフォーマンスだけを考えるとWordPressをCloudflareで使うならAPOが最良の方法だと思いますが、無料プランだとこのプラグインを使用するメリットは特にありません。
Super Page Cache for Cloudflare
結果：効果あり
使用にあたっての注意点ですが、他のキャッシュ用プラグインがインストールされている場合は削除するほうが良いようです。
キャッシュ用プラグインの中には削除をしてもフォルダやファイルが残っていたり.htaccessに記述を残したりします。wp-contentフォルダ内に残されたものがないかと、.htaccessの記述の確認が必要です。
プラグインで設定をするとClaudflareのページルールが一つ書き加えられます。このとき無料で使える3つのルールの枠がすでに埋まっていると、必要になるページルールが加えられません。
Cloudflareの設定でページルールをすべて消去してからプラグインの設定をおすすめします。
加えて、Cloudflareの設定の中のブラウザキャッシュTTLが「既存のヘッダーを優先」になっているか、CachingのArgo 階層型キャッシュが有効になっているかを確認してください。
プラグインの設定は下記リストの項目をYESに変更して緑のボタンを押すとキャッシュが有効になります。
- Enable fallback page cache
- Add browser caching rules for static assets
- Automatically purge the OPcache when Cloudflare cache is purged
- Automatically purge the object cache when Cloudflare cache is purged
keyCDN toolsでご自分のサイトを調べて「x-wp-cf-super-cache-active: 1」と「cf-cache-status: HIT」の表示があればプラグインが作ったページキャッシュがCDNにキャッシュされています。
1回目ではcf-cache-status: missと表示される場合があるので、2回以上調べるようにしてください。
wp_is_mobile()にご注意を
PHPにwp_is_mobile()という関数があるのですがページキャッシュを使うと効果がなくなります。この関数を使っているとモバイルでサイトを見るとパソコン用のスタイルで表示されます。
PageSpeed Insightsでの注意
キャッシュされるようになったのを確認してからPageSpeed Insightsで測定しても90点前後で変化がありませんでした。
測定用のサーバーがアメリカにあって、当ブログのような見てくれる人がほとんどいないようなブログではCloudflareのアメリカにあるサーバーにはキャッシュされていないのかと考えましたが私にはよくわかりません。
Pingdom Website Speed Testで東京のサーバーを選んで測定をすれば効果が出ていることが確認できます。
サイトによってはAoutoptimizeを併用するほうがより効果があったりするらしいので、ご自分の環境にあった使い方を模索すると良いかもしれません。
最後までお読みくださり、誠にありがとうございます。
週間アクセスランキング
このブログを書いている人
ほんだ
数多くあるブログの中で、このページをお読みくださりありがとうございます。このブログは、炭火で美味しいものを作ることを中心に、日々の趣味についてを文章にすることで、WordPressを使ってのWebページ作成を忘れないようにしています。熱帯魚の世話や野菜の栽培、Linuxについて興味のあることを、つたない文章で綴っています。兵庫県在住です。