WordPress向けCloudflare Image Resizing

Cloudflare Image Resizingと私のWordPressプラグインについて多くのリクエストをいただいたため、この記事を投稿します。

WordPressの設計上、私のプラグインをすべてのものと互換性を持たせることは不可能なため、この記事ではCloudflare Workersを使った別の方法を探ります。

なお、誰でも理解できるように、技術的な内容を意図的に省略しています。正直なところ、すべての人が開発者ではありません。私は記事を短く、シンプルで、要点を押さえたものにするのが好きです。

記事の最後では、コピーして貼り付けてワンクリックするだけで、WordPressにCloudflare Image Resizingを適切に設定できます。

Cloudflare Image Resizingとは

おさらいすると、Cloudflare Image Resizingを使用すると、Cloudflareのエッジプラットフォームで画像を変換できます。オンデマンドで画像のリサイズ、品質の調整、WebPまたはAVIF形式への変換が可能です。

Cloudflareはエッジで派生したすべての画像を自動的にキャッシュするため、オリジンには1つのオリジナル画像のみを保存するだけで済みます。

これは、WordPressのような忙しいブログ、特に多くの画像を持つショップとして使用している場合に本当に必須のサービスです。

詳しくは公式投稿をお読みください。

なぜCloudflare Image Resizingを使用するのか

主な理由はスピードです。例えば、ウェブサイトに5つのページがあり、各ページに1MBから5MB、さらには10MBまでの画像が10枚あるとします。

誰かが初めてあなたのページにアクセスすると、それらすべての画像がブラウザによってダウンロードされます。つまり、1ページに10枚の画像があり、それぞれ1MBのサイズだとすると、画像だけで10MBのダウンロードが必要です。

これは低帯域幅のユーザー、特にモバイルユーザーにとって非常に悪いことです。帯域幅の多いPCユーザーにとっても不快です。誰も遅いウェブサイトを見たくないし、ウェブ標準に準拠しません。

毎日、永遠にロードし続けるそのようなウェブサイトをたくさん見ているはずです。主な原因は、遅いウェブホスティングなどの他の要因に加えて、メディアアセット（CSS、JS、画像など）です。

「でもCDNを使っているよ？」と思うかもしれませんが、それは同じではありません。Cloudflare Image Resizingは単なるCDNではなく、画像をより良くするために変更します。

Cloudflare Image Resizingでは、画像がオンザフライでサイズが縮小されるため、1MBの画像が約100/200KB程度になります。また、WebPやAVIFなどの次世代フォーマットで配信されます。

要約すると：

画像を改善する
ウェブサイトを高速化する
SEOを改善する
帯域幅を節約する

WordPressプラグイン

おそらく、私がGithub / WordPress Plugins ディレクトリで公開しているWordPress用プラグインをご存知でしょう。

多くのフィードバックを受け、多くの人がウェブサイトを大幅に高速化しましたが、文字通り解決不可能な問題に遭遇した人も多くいます。

すべての画像をリサイズするために可能な限りのことを試みましたが、WordPressのプラグインとテーマの設計上、すべてをリサイズすることは不可能です。

CSS処理やその他のことは論外です。

Cloudflare Worker

報告されたすべての問題を検討した後、別のルートを取り、Cloudflare Workerを使用してCloudflare Image Resizing用の最終HTML出力を書き換えることにしました。

これはWordPressでCloudflare Image Resizingを使用するための究極のソリューションです。なぜなら、workerはプラグイン、テーマ、CSSなどからの変更を含め、WordPressが生成した最終レスポンスを取得するからです。

Cloudflare WorkerがWordPressとユーザーの間に位置するため、ほぼすべてのものをオンザフライで変更できます。つまり、インラインCSS内やCSSファイル内の画像も置き換えることができます。

理論的には簡単で straightforward に聞こえますが、実際にはずっと難しく時間がかかりました。

それでも、この目標を達成する方法を見つけるために多くの時間と労力を費やしました。

WordPressプラグイン vs Cloudflare Worker

WordPressプラグインとCloudflare Workerの違いを理解することは非常に有益です。これにより、どちらを使用するかを決定し、なぜworkerを推奨するかを理解できます。

	WordPressプラグイン	Cloudflare Worker
