【WordPress】 高速化プラグイン おすすめ3つ 【ページ表示速度アップ】

   2015/03/25   icon-clock-o読了時間:約18分32秒

先日からサイトをスマホ最適化したり、デザインをちょっといじったりと改造と改装に余念のなかった私です。
あれこれやっている中で気になっていたのですが
どうやらこのブログは少し重い(ページ表示速度が遅い)ようで、
文章量もそこそこ多いし、画像も多めに貼っているので仕方ない部分もあるのですが
せっかく見に来てくださった方をお待たせして
イラッとさせてしまうのも申し訳ないなあと思って速度アップを試みました。

スピードアップ用のプラグインを新たにインストールして、
ついでに更新の止まっているプラグインを削除したり、現在の設定を見直してみたり。
すると結構いい感じにスピードアップできたので
私が現在お世話になっているプラグインとその使い方などをご紹介したいと思います。

これからWordPressを使う方や、今現在WordPressを使っていて
よりよい設定はないかと模索している方のお役に立てますように (=・ω・=)

 目次 

今のページスピードを確認する

プラグインを使うには

Unveil Lazy Load (画像表示制御)
 画面に見えている範囲の画像を先に読み込み、
 残りの画像はスクロールに合わせて読込んでいくプラグイン。

EWWW Image Optimizer(画像圧縮)
 画像ファイルのサイズを圧縮して、ページ表示速度を上げてくれるプラグイン。
  EWWW Image Optimizer の設定
   ∟Cloud Settings
   ∟Basic Settings
   ∟Advanced Settings
   ∟Conversion Settings
  画像をまとめて圧縮

W3 Total Cache (キャッシュ設定)
 キャッシュやサーバーについての設定を簡単に行えるプラグイン。
 インストール後に 「 有効化できない 」 というエラーが出る場合
  W3 Total Cacheの設定
   ∟General Settings (全体の設定)
   ∟Page Cache (ページキャッシュ)
   ∟Minify (ファイルの縮小・最適化)
 W3 Total Cache を入れたら WPtouch が動かない場合
 W3 Total Cache と Tribe Object Cacheの競合

今回ついでに削除したプラグイン
  ∟DB Cache Reloaded Fix
  ∟Ktai Style

今のページスピードを確認する

まずプラグイン導入前のページ表示速度を確認してみましょう。

PageSpeed Insights

スマホ最適化の時もお世話になったGoogleのデベロッパーツール。
サイトの表示速度と修正点を判定してくれます。
ページスピード

GTMatrix

Googleとyahoo、それぞれの評価基準を基にした表示速度の評価を出してくれます。
どこが宜しくないかも教えてくれるので便利。
ページスピード評価

プラグインを使うには

基本的にWordPressのプラグインは
・プラグインの詳細ページへのリンクなどからインストール
・プラグインの名称を検索して探してインストール
このどちらかでインストールして有効化することで使用できます。

検索する場合はプラグインページの上部【 新規追加 】をクリックして
検索ボックスからプラグイン名を検索してください。
プラグインの検索
以下のプラグインはタイトル部分にリンクを貼ってあるので
リンク先の詳細ページからインストールしていただければ大丈夫です。

また、プラグインを導入する前に必ず現状のバックアップを取るようにしてください
プラグインの競合などで不具合が起きて、自力で修正できなかった場合には
バックアップファイルを使って元に戻せるようにしておきましょう。

Unveil Lazy Load (画像表示制御)

Unveil Lazy Load
画面に見えている範囲の画像を先に読み込み、
残りの画像はスクロールに合わせて読込んでいくプラグイン。

最初に一気に画像を読込まないことで、ファーストビュー
(ページを開いたときに最初に画面に表示される範囲)の表示速度を上げることができます。
ファーストビュー
インストールして有効化するだけの簡単設定です。

詳細はプラグインの作者 まるぼん様のページからご覧ください。
[試] 画像遅延ロード対象の最適化で体感表示速度向上! WordPressプラグイン Unveil Lazy Load
Unveil Lazy Loadの他にも色々なお役立ちプラグインを作成していらっしゃいます。

EWWW Image Optimizer (画像圧縮)

EWWW Image Optimizer
画像ファイルのサイズを圧縮して、ページ表示速度を上げてくれるプラグイン。
アップロードした画像を自動で圧縮してくれて、
更に今まで投稿した画像もまとめて圧縮できるのでとても便利です。

EWWW Image Optimizer の設定

Cloud Settings
有料のオプションサービス設定なので放っといて大丈夫です。

Basic Settings
『 Remove metadata 』の項目にチェックを入れましょう。
ここで言うメタデータとは EXIF 情報(写真の撮影日時や位置情報)などのことです。
カメラの設定によっては緯度・経度などの位置情報が画像に埋め込まれることがあり、
そのままWeb上にアップロードするとそういった情報もオープンに晒されてしまいます。
という訳で個人情報を守るためにも、画像のサイズを減らすためにも
ちゃんと情報を消しておいてもらいましょう。
EWWW設定01Basic-Settings

