ここの常時SSLブログでJetpackのPhotonを有効にする

2016/11/27[公開]

 ここのデフよんサイトで、JetpackのCDNサービスであるPhotonを有効にしました。ちょっと前まで、PhotonはSSL通信ページでは利用できなかったと記憶していましたが、現在ではSSL通信サイトでもPhotonは利用できるようです。(ただし、通信ポート443に限る。)当サイトの環境では、有効にしても高速化の恩恵はほとんど無いようでしたが、せっかく無料で利用できるので有効にしておきます。まだ数日しか運用していませんが、他の高速化プラグインとの相性も問題なさそうです。

このページの目次

スポンサー リンク

無料のCDNサービス「Photon」

 WordPress.com公式プラグインのJetpackの一機能であるPhotonです。CDN(コンテンツ・デリバリー・ネットワーク)とは、サイトの画像などのデーターを超高速サーバーから代わりに配信してくれるサービスです。ここのサイトは自宅サーバーでの運用ですが、強力な援軍を得たような気分になるサービスです。しかも無料です。詳しくは公式サイトをご覧ください。

Photonを有効にする

 超定番のJetpackプラグインはインストールされている前提で、Photonを有効にする方法です。管理画面のJetpackのダッシュボードを開きます。パフォーマンス項目のところに画像のパフォーマンス(Photon) (Off)を (On)にすると有効になります。これだけです。画像のアップロード方法などは、いままで通りで大丈夫です。

Photonが有効な状態
Photonが有効な状態

SSLサイトでは

 Photonを有効にすると、ブログ記事の画像のURLが変更されます。例えば、ここの一つ前の記事で使っている画像のURLが、下記のように変わっています。i0.wp.comから画像が配信されています。&w=600 は元の画像の幅、 &ssl=1 でSSL通信が有効ということのようです。

https://def-4.com/wp-content/uploads/2016/11/kiyosuna2.jpg

   

https://i0.wp.com/def-4.com/wp-content/uploads/2016/11/kiyosuna2.jpg?w=600&ssl=1 

画像データサイズが小さくなる

 Photonから配信される画像は、元の画像よりも画像データサイズが約84%くらいに小さくなっていました。画像表示サイズは元のサイズのままなので、見た目の画質が少し荒くなるということです。

 いままで、ぎりぎりまで画像サイズを小さくしてアップしていたので、過去記事の画像劣化が少し心配ですが、ほとんど気にならない範囲でしょうか。

 元の画像Photon画像圧縮率
画像1103KB87.2KB84.6%
画像271.4KB60.2KB84.3%

表示速度の変化

 ページの表示速度は、ChromeブラウザーでF12キーを押してNetworkタブを開いた状態で、このブログの前回記事を開いてLoad時間で比較しました。キャッシュが効いていない初回表示と、何度かリロードしたキャッシュが効いている状態のふた通りでの結果です。リロードするたびにタイムがまちまちとなるので、キャッシュ有りの正確な時間は出せませんでした。

 ほとんど高速化の実感なしという感じです。というのも、ページがLoadされるまで200項目くらい読み込まれる内の、Photonから配信される画像は数個だけです。その他多数の項目はPhotonは関係ないので、焼け石に水ということでしょうか。

 Photon 無効Photon 有効
キャッシュ無し5.01s4.94s
キャッシュ有り2.3s-2.6sの間2.3s-2.6sの間

競合プラグインとの相性

 このサイトで利用している、サイト高速化系のプラグインは、ページキャッシュプラグインの「WP Super Cache」と、画像表示をページスクロールに合わせて遅延ロードしてくれる「Lazy Load」を利用していますが、特に問題なく動いているようです。これらのプラグインの公式ページを載せておきます。

有効のままにしています

 以上で、このブログでPhotonを有効にして運用することにしました。CDNサービスというのは、アクセス数が爆発的に増えたときに威力を発揮するらしいのですが、当ブログでは関係の無い話ですね。それでも、いままで画像データをぎりぎりまで削ってアップロードしなきゃという、強迫観念のようなものから開放された気分です。ほんの少し画像データに余裕をもってアップしていこうと考えが変わりました。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です