JetpackのCDN機能であるPhoton使用をURLによって切り分ける方法

Jetpackプラグインには、サイト上の画像をCDN配信してくれる機能(Photon)があります。

Serve images from our servers

この機能を利用することで、サイト転送量の大部分を占める画像ファイルの配信を、CDN(コンテンツ配信ネットワーク)に任せることによって、サイト負担を減らすことができます。

加えて、Googleに合わせた画像圧縮を行ってくれるので、PageSpeed Insightsといったような高速化チェックツールに最適化した画像を配信してくれます(※画像は多少劣化する)。

スポンサーリンク
レクタングル(大)広告

Photonの問題点

ただ、残念なことにPhotonは投稿内容の画像がすべてCDN配信されてしまうため、サイトの設定状態によっては、ちゃんと表示されないということもあります。

僕が運営しているサイトでも、「プラグインの機能との兼ね合いにより、外部リンク画像をPhotonでCDNを配信すると画像が表示されない」という不具合が出てしまいました。

なので、「外部リンク画像の場合はPhoton(CDN)を使用しない」という設定をする必要が出てきました。

ただ、JetpackのPhoton機能には、細かな設定項目はありません。そうなってくるとコードでカスタマイズするしかありません。

なので、「JetpackのCDN配信に割り込めるフックはないものか」と探してみたら、そのものズバリの良いものがありました。

というわけで以下では「画像URLによってJetpackのCDN配信を切り分けるWordpressカスタマイズ方法」を自分用のメモがてら紹介です。

JetpackのCDNをURLによって制御するサンプルコード

というわけで、以下がサンプルコードです。これをテーマ(子テーマ)のfunctions.phpに貼り付けて、条件を指定すれば利用できます。

今回使用したフックはphoton_validate_image_urlです。

ソースコード部分はGitHubで見ることができます。

jetpack - Increase your traffic, view your stats, speed up your site, and protect yourself from hackers with Jetpack.

まとめ

今回のカスタマイズは、以下のような人には向いているかと思います。

  • Photonが特定の「画像URL条件」によって正常動作しないことがある
  • 画像形式によってPhotonを利用するかどうか制御したい
  • 自サーバー以外の画像はPhotonを利用したくない

これ以外にも、今回紹介したphoton_validate_image_urlフックを利用することによって、結構表示条件を細かく制御出来るかと思います。

参考 Jetpack Developer Resources