画像ファイルを外部サーバーから読み込む Jetpack プラグインの CDN サービス「Photon」を使ってサイト表示を高速化しよう

サイト表示高速化には「Jetpack by WordPress.com」を使おう

WordPress.comを運営している「Automattic」が無料で提供しているプラグインに「Jetpack for WordPress.com」があります。2014年10月現在では30以上の機能が利用でき、しかもほぼ無料(一部のみ有料)となっています。

Jetpack公式サイト

今回はその中のCDNサービス「Photon」を紹介します。

CDN(Contents Delivery Network)のざっくりとした説明

CDN(コンテンツ・デリバリー・ネットワーク)というのは、次のようなイメージです。厳密な定義や、仕組みはググるなり、専門書籍を参考にして下さい。

まずCDNを利用していないサイトAの場合。サイトAを閲覧するとき、ユーザーはサイト運営側のサーバーにリクエストを出して、サイトを表示する画像等のデータを送受信しています。ユーザーとサイト運営側とが一本の線で繋がっているようなイメージでしょうか(サイト運営元サーバー → ユーザー)。

このようにユーザーが1人だったらとくに問題ではないのですが、サイト運営側で事前に想定していたより多くのアクセスがある場合には、サーバーへの負荷が非常に大きくなり、限界値を超えるとサーバーがダウンしてしまいかねません。そのような事態を防ぐなど、サーバーへの負荷を減らすための仕組みとしてCDNが利用されています。

CDNは次のような仕組みです。

サイト運営元サーバーにあるサイトAを構成している画像や映像、音楽といったデジタルコンテンツやHTML、CSS等のファイルなどを、複数台のキャッシュサーバーに同期させておきます。ようするにサイト運営元サーバーとユーザーのあいだに複数台のキャッシュサーバーを置いてやるわけです(サイト運営元サーバー → 複数のキャッシュサーバー → ユーザー)。

今度なこうなります。ユーザーがサイトAを閲覧するとき、はじめにサイト運営元サーバーにアクセスするのですが、その後が違います。CDNでは、コンテンツのやりとりをキャッシュサーバーが担当するのです。しかも、このキャッシュサーバーは利用者から最も近いところにあるものが行うので、ユーザーにたいするレスポンスが向上します。

そして2回目以降、このユーザーに対してはキャッシュサーバーが担当するよう設定します。その結果、多くのユーザーからのアクセスを分散し、サイト運営元サーバーへのアクセス負荷を軽減します。

また、ひとつのキャッシュサーバーがダウンしたとしても、稼働している他のサーバーが確保されていることで、サイトがダウンしてしまうことも防げます。高速かつ安定したコンテンツの配信を支える技術のひとつといえるでしょう。

画像ファイルを外部サーバーから読み込む「Photon」の機能

「CloudFlare」もいいようです

CDNとして有名で、多くのブロガーさんがおすすめしている「CloudFlare」があります。満足している方も多いので、こちらもいいかと思います。

CloudFlare公式サイト

ただ、ネームサーバーを変更したりするので、「設定方法がよくわかない」「もっと簡単なのはないの?」という人には「Photon」にするといいんじゃないでしょうか。たまにレンタルサーバーの仕様によって「CloudFlare」が使えない場合もあるようです。

「Photon」の公式ページ

公式サイトによる「Photon」の説明はこちら。

Photon — Jetpack for WordPress

Photon — Jetpack for WordPress

英文になりますが、そんなに難しい単語はないですし、あるいは翻訳サイトなどでコピペしていけば、すぐに内容も分かるはずです。

以下、Google翻訳をやってみました。

Photon
Photonは、WordPress.com上またはJetpackの接続されたWordPressのサイトでホストされているサイトのための画像の加速と編集サービスです。それはあなたの読者のために、ホストにあまり負荷とより高速な画像を意味します。

まあ、説明文のとおりですね。「Photon」では画像に特化してCDNサービスを行ってくれるようです。

使い方

設定方法は以下の通り。

  1. プラグイン「Jetpack by WordPress.com」をインストール
  2. 「WordPress.comと連携」して認証する
  3. 「Photon」の有効化

簡単ですね。5分くらいで終わります。

1.「jetpack by WordPress.com」のインストール

とくに画像付きで解説する必要はないと思います。現在のWordPress 4.0なら「プラグイン」→「新規追加」で、「おすすめ」としてすぐに表示されます。

おすすめに表示された「Jetpack」

表示されなければ「プラグインの検索」に「Jetpack by WordPress.com」を打ち込んでください。

2.WordPress.comと連携する

有効化したら、次はWordPress.comとの認証作業です。「WordPress.comと連携」ボタンが表示されています。

おそらくほとんどのWordPressユーザーは「Akismet」を利用しているはずなので、そこで取得したIDとパスワードをそのまま使えます。もしなければ画面の指示にしたがって、認証作業を行ってください。とくに問題なくできるとおもいます。

ついでに言うと、もしスパム対策プラグインの「Akismet」を使っていないなら、インストールすることを強く推奨します。

WordPress › Akismet « WordPress Plugins

3.「Photon」の有効化

さて、認証が済んだら、あとは「Photon」を有効化してください。

Jetpack ‹ かっぱのWordPress入門ログ — WordPress

設定画面に行き、有効化するだけで完了です。ボタンひとつで有効・無効を選択できます。

CDNが働いているかのチェック

たまにブログを見ていると「Photonを有効化したのでさっそく検証してみた! → Pagespeed Insightsの数値はぜんぜん変わらないぞ???」みたいな記事もありますが、ご安心を。「Photon」を有効化しても、サイトの画像データをキャッシュするのに数分の時間が掛かることがあります。「GTmetrix」や「Pingdom」で計測するときも、だいたい同じです。

ひとまずはコーヒーを淹れて小休憩してからお試しください。

「Photon」が有効になると、サイトにある画像のURLが「http://i1.wp.com/wp-kappa.com/…」「http://i2.wp.com/wp-kappa.com/…」のように変更されているのがわかります。

CDNを利用した画像のURL(46%)

こうなれば「Photon」は有効になり、CDNが機能している証拠です。ファイルサイズの大きな画像データはキャッシュサーバーから配信されるようになるので、サイトの高速化・安定化が向上しているとおもいます。

まあ、PV数が大きなサイトでもないと高速化が実感できないかもしれませんが、「Pagespeed Insights」「GTmetrix」「Pingdom」などの数値が改善されたことを楽しむのもいいですね。

以下でお試しください。

関連記事

「Autoptimize」:HTML・JavaScript・CSS の複数ファイルを連結・圧縮して最適化してくれるプラグイン

「Autoptimize」は簡単に複数のファイルをまとめて圧縮してくれるプラグインです。キャッシュ機能もついています。似たような機能を持つプラグインもありますが、それらでデザインが崩れたり、JavaScript がうまく働かないようでしたら、このプラグインを利用するとよいでしょう。

「WordPress Popular Posts」:サイトの人気記事をランキング表示させることができるプラグイン

「Wordpress Popular Posts」はサイト内の人気記事をウィジェットに表示させることのできるプラグインです。 投稿した記事が溜まってくると、人気のある記事が増えてくるものです。それをランキングにしてウィジェットに表示しておけ…