WordPressのCDN(Photon)を有効化しました

2014年5月3日2016年1月23日Web-log・ココログ関連,WordPress,パソコン・インターネット

CDN (Cloud Delivery Network)としてはCloudFlareが有名ですが、次の事から躊躇していました。

NS管理を渡す事になり、WordPress管理画面の情報などもCloudFlareに筒抜けになる
httpsプロトコル(SSL通信)に対応するには、Proバージョン(月額$20)にする必要がある

HTTPSは利用したいけど、月額$20は高いよな…。それと、GoDaddyにしてから、サーバリソースが不足気味なので、救済したいな〜。

そう思っていたら、次の記事を見つけました。ありあとうございます。次の記事では、JetPackやPhotonの有効化の方法が出ていますので、ご参照ください。

CloudFlareよサヨナラ！ WordPressの表示速度が改善するプラグイン「Photon」

WordPressのプラグインJetPackの機能の一つに、Photonと言う、WordPress社が運営しているCDNを利用する機能がありました。これを使うと、画像ファイルのみ、WordPress社のサーバからダウンロードできる様になります。このプラグインを有効化する事で、画像ファイルを指すURL(imgタグ)のリンク先が自動的に書き変わります。

それと、Photonは、簡単に有効化と停止ができますので、簡単に試せます。

CDN(Photon)利用前。

CDN(Photon)利用後。

imgタグのURLが、i*.wp.comに変更になっています。

GTmetrixを使って、速度を比較してみました。さらに、上記リンク中で紹介のあった、実際のブラウザ側での表示時間を計測する方法を試してみました。

項目	サーバー博士	GoDaddy	GoDaddy+Photon
Top
Page Speed (Google)	A (91%)	B (89%)	B (89%)
Yslow (Yahoo)	B (84%)	B (84%)	B (84%)
Page Load Time (sec)	4.44	3.26	2.71
Page Size (kB)	226	275	300
Requset	41	48	46
ブラウザ時間 (sec)	–	6.84	3.28
Page
Page Speed (Google)	A (90%)	C (79%)	B (87%)
Yslow (Yahoo)	B (80%)	C (79%)	B (80%)
Page Load Time (sec)	7.01	3.68	3.35
Page Size (kB)	317	632	427
Requset	52	64	63
ブラウザ時間 (sec)	–	9.4	4.69

確かに速くなっています。

ですが、Yslowにおいて、CDNを利用しているとは認識されていない様です。

CSSなどが対象外だからでしょうか? また、テーマファイル中の画像も、CDN(Photon)の対象外の様です。

ブラウザ側での表示時間の計測です。

【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | Web担当者Forum

CDN(Photon)利用前のTopページ。

CDN(Photon)利用後のTopページ。

CDN(Photon)利用前の人気ページ。

CDN(Photn)利用後の人気ページ。

ブラウザ側で計測しているので、ブラウザの速度の影響も出ます。これらは、Firefoxでの計測結果です。Chromeを使うと、もう少し速く表示できます。Chromeの方が、ブラウザとして高速なのですね。ちなみに、Safariだと計測できませんでした。

また、WordPressから、画像のWidthとHeightを取れなくなってしまう様です。

<img src="https://i1.wp.com/oichinote.com/manakana/files/2012/02/mkg-kana-lovely-wedding.png?resize=150%2C150" width="" height="" alt="佳奈さんLovely Wedding" />

widthとheightが空になっています。CDN(Photon)を有効化しない時は、それぞれ150が入っていました。ページソース中にwidthとheightを書いてある場合も消えてしまいます。

<img src="https://i2.wp.com/oichinote.com/plus/files/2013/05/20130519peter-rabbit-garden.png?resize=480%2C289" alt="ピーターラビットガーデン野菜の収穫量とXP" class="alignnone size-full wp-image-8172" data-recalc-dims="1" />

これが難点です。

意外だったのが、httpsプロトコル(SSL通信)でも、WordPressのCDN(Photon)が有効な事です。