Cloudflare のAPO(Automatic Platform Optimization) for WordPress を試す

Automatic Platform Optimizationは著名な特定プラットフォーム向けにCloudflareのCDN等様々な通信最適化機能をまとめて設定してくれる機能です。2023/07/27時点ではWordPressのみが対応していますが今後順次対応プラットフォームが増えていくことがアナウンスされています。

この機能は無償プランでご利用できますが、APOを利用するために追加アドオンで5ドル/月が必要となります。Pro以上の有償プランであれば料金に機能が含まれています。

APOを用いることでCloudflareや他のCDNでHTML, JS, CSSをキャッシュさせるよりも高い効果（スピード性）を実現できます。まずはフォントのキャッシュです。APOでは自動でオリジンで使われているフォントがキャッシュされます。さらにAPO経由でのアクセスで仮にOriginはHTTP/1.1のみに対応していたとしても、クライアントブラウザとCloudflare Edgeの通信は自動でHTTP/2へアップグレードされるため、各キャッシュされたオブジェクトの読み込みが非同期化され、結果高速化が期待できます。
このAPOはWordPress側で動作するプラグインが必須となるため、WordPressの認証機能とシームレスに連携します。本来認証されたユーザーのみがアクセスできるコンテンツはキャッシュをさせない設定を行うことがありますが、APOを用いることでキャッシュさせることができるため、クライアントクッキーと連携したキャッシュコントロールもエッジだけで判断可能となります。

WordPressプラグインと連携するメリットはもう一つあります。通常CDNのキャッシュは初回読み込み時に行われます。またオリジンではコンテンツが更新されているにも関わらず、キャッシュされたコンテンツは有効期間（TTL）の間古いものが配信されてしまいます。APOではWordPress側でコンテンツが更新されたイベントをトリガーとして既存キャッシュをパージしユーザーからのリクエスト前にコンテンツをキャッシュさせとくことができます。

やってみる

まずはAmazon EC2か何かでWordPressを立てましょう。この記事に簡単に記載しています。
その後いつも通りDNS Proxyモードを設定しCloudflareのCDNが使えるようにします。

マネージメントコンソール左ペインのSpeed→Optimizationをクリックします。

Content Optimizationのタブをクリックします。

初回はおそらくトグル自体が無効化されていると思います。この画面からは初回設定時はアクセスできないので注意してください。

WordPress管理者画面にプラグインをインストール

プラグイン→新規追加をクリックします。

Cloudflareプラグインを検索し、今すぐインストールを押します。

有効化を押します。

以下の通りプラグインがインストールされます。

Settingsを押し、Create Your Free Accountを押さずに、下のSign in hereをクリックします。

この画面をブラウザで保持しつつ、別タブでCloudflare管理者画面を開きます。

API Tokenの発行

管理者画面右にあるGet your API Tokenをクリックします。

Create Tokenを押します。

WordPressを探してUse Templateを押します。

設定は全てデフォルトのままContinue to summary→Create Tokenを押します。

API Tokenをcopyしてください。

WP上でプラグインの有効化

先ほどのWordPressの画面に戻ります。

先ほどコピーしたトークンを設定します。以下の画面に遷移するはずです。

これは、トークンの設定は成功したものの、WordPress自身はまだ自分のドメインをオリジンのドメインと認識しており、CDN経由のCloudflareで管理されているドメインと連携しているWP用APOプラグインが使えないことを意味します。
この問題を解消させるためには、WP自身をCDN経由のCloudflareで管理されているドメインで稼働していると認識させる必要があります。
一般をクリックします。

CloudflareでセットされているDNS Proxy経由のドメインを入力し、変更を保存を押します。

再度WPへログインしプラグインの管理画面へ移動すると以下のようになります。

Applyを押し、トグルをオンにします。

これでAPOが稼働し最適化が実行されます。

テスト

https://gtmetrix.com/ にアクセスして、オリジン、CDN経由それぞれのパフォーマンスを調査します。

オリジン：

APO経由：

うぉっ！めっちゃ早くなってる！