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

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

ただし、あれもこれもとプラグインを導入しては、逆に遅くなるのはとっても有名な話。

事前に、本番環境をそのまんまコピーしたテストサイトを作って様々なプラグインの組み合わせを試し、これが一番安定するかな?という組み合わせを見つけたので、いったん記事化することにしました。

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

今回使うことに決めた3つのプラグインは↓

  • WP Fastest Cache
  • Autoptimize
  • Scripts 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

 

Sponsored link

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

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

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

特に、『AdSense』などの広告を表示している場合、広告サービス側で画像やJavaScriptを読み込むのでなかなか上手く高速化できず、ついついあれこれ入れてしまいがち……。

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

 

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

特に、ページキャッシュ系プラグインにおいては、複数回の圧縮を行うことで、表示速度が向上する場合が有ります。

ただしこの場合、複数のキャッシュ系プラグインがそれぞれでキャッシュデータを保存してしまうため、記事を更新してもなかなか反映されないなどドラブルが発生してしまう可能性があります。

なので、それぞれのプラグインで似たような機能を持っていた場合は、どちらか一方のみを有効化することで、出来る限り機能のバッティングが起きないように気をつけました。

 

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

トラブル発生時に原因の究明や修正ができるように、同じ機能を実装できるのであれば、できるだけ設定が簡単なものを選びました。

僕は英語が全くわからないので、日本語の管理画面のプラグインを選んでいます(笑)

 

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

特に、HTML/CSS/JavaScript などのリソースキャッシュには、表示崩れの原因になりやすいです。

そこで、ただ圧縮するだけでなく、特定の条件のものについては除外する機能があるなど、調整が可能なものを選びました。

 

Sponsored link

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

まずは、『PageSpeed Insight』における「圧縮を有効にする」や「ブラウザのキャッシュを活用する」などのエラーに対応するために、キャッシュ系のWordPressプラグインを選びます。

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

  • 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 でリソースキャッシュ

次に、『PageSpeed Insight』における「HTML を縮小する」などのエラーに対応するために、HTML/CSS/JavaScriptなどのリーソースを圧縮してくれるWordPressプラグインを選びます。

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

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

Autoptimize を選んだポイント

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

『W3 Total Cache』や『WP Fastest Cache』の無料で使える範囲の機能では、どうやら圧縮率が悪く『PageSpeed Insight』のアラートがなかなか消えませんでした

そこでリソースの圧縮については、単独のプラグインを導入することに。

リソースキャッシュとして有名なのは『Header Cleaner』かと思いますが、実は過去に当ブログで利用していたWordPressテーマ『マテリアル』と相性が悪く、最終的に出会ったのが『Autoptimize』というわけです。

pagespeedinsight-faster-02

 

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

最後に、『PageSpeed Insight』における「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」などのエラーに対応するために、CSSやJavaScriptの出力場所をページ上部(header)からページ下部(footer)に変更してくれるWordPressプラグインを選びます。

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

  • Script to Footer
  • Head Cleaner
  • JavaScript to Footer

 

Script to Footer を選んだポイント

  • 移動を除外するページを選べる
  • JavaScriptは移動するけどjQueryは移動しない、といった設定が可能

基本的に、CSSやJavaScriptをページ下部(footer)に移動するプラグインは、導入さえすれば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)でした。

Sponsored link