Jetpack Photon

今回はWordPressプラグイン［Jetpack］の機能のひとつ［Photon］のデメリットを紹介します。

「メリット」ではなく「デメリット」です。

現在オンズのウェブサイトでもPhotonを利用しています。
過去、オンズのウェブサイトでもPhotonを利用していました。

現在は利用していない理由は、以下で紹介するデメリットのため。

手軽に利用できる便利な機能ですが、無視できない問題があるので、よく理解したうえで使いましょう。

そもそも［Photon］とは？

［Photon］は本家 WordPress.com が提供している無料のCDNです。

CDN（コンテンツ・デリバリー・ネットワーク）とは、画像・音楽・動画など、データ容量の大きいファイルをネットワーク上のキャッシュサーバーに分散して保存して、オリジナルのWebサーバーに代わって配信する仕組みのこと。

特に画像を多く使うサイトでは［Photon］の真価を発揮しやすく、超高速でコンテンツを配信できるというメリットがあります。

［Photon］を使う方法

既にJetpackを導入しているなら「設定」メニューからワンクリックで［Photon］を利用できます。

［Photon］を有効化すると <head>〜</head> 内にDNSプリフェッチのコードが挿入されます。

<link rel='dns-prefetch' href='//i0.wp.com'>
<link rel='dns-prefetch' href='//i1.wp.com'>
<link rel='dns-prefetch' href='//i2.wp.com'>

これは特定のドメインの名前解決（DNSルックアップ）を先に行うことで、その後のファイルの読み込みを速度アップする仕組み。言わばPhotonを使う準備運動のようなもの。

そしてPhotonの機能で投稿や固定ページの中からCDNを利用する画像を探し出し、該当するimgタグを自動で書き換えてくれます。

仮に、以下のようなパスの画像があったとします。

http://example.com/wordpress/wp-content/themes/example/images/example.png

Photonを有効化すると次のようにパスが書き換えられます。

http://i0.wp.com/example.com/wordpress/wp-content/themes/example/images/example.png?resize=400%2C300

画像のパスの先頭にhttp://i0.wp.com/が挿入され、末尾には?resize=400%2C300が追加されます。

この末尾に追加されるコード内の数値は元の画像の「width」「height」から取得したサイズになります。

画像が表示されないときは……？

［Photon］を有効化した後にサイトを確認すると、スグには画像が表示されない場合があります。
これは最初のアクセス時にCDNサーバー側でキャッシュ画像を生成しているためです。
2度目以降のアクセス時には既にキャッシュファイルが生成された後なので『高速表示』を体感できます。

また他にはimgタグに「width」と「height」属性を記述していないと画像が表示されない問題が発生します。

さて。ここまでがPhotonの基本的な仕組みになります。

メリットばかりでデメリットなんて見当たらないように感じるかもしれませんが、やはり、使用にあたってはいくつかの注意が必要です。

［Photon］のデメリット

Photon導入にあたって注意すべきデメリットは次の4点。

  1. キャッシュを削除できない
  2. 他の画像処理系のプラグインと相性が悪い
  3. ［Photon］が効くのはデータベース経由でリンクされている画像のみ
  4. 画質が劣化する

以下、順に解説していきます。

キャッシュを削除できない

最大のデメリットはキャッシュを無効にできないことです。

一度Photonでキャッシュされた画像は永遠に削除できません。

オリジナルの画像に変更を加えたとしても、CDN上の画像は元のままです。
解決策としては、画像に変更を加えたときはファイル名も変える必要があります。

これを知らずに運営すると、閲覧者に古い画像を表示し続けることになるので大きなリスクになりますね。

キャッシュされた画像は［Photon］の機能を無効化したとしても、半永久的にネット上に残ることになります。

個人情報が含まれる画像など、利用する際は慎重に考慮しましょう。

他の画像処理系のプラグインと相性が悪い

例えば画像の遅延読み込みを行う「Lazy Load」系や、「Lightbox」など画像処理系のプラグインとの相性が悪く、正常に機能しないケースが目立ちます。
キャッシュ系のプラグイン［WP Super Cache］や表示高速化を図る［WP Hyper Response］なども機能が衝突してしまいます。

他にも、サーバー側でキャッシュ処理を行う「WPX」など、一部の特殊な環境でも画像が表示されなくなる問題が発生するようです。

［Photon］が効くのはデータベース経由でリンクされている画像のみ

Photonが反映されるのはデータベース経由でリンクされているimgタグのみです。
例えば「投稿」や「固定ページ」の本文内に記載されたimgタグがそれに該当します。

テンプレートに直接記載したimgタグはキャッシュされません。

画質が劣化する

容量の大きい画像の場合、画質の劣化が激しいです。

特にGif画像の劣化が著しいですね。

写真のクオリティを求めるサイトや、Retinaディスプレイに対応したい場合は利用を控えた方が良いでしょう。

高画質の画像ファイルを表示させるときにこそCDNを利用したいのに、ちょっと残念な仕様です。

まとめ

メリットだけ挙げるとスグにでも導入したくなる［Photon］ですが、紹介したデメリットも無視できません。

無料で提供されているCDNサービスでは［CloudFlare］が有名で、よく［Photon］と比較されていますが、やはりこちらも一長一短です。無料なので文句は言えませんが、もし、本格的にCDNを活用したいと考えるなら「Amazon CloudFront」などの有料サービスをお勧めします。

以上。くれぐれも［Photon］のご利用は慎重に。