750円のCloudflare APOはサイトの高速化に役立つのか？
※このページにはプロモーションが含まれています。
Cloudflare APO(Automatic Platform Optimization)をこのサイトに導入しました。料金は5ドル/月なので現在の換算で750円になります。
APOの詳しい仕様は下のCloudflareブログのリンクをご覧ください。
WordPressからはじまるプラットフォーム自動最適化の紹介
動的に生成されるWordPressで運用されるサイトはオリジンサーバーとの通信が必要になり、静的に作られているサイトに比べると、サイトの描写が遅くなりますが、APOを使うとすべてのデータをCloudflareを使って配信し、オリジンサーバーから切り離すことで、サイトの読み込みを速くさせるとのことです。
APOを導入する
- Cloudflareを使えるようにする
- CloudflareのサイトでAPOを購入する
- APIを取得する
- Cloudflareプラグインをインストールする
- プラグインにログインしAPOを有効にする
- APOの設定をする
Cloudflareの登録
Cloudflareは無料で使える珍しいCDNなので導入方法を解説してくださるサイトがたくさんあります。私が失敗したのはSSL/TSLの設定で、夜にCloudflareに登録し、うまく行っていると思っていたら、朝起きるとサイトにつながっていませんでした。
無料でもセキュリティ対策やHTTPヘッダーの追加などの便利な機能が使えますし。「Super Page Cache for Cloudflare」というサードパーティの無料プラグインを使えば完全無料で、相当な効果を得られます。
例えばセキュリティプラグインでWordPressのログインアドレスを変更してセキュリティ対策をするものがありますが、Cloudflareを使えばIPアドレスでログインアドレスへのアクセス制限をかけられます。WordPrsssを操作するPCのIPアドレスを登録し、それ以外のアクセスをブロックすることができます。
APOの購入
Speed > 最適化 > コンテンツの最適化 > Automatic Platform Optimization for WordPress
スライドボタンをONに動かすと、購入画面が表示されるのでクレジットカードを使って支払いをします。毎月1日に5ドルの請求が行われるようです。
APIの取得
概要 > API トークンを取得 > Global API Key > 表示
Cloudflareのログインパスワードの入力のあとにAPIが表示されます。
Cloudflareプラグインをインストール
cloudflareで検索するとすぐ見つかるのでインストールし、有効化します。
Cloudflareで登録したメールアドレスと先程入手したAPIを入力します。
APOをONにした後その上の項目のAPO用の設定を有効化します。
最後にSXGsを有効にします。Cloudflareのサイトに戻り
Speed > 最適化 > その他 > Automatic Signed Exchanges (SXGs)
APOが動作しているか確認する
APOを導入したサイトのHTTPヘッダーを見ると「cf-apo-via」の文字が見えます。
ここまでの作業を終えてPageSpeed Insightで同じページを計測したところ、APOの導入前に比べて20％読み込む時間が減っていたので、効果があるんだと思って一旦終了としました。
しかし、PageSpeed Insightのスコアが良くなったのは以前のキャッシュが残っていたらしく数日経って計測したPageSpeed Insightsのモバイルの数値が70点台になっています。
原因は「使わないJavaScript」です。Google AnakyticsとAdSenseは遅延読み込みをしているのはずなのですが、遅延せずページの読み込み時に実行されているようです。マウスの移動または、ページのスクロールでコードが読み込まれるようになるはずですが、そうはならずに、モバイルの場合だけページの読み込み時に実行されています。
wp_enqueue_scriptを使わいない方策
いろいろ試したところwp_enqueue_scriptでスクリプトファイルを読み込むことを辞めると、スコアが下がらなくなりました。
理屈は私にはわかりませんが、deferを付け加えたコードが悪さをしていたのかもしれませんし、他に原因があるのかもしれません。WordPressでCloudflareを利用する際に不具合をできるだけ起こさないためには一度HTMLを出力して、それをキャッシュさせる方が無難なようです。
Amazon セールとイベント
冬の味覚ポイント高還元カニ特集 【期間限定】ダブルポイント祭りページキャッシュをキャッシュさせる
サイトの動作を高速化するためにできるだけプラグインを使わないようにしていましたが、ページキャッシュは、プラグインを使わないで利用するのは難しいようです。ページキャッシュプラグインで調べれば、多くの方が性能差や設定の方法を書いてくれています。
WP Super Cacheをインストール
今回はCloudflereにキャッシュさせるための静的ページを作成するので、プラグインに複雑な機能は必要ありません。Automatic社のWP Super Cacheは無料で更新が止まる心配をしなくて良いのでこれを使うことにします。
Cloudflare + Super Page Cache for Cloudflareプラグイン(モバイル)
Cloudflareを無料で使う場合の最良のプラグインだと思う「Super Page Cache for Cloudflare」を使用した場合のPagespeed Insightsの計測結果です。モバイルの結果なのでこれでも十分速いと思われます。
Cloudflare + APO + WP Super Cache(モバイル)
同じページのAPOを導入後の測定結果です。確かに速くなっています。
750円の価値があるかどうかは意見が分かれるところだと思いますが、読み込みが速くなることは間違いないと思います。
最後までお読みくださり、誠にありがとうございます。
週間アクセスランキング
このブログを書いている人
ほんだ
数多くあるブログの中で、このページをお読みくださりありがとうございます。このブログは、炭火で美味しいものを作ることを中心に、日々の趣味についてを文章にすることで、WordPressを使ってのWebページ作成を忘れないようにしています。熱帯魚の世話や野菜の栽培、Linuxについて興味のあることを、つたない文章で綴っています。兵庫県在住です。