無料	はい	はい
処理速度	高速	非常に高速
依存関係	PHP 7+	なし
一般的な互換性	部分的	完全
テーマ互換性	一部	すべて
プラグイン互換性	一部	すべて
CSS処理	いいえ	はい
すべてのタグを処理	いいえ	はい
最適化	いいえ	はい

上記の通り、workerが勝利します。バックエンド（WordPress）でどのような変更を加えても、workerが画像リンクを変更できるため、最良のソリューションです。

Cloudflare Workerのセットアップ

最初に重要なことは、WordPressプラグインがインストールされて有効になっている場合は無効にすることです。このステップを飛ばすと、workerの効果がほとんど見えません。

2番目の非常に重要なことは、Google Pagespeed にアクセスして、画像リサイズなしでウェブサイトのテストを行うことです。後で違いを確認するために必要になります。

次に、Cloudflareアカウントに移動してWorkersに進みます。ここから「Create a Service」をクリックします。サービスに好きな名前を付けるか、自動生成されたランダムな名前をそのまま使用できます。スターターは「HTTP handler」のままにしておきます。

作成後、サービスをクリックし、右上の「Quick Edit」をクリックします。エディターが表示されるので、既存のコードをすべて選択し、Github の私のworkerに置き換えます。「Save and deploy」をクリックしてエディターを閉じます。

新しいサービスページで「Triggers」に移動し、Routesの下の「Add route」をクリックします。ルート内にウェブサイトのドメインをワイルドカードで設定します。例えば "example.com/*" のようにします。ゾーンには自分のドメインを選択します。私の例では example.com です。

以上です！

トラブルシューティング

画像がリサイズされないなどの問題がある場合は、以下の条件を確認してください：

画像はあなたのドメインの一部ですか？Cloudflareダッシュボードでこの機能を明示的に有効にしない限り、別のドメインの画像をリサイズすることはできません。
画像は書き換えられていますか？新しいworkerタブで"Logs"を有効にして、例外がないか確認してください。見つかった場合は、私のGithubリポジトリに報告してください。
画像リンクが間違って書き換えられていますか？その場合は、Githubで問題を報告してください。

ボーナス最適化

WordPressにはHTMLのbodyタグの直後にいくつかの空のSVGタグが含まれていることに気づいたと思います。何のことか分からない場合は、これを見てください：

正直なところ、これの有効なユースケースが理解できません。そのため、これを削除するための追加コードを追加しました。HTML出力が少し小さくなり、わずかな速度向上が得られます。

時間ができたら、さらなる最適化を追加する予定です。

コスト

Cloudflare Image Resizingを使用するには、この記事の執筆時点で、ウェブサイトにProサブスクリプション（月額25ドル）が必要です。画像リサイズサービスは、保存された画像100,000枚あたり5ドル、配信された画像100,000枚あたり1ドルから始まります。エグレスコストやリサイズ・最適化に対する追加料金はかかりません。

WordPressプラグインの使用は完全に無料で費用はかかりません。workerも比較的無料で使用できますが、制限は小さく、処理能力もやや低くなります。

有料のworkersプランとunboundオプションの使用を強くお勧めします。サイトに画像が多いほど、書き換えが必要なHTMLタグが増え、処理時間（GBs Duration）も増えます。

わずか5ドルで400,000 GB-sのworker制限が得られ、私のテストでは十分すぎるほどです。

ライセンス

多くの人が私のコードを取って販売していることに気づいたため、MITライセンスを使用しないことにしました。良くないですよ、皆さん。

そのため、新しいライセンスモデルはApache License 2.0を使用していますので、私の作品を再販しないでください。

便利なリンク

Webpagetest: https://www.webpagetest.org/
Google Pagespeed Insights: https://pagespeed.web.dev/
Workersの料金: https://developers.cloudflare.com/workers/platform/pricing/

私のCloudflare Workerがあなたのウェブサイトを大幅に改善すると強く信じています。正しければ、Githubでスターを付けてください。間違っていれば、代わりにフィードバックをお寄せください。

コメントをお待ちしています。