Advanced Settings
デフォルトで『 disable pngout 』にチェックが入っていると思いますが念のために確認してください。
別にpngoutを使ってもいいと思うのですが、設定がややこしく扱いづらいので私は無効化しています。
EWWW設定02Advanced-Settings

Conversion Settings
『 Hide Conversion Links 』にチェックを入れてください。
JPG画像をPNG画像に変換することがある!という方はここのチェックを外して
その機能メニューを表示させておいても良いのですが、そういった場面はほぼ無いかと思うので
間違えてクリックすることがないように表示を隠しておくことをおすすめします。
EWWW設定03Conversion-Settings
残りはデフォルトの設定のままで大丈夫だと思います。
設定したら【 Save Changes 】をクリックして設定を保存してください。

画像をまとめて圧縮

設定が完了したら、今までアップロードした画像のサイズを一気に圧縮しましょう。
画像の量によってはちょっと時間がかかるので、他の作業の合間にでもお試しください。

メニュー内の【 メディア 】から【 Bulk Optimize 】(一括圧縮)を選択。
Bulk Optimize
Optimize Media Library【 Start optimizing 】ボタンをクリックすると圧縮開始。
Start optimizing
これで今までWordPressで使用していた画像を一括で圧縮できます。
私が約1000枚の画像を圧縮するのに掛かった時間は約15分でした。
サイズのことを何も考えずぽいぽいアップロードしてきたので
結構大きい画像もあったのですがその割には速かったように思います。

W3 Total Cache (キャッシュ設定)

W3 Total Cache
キャッシュやサーバーについての設定を簡単に行えるプラグイン。
WordPressの高速化プラグインの中でも特に有名なプラグインですね。

ポイント : キャッシュクリアの活用

新しいプラグインを入れたとき、更新したとき、デザインを変えたとき、など
WordPressの状態を変更したときには古い情報から更新するために
 【 empty All caches 】 でキャッシュクリアを行ってください。

エラーが出たら

インストール後に 「 有効化できない 」 というエラーが出る際は
wp-config.phpファイルに以下の記述を追加してください。

更にwp-config.phpファイルを編集後、アップロードの際に上書きができない場合は
属性(パーミッション)を確認してオーナーの書込みを許可してください。

また、W3 Total Cache日本語版 というのもあるのですが、こちらは最終更新日が2012年ですし、
下手に日本語化すると項目の詳細を検索したいときに元の英語項目名がわからなくて困りそうなので
私は英語のままで使っています。
やっぱり日本語のほうが使いやすいし、という方は上記のリンクからインストールしてみてください。

W3 Total Cacheの設定

本当は他のプラグインとの兼ね合いや、サーバーへの負担など
色々なことを考えつつ調整しないといけないのですが
まだ分からないことが多いので、ひとまず私はこうしてみた、という設定をご紹介します。
何か不具合が起きた場合や修正した場合はこちらに追記していきますね。

基本的には初期状態で、ちらほら変更・保存していきます。

General Settings (全体の設定)

W3ジェネラル設定01
(※1)WordPressテーマのCSSファイルなどをMinifty(縮小)してサイズを減らしてくれます。
不要な余白や記述のムダを省いてくれたりとか。
基本的にはチェックを入れて有効にしておくと良いと思いますが、
お使いのテーマなどによっては不具合が起こる可能性もありますので様子を見ながら設定してください。

私の場合はONにしてAutoに設定すると
「 設定を保存できない 」、「 正しくオートで動作しない 」 などの
エラーが発生してしまうので(何が原因なんだろうか・・・テーマかなあ) 仕方なくManual に設定しています。
でも勝手に色々変えられてしまうよりはManual のほうがいいのかも。

(※2)いろんなサイトさんの説明を拝見したところ、基本的にAutoにすると良いようです。
これもお使いのテーマによって不具合が出る場合はManual(手動)にするか、
Miniftyのチェック自体を外して無効にしてください。
上でも書きましたが、勝手にCSSを編集されると困るときもあるので
AutoよりManualのほうがいい気もします。

以下の各キャッシュのメソッド(Page cache methodやDatabase Cache Methodなど)は
デフォルトで『 Disk 』になっていると思いますが、
レンタルサーバーなどの共有サーバー(shared server)以外の
自社サーバーを使っている方であれば他の設定にする必要があると思います。
W3ジェネラル設定02

『 Reverse Proxy 』、『 Monitoring 』、『 Licensing 』の設定。
ここでは特に変更の必要はないかと思います。
リマースプロキシが何かについては以前の記事【WordPress】 セキュリティを向上させるプラグイン
『 リバースプロキシってなんだろう 』の項目で考えてみたので宜しければついでにご覧ください。
この記事の中でパーミッションについてもご説明しています。
W3ジェネラル設定03

