今回は、CDN(コンテンツデリバリーネットワーク)を用いてブログを高速化する方法です。
これまで、このブログには以下の四つの設定を一つ一つ施してきました。
これらの設定は、一つ一つ行っていけば、さほど難しくはありません。おまけに、ブログの見た目も変化させる必要もなく、結構な効果があるので、お勧めの設定です。
さて今回は、CDNを利用したWordpressプラグインの「Photon」という機能を利用して高速化を図りたいと思います。
photo by Marcus Ruhkiek
目次
CDNとは?
CDNとは、コンテンツデリバリネットワークの略で、、画像や音楽のようなファイルサイズの大きいデジタルコンテンツを、配信するためのネットワークです。
閲覧者とサーバーの間にCDNを置いて、そこに大きなファイルのキャッシュが作成されることで、画像はCDNから、HTMLは自前のサーバーから、と負荷を分散することで表示速度改善を図るためのものです。
今回はそのCDNを利用するために、「Jetpack by WordPress.com」というプラグインの機能の一つ「Photon」を利用したいと思います。
「Photon」の設定方法
JetPackは、wordpress.comを運営しているautomattic社のプラグインなので安心して使うことができます。
設定などもとても簡単に行うこともできます。主な手順は以下です。
- 「wordpress.com」のアカウントを持っていない場合は取得。
- 「Jetpack by WordPress.com」プラグインのインストール。
- 「Photon」機能をONにする。
ブログの高速化をしようという人が、プラグインのインストールの仕方をわからないなんてことはないと思うので、3から説明します。
まずは、Wordpress管理画面から、「Jetpack→設定」に移動します。
Jetpackの機能一覧が表示されるので、その中にある「Photon」のところにマウスオーバーし、「有効化」してください。
これで、CDNがもう使えるようになっています。めちゃくちゃ簡単ですね。
Photonが有効化されると、以下のように表示されます。
設定前と後の変化
さて、設定の効果はあったでしょうか。PageSpeed InsightsとGTmetrixとWebsite speed testで、設定前後のスコアを計測してみました。
PageSpeed Insights
だいたい同時刻に計測。
設定前
設定後
特に変化はありませんでした。提案的にも変化なし。
GTmetrix
だいたい同時刻に計測。
設定前
設定後
あらあら、下がってしまいました。ページロード時間も増えています。
Website Speed Test
だいたい同時刻に計測。
設定前
設定後
こちらは、スコアが少し上がり、ページ読み込み時間も少し早くなりましたが、大した変化はない模様。
まとめ
今回の、CDNを用いた高速化は、あまり変わらないという結果になりました。
調べたのがトップページで、大きな画像が少ないからかなと、画像の多い記事のページで同様に試しましたが、結果は変わらず。もしくは、少し遅くなるといった感じでした。
これらの原因として以下のようなことが考えられます。
- このブログは、CDNが必要なほどアクセスがなく負荷がそれほどない
- 使っているサーバー(XSERVER)がいいので今のところ必要ない
このブログは、1日に、3000PVくらい。XSERVERを使っていて、これぐらいのPVだとCDNは、まだまだ必要ないようです。
おそらく、PVが1日に、1万、2万を超えるようなブログであれば、負荷分散のため必要になってくるのではないかと思います。
基本的に、XSERVERを使っている場合は、サーバーが優秀なので1日5000未満のPVなら特に必要ないのかも。このブログに全く高速化設定を施していない時に、1日2万3000PV来た時も、特に問題はありませんでした。
高速化設定をしてない状態で、トラフィック増大時に、サーバーが落ちた様子もない模様。サーバーもデフォルトのWordpressも優秀です。
ということで、このブログに1日何万のアクセスが恒常的に来ることなんて、ありえないので、こっそりとPhotonの機能はオフにするのでした。
そして、こっそりとXSERVERの宣伝。
Photon Jetpackの読み込み速度について、
1つの画像に対して、最初と2回目の読み込み速度は遅いですが、3回目以降は速くなります。
レイテンシ平均およそ30msの、読み込み速度平均9Mbpsになります。
たぶん、2回目の読み込みでキャッシュを持ってくれて、3回目以降で速く表示できる、かと思われます。
なので、計測用に表示させるすべての画像をあらかじめ画像単体読み込み+2~3回リロード(しかもCtrl + F5)やっておけば、また結果は違うのかも知れません。