PageSpeedの赤点脱出!WPサイトを高速化する6プラグイン

how-to-pagespeed-up.jpg

サイトの読み込み高速化の為の6つのプラグインについてまとめてみました。

高速化プラグインを導入する

プラグインの導入で以下のことができるようになります。

  • HTMLの再整形
  • 画像のサイズをロスレス
  • 画像の読み込み時間の遅延

プラグイン導入前は、下の状態でした。
pagespeed-Without-Plugins

PageSpeedでのモバイル表示の場合の赤点と、GT-Matrixでの、ロードタイムが7.34sというのが特にひどいですね(-_-;)

これらを6つのプラグインだけでどこまで改善できるかやってみました。

導入したプラグイン

001 Prime Strategy Translate Accelerator

翻訳ファイルの読み込みをキャッシュ化し、表示までにかかる実行時間を短縮します。

設定はこちらの記事を参考にさせていただきました!
翻訳キャッシュ系プラグイン比較!WordPress日本語版を高速化 – ゆめぴょんの知恵
URL:http://wispyon.com/translate-accelerator/

EWWW Image Optimizer

ワードプレス内の画像のファイルサイズを減らします。
設定はバズ部さんの、「EWWW Image Optimizer の設定方法と使い方」に従って設定しました。
URL:http://bazubu.com/ewww-image-optimizer-23864.html

新しい画像をアップしたら、上の記事の後半部分のBulk Optimizeを行うことをお勧めします。

Head Cleaner

WordPress サイトの <head> の中身と、フッタ領域を整形しなおします。
HeadCleanerの設定は以下のようにしました。
HeadCleaner設定画面

この下に検出されたjs一覧がありますが、その中に『wp-admin』が含まれているjs場合、ログイン中のサイト表示がおかしくなる場合があるので、適宜、対象外(=適用しない)にチェックを入れてください。
wp-admin関連は対象外にする

Lazy Load

画像の読み込みを遅らせ、ページのロード時間を改善します。
このプラグインはダウンロード→有効化だけでOKなのですが、表示がぎこちない・・(-_-;)と感じる方は、下の記事が参考になると思います。

画像を後から読み込むプラグインは「Lazy Load」にするべし!読み込み速度を改善し、表示をスムーズにする方法URL:http://gori.me/wordpress/28403

W3 Total Cache

WordPressへブラウザ、ページ、オブジェクトとデータベース·キャッシングなど縮小するとコンテンツ配信ネットワーク(CDN)を追加し、サイトの速度とユーザーエクスペリエンスを向上させます。

こちらもバズ部さんの記事を参考に設定しました!
W3 Total Cache のおすすめの設定方法
URL:http://bazubu.com/w3-total-cache-23854.html

この5つのプラグインで、以下のような結果になりました。
pagespeed-With-5Plugins

パソコン表示はもう少しで合格点(85点以上)に達しそうですが、PageSpeedでのモバイル表示の場合の赤点はまだまだ、ですね。

GT-Matrixでの、ロードタイムは4.04s、もう少し何とかしたいですね。

「修正が必要」な項目を見ると、CSSが読み込み速度を遅らせています。
pagespeed-plugin5result

Autoptimize

さらにCSSとJavaScriptコードを連結・圧縮し、ウェブサイトを最適化するプラグイン、Autoptimizeを加えてみました。

Autoptimizeでは、設定は以下のようにしました。
Autoptimize

6つのプラグインの導入・設定の結果

結果は、以下のようになりました。
pagespeed-With-6Plugins

かなり高速化ができてきました!
参考にさせていただいた記事のAuthor様方、本当にいつもありがとうございます<(_ _)>

後は、ソーシャルのボタンの設定などを工夫すれば、もう少し表示を早くできると思いますが、それはまたの機会に(^^)

ではでは、お役に立てたら幸いです!(^^)

Published:2015/03/03

Written by

コメントを残す