miscellaneous (各種設定)
W3ジェネラル設定04
(※3)『 Enable Google Page Speed dashboard widget 』のチェックは
Googleのページ速度の計測ツールを使うかどうか。
私は普段からPageSpeed InsightsやGoogleウェブマスターツールをWeb上で使っているので、
プラグインで重複して確認することもないだろうということでここではチェックを外しています。

Page Cache (ページキャッシュ)

各ページのキャッシュを残すかどうかの設定です。
基本的に下記の2項目にチェックを入れておけば良いと思いますが、
その他の項目もキャッシュを残したい場合は適宜チェックを入れてください。
※ここでチェックを入れた項目は自動で最新の情報に更新されないことがあるので要注意!
W3ページキャッシュ設定

『 Cache Preload 』、つまり事前にキャッシュを準備しておくかどうかの設定です。
サーバーに対する負荷が大きくなってしまうのでチェックを外しておきましょう。
W3ページキャッシュ設定02
残りのページキャッシュ設定はデフォルトのままで問題ないはずです。

Minify (ファイルの縮小・最適化)

『 Rewrite URL structure 』は、URLのリライト構成についての設定です。
URLをリライトする=書き換えるということは、URLを正規表現に変換するということです。

たとえばこのようなURLを
wp-content/w3tc/min/index.php?file=honyarara.css
こう ↓ 書き換えます。
wp-content/w3tc/min/honyarara.css

中身は何も変わらないのですが、URLから不要な部分を削いで、
ユーザーや検索エンジンに対して見栄えをよくしている状態です。
どうせなら設定しておいたほうが良いと思うのでチェックを入れておいてください。
W3 Minifty設定

その他の設定はデフォルトのままで問題ないはずですが、
WordPressやプラグインの設定によってベストな設定も違うと思いますので
ご自分にとってより良い設定を探ってみてくださいね (ノ´∀`)ノ

W3 Total Cache を入れたら WPtouch が動かない場合

W3 Total Cache を設定してスピードアップできたーと喜んでいたら、
今度はWPtouch(WordPressをスマホ最適化してくれるプラグイン) が動かなくなっていました・・・orz
どうやらスマホ対応のことを考えずキャッシュを扱うのでおかしくなってしまうようです。

しかしiPhone 研究室様の記事
WordPress の W3 total cache と WPtouch を併用するには除外設定が必要だ to @donpy 』を拝見して
意外と簡単な方法で直すことができました!ありがとうございます!
こちらの記事が2012年に書かれたもので、ちょっぴりプラグインの構成が変わっているようなので
ここでも改めて説明させていただきます。

WordPressメニュー内【 Performance 】の中から【 Minify 】を選択
W3 Total Cache修正01
真ん中くらいの『 advanced 』の項目の中の『 Rejected user agents 』に以下の記述を入力。

【 Save all settings 】をクリックして設定変更を保存。
W3 Total Cache修正02

設定を変えても何も変わらないよーという時はキャッシュが残っているのかもしれませんので
【 empty All caches 】でキャッシュのオールクリアを行ってください。
empty All caches
これでWPtouchがちゃんと動いてユーザーエクスペリエンスの診断結果もOKになる・・・はず!
修正後のPageSpeed Insights

W3 Total Cache と Tribe Object Cacheの競合

今回ご紹介しているUnveil Lazy Load、EWWW Image Optimizer、W3 Total Cache 。
この3つで落ち着く前にTribe Object Cacheを入れてみたことがあったのですが、
W3 Total Cache と競合してしまってエラーが起き、ちゃんと動かなかったので削除しました。
設定を色々触ってみたのですが、結局なんで競合したのかが突き止められず U・x・U
サーバーがAPC対応でないとか、PHPのバージョンが合わないとかなのでしょうか。
他のプラグインで充分速くなったのでまあいいかとこの謎については忘れることにします・・・。

今回ついでに削除したプラグイン

何年も更新が無いプラグインはセキュリティに問題があったり、
新しいバージョンのWordPressやプラグインに悪影響があったりするかもしれません。
そこで私はたまにプラグインの見直しをしては更新が停滞している
プラグインを停止したり削除したりしています。

DB Cache Reloaded Fix

キャッシュをクリアしてくれるプラグイン。
今回 W3 Total Cache を入れたことですし、2012年から更新されていないようなので削除しました。
削除する前後で表示速度の評価も変わりませんでした。

Ktai Style

ガラケーでの表示を整えてくれるプラグイン。
こちらも2011年から更新が無いようなので削除しました。
削除するとちょびっとだけスピードアップしました。
今はスマホ隆盛なのでまあいいかなと思うのですが、
これからもしガラケーが盛り返してきたらまた新しいプラグインを探すかなにかしないといけませんね。

今までお世話になりました。
各プラグインの作者様、ありがとうございました!

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket