wordpress激重!ブログを2倍以上高速化したプラグインとITサービス

公開日:2013年7月4日 

wordpress激重!ブログを2倍以上高速化したプラグインとITサービス

ページ表示速度、当初は7.12秒だったブログが、3つのプラグインと1つのサービスを使って3.13秒になった話です。quick cacheとwp minifyと001 Prime Strategy Translate AcceleratorとCloud Flareを導入しました。


追記:2014.9.21
現在は「quick cache」をはじめ、この記事で言及したプラグインを使っておりません。いろいろ比較した結果、W3 Total Cacheが最速でした。以前と同じ計測サイトで今では3秒以内があたりまえに出るようになりました。W3 Total Cache、おすすめです。

さらに追記:
現在当ブログはWordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』を使用しております。
wpXは標準でキャッシュプラグインのようなシステムになっているので、キャッシュ関係のプラグインのことは一切考えずに運営できてます。

当ブログKhamsin-noteは割とヘヴィです。2倍早くなったと言っても「1秒を切った!」という派手な内容ではありません。
当ブログが重くて遅い理由としては、レスポンシブ・ウェブデザインのテンプレートを使っていたり、画像が多めだったり、画像のダイエットをしないで使っていたり等々があげられます。

GTMetrixで測定した結果、当ブログのトップページは完全に表示されるまでに、7.12秒という男子高校生が50m走りきれるくらいの時間がかかってました。

wpsu1

文字小さくてすみません。7.12秒です。

さすがにマズイと思い手軽にできる4つの対策をしたところ、結果的にNo対策時より2倍早くなりました。
各測定は2〜3回測定して良い結果を載せてます。

高速化の定番、キャッシュ系プラグインはquick cache

http://wordpress.org/plugins/quick-cache/

wordpress(当ブログで使ってるシステム)のプラグイン(後から追加する機能)の「quick cache」を導入。
キャッシュ系プラグインは他にもいろいろあり、評判がいいのはW3 Total Cacheというプラグインなのですが、プラグインがバッティングしてるのか何なのかわかりませんが、当ブログでは使えなかったのでquick cacheをインストール。

設定は英語なのでよくわからなかったが、「Quick Cache (on / off )」をonにして、「Cache Expiration Time」を432000秒(5日間)に設定しといた。

・そもそもキャッシュって?

当ブログで使用しているブログシステムのwordpressは、ページのリクエストがきてからページを作成します。(これを動的ページという)
メリットとしてはページの内容が常に新鮮ということです。しかし、個人のブログなんてブログ主が更新しなきゃ内容はいつも同じです(コメント欄とか主以外が更新する部分もありますが。)
いつも同じ状態が続くなら、予めページを作っておけばリクエストがきたらすぐに渡せます。

これは、ご注文を受けてからパティ(ハンバーグ)やバンズ(パン)を焼き始めるモスバーガーと作り置きしてる******の違いのようなものです。
美味しいのはモスですが、早いのは***です。I’m loving it.
(作り置きしてるというウラ取ってないので伏字にしました)

ちなみに動的ページに対して、作り置きしてるページの事を静的ページと言います。
動的ページと違って、会議やミーティングで口に出すとちょっと恥ずかしかった記憶があります。

で、効果ですが「4.30秒」。 いい感じに効果ありました。

wpsu2

4.30秒

複数のCSSファイルをまとめてくれるwp minify

http://wordpress.org/plugins/wp-minify/

測定サイトでは、各項目を細かく診断してくれます。
当ブログは管理・メンテナンスの観点から複数のCSSファイルを使ってます。それをいい具合にまとめてスリム化するのが、wp minifyというプラグインです。(すべてのCSSファイルを1つにまとめるわけではないので“いい具合に”と表現しました)

で、測定結果は「4.12秒」
これくらいだと早くなったのか誤差なのか判断つきませんが、quick cacheを導入しても83ポイントだった「Minify CSS」の項目が97ポイントになったので善しとします。

wpsu3
wpsu4

