ページサイズを十分小さくできたら、いよいよプラグインだ!

 

ここ数日、ひたすらページサイズの縮小のために画像の調整に勤しんできました。そして、いよいよプラグインを導入です!

ただし、高速化のためとはいえ、あれもこれもとプラグインを導入しては、逆に遅くなるのはとっても有名な話。事前に、サブドメインに本番環境をそのまんまコピーし、様々なプラグインの組み合わせを試し、これが一番安定するかな?という組み合わせを見つけたので、いったん記事化することにしました。

さすがにAdSenseをやっている関係で、満点だぜヒャッホウ!とは行きませんでしたがね……。

今回使うことに決めた3つのプラグインはWP Fastest CacheAutoptimizeScripts To Footerです。選定基準や比較したプラグイン、最終的なPageSpeed Insightの結果などをまとめておりますので、表示が遅いんだよな~と悩んでいる人は参考にどうぞ!

ちなみに、今回の主役であるキャッシュ系プラグインの選び方については、下記の記事も参考になります。

 

対策前のスピードテストの結果

PageSpeed Insight のモバイルは50点

wpp-thumbnail-compression-11

PageSpeed Insight のパソコンは60点

wpp-thumbnail-compression-12

GTmetrixは、79%/C70%、ロードタイムは4.2秒、ページサイズは1.75MBとなっています。

wpp-thumbnail-compression-13

 

スポンサーリンク

高速化プラグインの選定基準

これまで、最低限の高速化として、まずはページデータを出来るだけ小さくするためにブログアップ前の画像圧縮やテーマに合った画像の選択、プラグインが自動で作成する画像圧縮などに取り組んできました。

この状態でいよいよ導入を検討するのがプラグインです。ただし、WordPressのプラグインは、競合すると表示が崩れたり上手く動かなくなったりするので、選ぶのにとても苦労します。

特に、AdSenseを始めとした広告を表示している場合、サービス側で画像やJavaScriptを読み込むのでなかなか上手く高速化できず、ついついあれこれ入れてしまったりします。

そこで今回プラグインを選ぶにあたって、気をつけたことが3つ有ります。

 

同じ機能を重ねがけしない

特に、ページキャッシュ系プラグインにおいては、複数回の圧縮を行うことで、表示速度が向上することが有ります。ただし、この場合、複数のキャッシュ系プラグインがそれぞれでキャッシュデータを保存してしまうため、記事を更新してもなかなか反映されないなどドラブルが発生してしまうことも有ります。なので、それぞれのプラグインで似たような機能を持っていた場合は、どちらか一方のみを有効化することで、出来る限り機能の競合が起きないように気をつけました。

 

できるだけ簡単に導入できるプラグイン

トラブル発生時に原因の究明や修正ができるように、同じ機能を実装できるのであれば、できるだけ設定が簡単なものを選びました。僕は英語が全くわからないので、日本語重視で選んでいます(笑)

 

不具合に対して調整が可能なプラグイン

特に、リソースキャッシュ(HTML/CSS/JavaScript)については、表示崩れの原因になりやすいので、ただ圧縮するだけでなく、特定の条件のものについては除外するなど、調整が可能なものを選びました。

 

スポンサーリンク

WP Fastest Cache でページキャッシュ&ブラウザキャッシュ

比較したキャッシュ系プラグイン

  • W3 Total Cache
  • WP Fastest Cache
  • WP Super Cache

 

WP Fastest Cache を選んだポイント

  • 日本語表記
  • 設定項目が少ない
  • 投稿公開時にキャッシュクリアする機能がある

WP Fastest Cache には無料で使える機能と、有料で使える機能がありますが、今回の高速化においては、無料で利用できる範囲で全く問題ありません。設定項目が非常にすくなく、キャッシュ機能のON/OFFのみですが、同じ機能のみでW3 Total Cache と比較すると数値に変更はありませんでした。また、WP Fastest Cacheの一番の強みは、記事を公開したときに自動でキャッシュを更新してくれること。プラグインによっては、自分でキャッシュのクリアをしないといけないこともありますからね……。

pagespeedinsight-faster-01

 

Autoptimize でリソースキャッシュ

比較した圧縮系プラグイン

  • W3 Total Cache
  • WP Fastest Cache
  • Head Cleaner
  • Autoptimize

 

Autoptimize を選んだポイント

  • 保存と同時にキャッシュをクリアしてくれる
  • コメントを圧縮対象から除外する機能がある
  • PageSpeed Insightでアラートがなくなるなるレベルでリソースを圧縮してくれる

「W3 Total Cache」や「WP Fastest Cache」の無料の範囲は、どうやら圧縮率が悪く PageSpeed Insight のアラートがちらほら残ってしまいました。そこでリソースの圧縮については、単独のプラグインを導入することにしました。リソースキャッシュとして有名なのは「Header Cleaner」かとおもいますが、実は当ブログのテーマ「マテリアル」と相性が悪い……。そこで探し当てたのが「Autoptimize」というわけです。

pagespeedinsight-faster-02

 

Scripts To Footer でレンダリングブロック対策

比較したフッター移動系プラグイン

  • Script to Footer
  • Head Cleaner
  • JavaScript to Footer

 

Script to Footer を選んだポイント

  • 移動を除外するページをえらべる
  • jQueryのみ移動しない設定を選べる

基本的に、JavaScriptをフッターに移動するプラグインは、導入さえすればOKの手軽なものが多いです。ただ、一方で、高速化するのは記事ページだけで良いよ!という要望も有りえるのではないでしょうか?当ブログにおいては、特別な処理はしていないものの、この移動系プラグインに関してのみ、簡便性よりも汎用性を優先してプラグインを選んでみました。

pagespeedinsight-faster-03

 

プラグイン導入後のPageSpeed Insightの結果は?

PageSpeed Insightのモバイルは50点→86点!

pagespeedinsight-faster-04

パソコンは60点→91点!

pagespeedinsight-faster-05

GTmetrixは、79%→93%/C70%→81%、ロードタイムは4.2秒→4.5秒、ページサイズは1.75MB→1.34MBとなっています。

pagespeedinsight-faster-06

 

TSUNJI(@tsunji1983)的まとめ

いかがでしたでしょうか?できるだけ簡単に、できるだけ汎用的に、できるだけ効果を高く、をモットーに選んだ3つのプラグインをご紹介させて頂きました。

今回のプラグインを導入することで、先日公開した PageSpeed Insight のルールをもとに洗いだした14個の高速化の方法 のなかでは、

  • CSS/JavaScriptのフッターへの移動
  • ブラウザのキャッシュ設定
  • 生成されたページ(HTML)のキャッシュ設定
  • CSS/JavaScriptの圧縮(Minify)

の4つについて一気に対応することができます。

僕の場合は大幅にポイントアップを実現することができましたが、ご利用中のプラグインやWordPressテーマ、Webサーバーなどの環境によって結果は変わりますのでご注意下さい。

また、再三にわたって記載していますが、キャッシュ系のプラグインの導入は

  • バックアップを取る
  • テスト環境で試してみる
  • 導入するときは1個ずつ

を忘れずに!

 

以上、TSUNJI(@tsunji1983)でした。