- 2014-6-21
- Update 2018-5-7
- Wordpress
ウェブサイトの更なる高速化
みなさんこんにちはミュンヘンのWeb担当mak utsunomiya(@munchen_stil)です！前回のWordPress高速化で使用したEWWW Image Optimizerで結構速くなったにも拘わらず。さらに上を見ていこうという企画第２弾です。
画質を落とさずにっていう所で、特にEWWWに不満があったわけではありませんが、落ちるといわれたらなんとな～く気になっちゃう・・・。
という事で、何とか画質を落とさずに高速化できないかとネットサーフィンを繰り返した見たら、良さげなものに出会いました。
それがJetpack by WordPress.comというプラグインです。
Photonとは？
JetpackはWordPressを運営するAutomatticが開発したプラグインなのですが、その機能の一つにPhotonというものがあります。
CDN(コンテンツデリバリネットワーク)サービスとか言うもので、ページの表示速度高速化に邪魔な画像を外部サーバーにキャッシュしサーバーの負担を減らせるという優れものです。
理論上は、画像読み込みに自分のサーバー使ってないから表示速度が上がるってものです。理論も机上だけではいけませんので、ここでもphotonの実力を調べるために実験をしてみたいと思います。
現在のページ速度
前回有効かしていたEWWW Image OptimizerとWP Hyper Responseを停止しての実験です。
まずは今回のページ速度
GTmetrixが4.41s 今日はまあまあ速いな。
Pingdomが5.52s こちらもまあいい感じ。
導入方法
- wordpress.comのアカウントを取得
- Jetpack by WordPress.comのインストール
- Photonを有効にする。
wordpress.comアカウントの取得方法
wordpress.comを開き、何も入力せずCreate Websiteをクリックします。(日本語サイトなら「登録開始)
日本語でも英語でも同じ項目を入力していきます。
コメントを頂戴し、調べなおした結果。WordPressアカウントの取得法に変更があったようです。完全ではないかも知れませんが、下記に私なりに調べた新アカウント取得方法を記載しておきます。尚、その方法で取得できなければ、再度コメントを頂ければおって調査してみたいと思います。
sign up for just a username(ユーザー名登録のみ)をクリック。
メールアドレス、ユーザー名、パスワードを記入し、Sing upをクリック。
こういった画面が出た後、登録したアドレスに認証メールが届いているか確認してください。
Activate Accountをクリックし認証を完了して下さい。
これで認証完了です。
Jetpackをインストール
- プラグイン新規追加
- Jetpack by WordPress.comインストール
- 有効化
- WordPressとJetpackの連携
- 管理画面 Jetpack
- Jetpack設定 photon有効化
プラグイン新規追加から「Jetpack by WordPress.com」をインストールします。
インストール後こういった画面が出てきます。ほぼ完了してますがもう少し設定していきましょう^^
WordPressとの連携をクリックすると次の画面になります。
WordPressアカウントで設定した情報を入力し、jetpackの認証をクリックします。
Photonにカーソルを合わせると、有効化ボタンが出ますのでそれをクリックします。これで設定完了です。
停止させたたい時は、再びここにカーソルを合わせると停止ボタンが表れますので、クリックして下さい。すぐに元の画像に戻せます。
画像プロパティでi2やi1.wp.comがついてると成功です！
有効後スピードテスト！
GTmetrixで3.83s！ 4.41sからスピードアーップ！
Pingdomで3.47s 5.52sからこちらも大幅にスピードアップしました！
スゲーっす！
キャッシュの削除ができない。
Photonはキャッシュの削除ができません。画像を差し替えたい場合は名前を変えてアップロードしなおしてください。
不具合
今の所不具合はありません。サーバー環境によっては遅くなる事もあるらしいので、ご自身の環境でお試しください。
追記！ WordPressアカウント取得法が変更されてる！？
コメントを頂戴した後、WordPressアカウント取得方法が大きく変わっている事に気が付きました。本当にありがとうございます。
以下に、新アカウント取得情報を記載させて頂いていますが、当ブログではすでにアカウント取得しているため、二重の登録は出来ません。
よって、憶測にはなりますが以下の方法で試されてみてください。
WordPress.comへアクセスし、サイトを作成をクリックします。
ドメインまたはキーワード欄に、任意のコードを挿入します。沢山のサイトを運営されているならば、そのサイトに関連するキーワードを入力しておいた方が後ほど管理しやすいかもしれません。
「どんな選択肢がありますか？」の欄には無料を選んでください。
任意のテーマを選択します。後で変更できるのでどれを選んでも良いと思います。
無料プランを選択します。
ここで、メールアドレス。ユーザー名、パスワードを入力して見てください。
沢山の選択肢が出てきますが、「これらの手順をスキップ」をクリックすれば、アカウント取得が出来ると思います。もしこれで出来なければ、コメント欄よりご一報いただけれ幸いです。
再度調査して報告させて頂きます。もし、「できた～^^」ってのもコメントいただけると嬉しいです^^
まとめ
思いのほかPhotonが良かったので、今の所このプラグインだけでOKな感じもします。あまり多くのプラグインを使いたくないだけに当分はこれで様子見しようかなと思ってますが、データベースのキャッシュ系プラグインを使ってみようか検討してる今日この頃です^^
PS.この記事を書いているときは、Photonは最強だと思っていましたが、実は思わぬ落とし穴があったのです！その理由はWeb高速化シリーズの中で明らかになります。その理由が気になる方は、続きをお読みくださいませ。
WordPress高速化第三弾！「001 Prime Strategy Translate Accelerator」にした理由。