4.12秒 minify cssは97ポイントになりました。

サーバーを分身させるCloud Flare

追記:2014.4.26
いろいろありまして、現在はCloudflare使ってません。

mac chromeのエラー コード: ERR_EMPTY_RESPONSEの原因はCloudflareだった

Cloud Flare

これはwordpressプラグインではないので、独自ドメインでサイトを運営している方でしたら誰でも無料で導入できます。(大規模サイトやSSL使ってるサイトは有料版が必要です)

WordPressをCDNのCloudFlare(クラウドフレア)で爆速に!その設定方法とは?

設定方法は上記サイト様を参考にしました。

んで、測定結果は「3.56秒」ノーマル状態の半分になりました。つまりここまでで2倍早くなりました。

wpsu5

3.56秒

でも、おそらくこの結果は誤差だと思います。Cloud Flareを使う場合、ネームサーバーをcloud flareにします。ネームサーバーというのは反映されるまでに時間がかかるので、翌日測定しました。

wpsu6

3.21秒

「3.21秒」ネームサーバー設定反映後に遅くなったらどうしようかと思ってましたが、何度計測しても以前よりいい感じです。

・Cloud Flareは使ってるサーバー名を隠せる??

余談ですが、ブログやWEBサイトはどこの会社のサーバーを使ってるのかは公開情報になってます。
このようなサイトでURLを入力すればいろいろ情報がでてきます。

当ブログの場合エックスサーバー
という会社のレンタルサーバーを使っているので、以前はその情報を見ることができたのですが、cloud flare導入後はその情報はcloud flareになります。

wpsu8

このブログのサーバーがスイスにあることになってます。なんかカッコいいです。(必ずしもサーバーのIPアドレスから正確な位置がわかるわけではありません。)

日本語化ファイルをキャッシュする001 Prime Strategy Translate Accelerator

http://wordpress.org/plugins/001-prime-strategy-translate-accelerator/

もともとwordpressの内部は英語表記です。でも日本語でも使えるように対訳ファイルというのが入っていて内部で翻訳してます。詳しい説明は下記の開発に関わった方のブログでご確認ください。

WordPressの実行時間を短縮させる「001 Prime Strategy Translate Accelerator」

導入した結果「3.13秒」
より早くなりました。

wpsu7

3.13秒になりました

今回試した施策は、すべていい結果になりました。
ページの読み込み速度はSEOにも関係するので、やっといた方がいいですね。
今後は1秒以内を目指そうと思います。

計測結果の詳細によると一番足を引っ張っているのが、ソーシャルボタン(‘いいねボタン”とか‘はてブボタン”)ですね。最近では特にfacebookプラグインが重たくて困ってます。


4 Responses to “wordpress激重!ブログを2倍以上高速化したプラグインとITサービス”

  1. コメパンポテト より:

    大変参考になりました。
    紹介されているプラグインを入れてみて動作を確認してみます。僕のサイトは今のところD、D評価で5秒かかりました。ちなみに元マ〇クでバイトしてましたが仰せのとおりでございます。

    • Kenta Mizuguchi より:

      コメパンポテト様
      当ブログをご覧いただきありがとうございます。ブログを拝見いたしましたが、体感はけっこう軽くてサクサクですね。また、マ◯クの件、情報ありがとうございます笑。

      • コメパンポテト より:

        返信ありがとうございます。あの後試行錯誤して、プラグインを使わない方法でやってみました。何とか評価は良くなったと思います。
        今のところ僕のサイトの場合、TOPページのアフィリリンクの画像箇所serve scaled imagesがF評価だったので、画像を最適化しただけで随分と評価の方は良くなりました。表示速度に関しては、共有サーバーなのか3秒~5秒と推移しますが、キャッシュ系プラグイン無しでも今のところ問題ない感じです。コンテンツが充実してくると結局は難しいところですが、遅くなりだしたらキャッシュ系プラグインを使っていこうと思います。長文失礼いたしました。

  2. 水口兼太 より:

    海外からのスパムが多いのでコメント欄閉じます。