WordPressでWEBページをスピード改善する方法の一つとして、HTMLやJavaScript、CSSのコードを最適化する方法があります。
なぜHTMLやJavaScript、CSSといったWEBページのコードを最適化してスピードを改善する必要があるのかというと、何も対策をしないままだとWEBページの表示スピードが遅いからです。
WEBページの表示スピードが遅いと、Google等の検索サイトでも評価があがらないので、結果として閲覧者数が伸びない可能性が高くなります。
よってWordPressでは、WEBページのコードの最適化を行うことは必須の対策となります。
ただしWordPressでは、WEBページのコードを直接編集することはお勧めしません。
なぜかというと、WordPress本体やテーマはバージョンアップされるからです。
WordPress本体やテーマがバージョンアップされると、WEBページのコードを直接編集していたファイルも上書きされてしまうからです。
ですので、導入するだけでWEBページのコードを最適化してくれる便利なプラグインを利用して対策することをお勧めします。
今回は、そんなHTMLやJavaScript、CSSのコードを最適化してくれるプラグインを導入するにあたって、機能毎にプラグインを比較して最適なプラグインを見つけたいと思います。
以下のような方に是非読んで頂けると参考になると思います。
[su_box title=”この記事はこんな方におすすめ” style=”glass” box_color=”#036ed6″]
- WEBページのコードを最適化するプラグインにはどんなプラグインがあるかを知りたい方
- WEBページのコードを最適化するプラグインが色々あるが、どれを導入すればよいかわからない方
- WEBページのコードを最適化するプラグインにはどんな機能があるのか知りたい方
[/su_box]
そもそもWordPressのプラグインにはどのような機能があるのか知りたい方は以下を参照してください。
[blogcard url=”https://lazy-se.net/wordpress-plugin/”]
それでは早速比較検討していきたいと思います。
はじめに
まずは、WEBページのコードを最適化するプラグインにどの様な機能があるのかを洗い出したいと思います。
また、今回も同じように前提条件として、以下の評価基準をもとに比較して評価していきたいと思います。
[cc id=567]
設定の容易さ
こちらは機能とは言い難いかもしれませんが、立派なプラグインを選定する際の評価項目となります。
日本語化されてない設定項目が多く存在したり、プラグインを有効化するのに手間がかかったりする場合はあまりおすすめできません。
こういった設定の容易さにも注目して頂ければと思います。
プラグイン比較
それでは実際にプラグインを試用して評価してきます。
機能の説明
WordPressのHTMLやJavaScript、CSSのコードを最適化するプラグインに必要な機能としては以下が考えられます。
HTML圧縮
HTMLを圧縮してデータ通信量を抑えたり読み込みを速くしたりしてくれる機能です。
HTTP/2プッシュ
HTTP/2という通信プロトコルの規格があります。
現在はHTTP/1.1という通信規格が利用されていますが、それよりも高速に通信できる規格となります。
HTTP/2ではサーバプッシュという機能があり、これによってコンテンツの優先制御が可能となります。
ただ、まだサーバやクライアントが完全にサポートしていないこともあり、現時点ではまだ必須の機能ではありません。
JavaScript非同期・遅延ロード
JavaScriptを読み込む際に非同期で読み込んだり、遅れて読み込んだりしてくれる機能です。
何がいいかというと、JavaScriptを読み込むのに結構な時間がかかるのですが、HTMLを読み込むタイミングに合わせないでJavaScriptを読み込むことによって表示スピードが改善したりします。
JavaScript連結・圧縮
JavaScriptの複数のコードを連結してくれたり、圧縮してくれたりする機能となります。
こちらもWEBページの表示スピードの改善につながるため、是非導入したい機能です。
JavaScriptインライン化
外部ファイルとして読み込んでいるJavaScriptのコードをHTML文書の一部として埋め込む機能です。
JavaScriptフッター移動
通常はヘッダーで読み込まれるJavaScriptのコードをフッターで読み込まれるようにする機能です。
CSSインライン化
通常は外部ファイルとして読み込まれるCSSのコードをHTML文書の一部として埋め込む機能です。
CSS連結・圧縮
CSSのコードを連結して圧縮してくれる機能です。
WEBページの表示スピードの改善につながるため、是非導入したい機能です。
CSS非同期ロード
CSSのコードを非同期で読み込む機能です。
CSSフッター移動
通常はヘッダーで読み込まれるCSSのコードをフッターで読み込まれるようにする機能です。
クリティカルCSS生成
CSSのコードを読み込ませたい優先度順に生成できる機能です。
スクリプトキャッシュ
JavaScriptやCSSのコードをキャッシングして読み込み速度を改善してくれる機能です。
絵文字削除
WordPress本体で読み込まれる絵文字用のCSSを削除してくれる機能です。
googleフォント非同期
googleのWEBフォントをCSSで呼び出す場合に、非同期で読み込んでくれる機能です。
以上がHTMLやJavaScript、CSSのコードを最適化するプラグインで利用できる詳細な機能となります。
機能をもとにしたプラグイン比較一覧
各機能をもとに洗い出したプラグインを一覧表にして整理しました。
プラグイン比較表
[table id=18 /]
プラグインの評価
プラグインの比較としては、HTMLやJavaScript、CSSのコードに対する最適化機能が多く利用できるかどうかに注目したいと思います。
また判断基準として、google speed insights等のWebパフォーマンス改善ツールでWEBページのコードを最適化する必要がなくなるかどうかで導入に有効かを判断したいと思います。
まず「Autoptimize」というプラグインですが、こちらは各コードに対しての機能が豊富です。
日本語対応もされているので、設定が容易ですし、導入によってスピード改善に有効であることを確認しています。
同じ作者が制作していて、一緒に使用することを推奨している「Async JavaScript」と合わせて使用することで、JavaScriptのスピード改善にかなりの効果を発揮します。
よって、総評としては両方のプラグインを試用することを考慮して〇としています。
「W3 Total Cache」ですが、HTMLやJavaScript、CSSのコードを最適化する機能としては若干もの足りないため、別のプラグインを導入する必要が出てきてしまいます。
また日本語対応もされていないため、総評としては△としています。
次に「WP Fastest Cache」と「WP Fastest Cache」についても、かなり機能不足なため総評を×としています。
最後に「LiteSpeed Cache」ですが、こちらも若干機能不足となるため、別のプラグインを導入する必要が出てきてしまいます。
よって総評を△としています。
まとめ
HTMLやJavaScript、CSSのコードを最適化するプラグイン選定の比較結果として、なるべく多くの機能をカバーしているプラグインを選定すればいいことがわかりました。
WEBページのコードを最適化するプラグインとしては、以下2つをお勧めします。
[su_box title=”おすすめするWordPressプラグイン” style=”glass” box_color=”#036ed6″]
- Autoptimize
- Async JavaScript
[/su_box]
WEBページのコードを最適化するプラグイン導入の際の参考にしてくださいね。
最後に、全体的なWordPressのおすすめするプラグインについて知りたい方は以下でまとめて紹介していますので参考にしてください。
[blogcard url=”https://lazy-se.net/wp-all-plgn/”]
[blogcard url=”https://lazy-se.net/wp-plgin-async-javascript/”]
今回おすすめしたプラグインについて
今回おすすめしたプラグインの公式ホームページへのURLを載せておきますので、よろしかったらどうぞ。
[blogcard url=”https://ja.wordpress.org/plugins/autoptimize/”]
[blogcard url=”https://ja.wordpress.org/plugins/async-javascript/”]
コメント