JCH Optimize、CSS/JS最適化プラグイン

CSS/JSをまとめて、1つのファイルにしてくれるプラグイン、JCH Optimizeを試しました。

WordPress用だけではなく、他のCMS（Joomla、Drupal、Magento)用もあります。むしろ、もともとはJoomla用のプラグインだったものがWordPressにも対応しただけです。

Google PageSpeedの結果を一気に引き上げてくれるプラグインです。

CSS/JS読み込みの最適化

CSSやJSは、サイトの表示を高機能にしていけばしていくほど、たくさんのプラグインを入れれば入れるほど、増えていきます。

標準状態では、それぞれのファイルがばらばらに記述されているので、その分HTTPリクエストが起こって、サーバーの負担になります。さらに、CSSやJSが読み込まれるまでサイトが表示されなかったりして、閲覧者にとってもも良くありません。

CSS/JSの最適化方法にはいくつかあります。

まずは、ファイル自体の最小化です。気にしなくても、使っているライブラリ側で大抵対応されていますが、していない場合にはファイルサイズが1~2割は増えているのでその分無駄が生じます。

ファイルの最小化は、無駄なコードを削って再配置してくれるような、本格的なものではなくて、ファイル内の余白、空白、場合によってはコメントを削除するものです。

地味ですが、着実な効果がありますが、最初から最小化した形のファイルだけにしないのは、エディタで読むのが非常に辛くなるからです。

CSSの場合には、最小化されたものと標準のものと2つとも配布されていることが結構あります。Font Awesomeの場合には、

など、拡張子CSSの前にminが付けられます。

次に、ファイルの数を減らして一つにまとめます。こうすることで、無駄なHTTPリクエストを減らし、レスポンスも速くなることが期待できます。

HTMLはファイルの先頭から解釈されていきますので、CSS/JSの読み込みが後ろのほうで起こるようにしたり、読み込みが終わる前にサイトを表示できるように非同期読み込みに設定したりします。

CSSの場合には、サイトの表示が崩れるので必要なところだけ先に読み込んで、後でJSを使って残りを読ませたりします。

こういった作業を引き受けてくれるプラグインがJCH Optimizeです。無料バージョンと有料バージョンがありますが、有料バージョンでも良心的な10米ドル（1年）です。

無料バージョンでも、Google PageSpeedが要求してくる改善を多く行ってくれます。

ドメイン外のJSファイルをまとめる機能と、表示をブロックするCSSの後読み機能は、有料バージョンでしか使えません。

画像をスプライト化してくれる機能もついていますが、あまり画像を張らないので使っていません。

表示をブロックするCSSの後読みを行うと、崩れた状態で表示されるのと、キャッシュファイルが増えていきます。JSが作動しないと、表示が崩れたままの状態で読み込みが終了してしまうので、CSSファイルが大きい場合以外は、実際の表示速度はそれほど変わらない、ような気もします。

CSSのファイル名がレイアウトごとに作られるので、ブラウザキャッシュが効きづらくなってしまいます。ただ、私の場合はセッションごとのページビューは大体1.4~1.6以内ですから、ほとんどのユーザーには関係ないですね。

有料版でだけ使える機能に、Kraken.ioと連携して画像を圧縮する機能がありますが、WordPressには公式プラグインがあって使いやすいので、必要ありません。Joomlaには、類似プラグインが少ないので、重宝しそうです。ただし、圧縮を一度行ったファイルを覚えておく機能がついていません。

CSSの結合もしてくれているはずなのですが、使っているテンプレートのCSSが別で読まれてしまいます。

ページキャッシュ系のプラグイン、WP Super CacheとはPHPモードで特に問題なく上手く協働しています。

設定は簡単です。

JSの読み込み場所を変える機能は、場合によってはJSが正常動作しなくなりますので、事前にテストが必要です。ファイルごと、プラグインごとに除外設定ができます。

Joomla版のユーザーインターフェースをそのまま持ってきているようで、WordPressの管理画面上では見にくいです。

WordPressでは、キャッシュファイルの削除が面倒です。Basic Settingsの下のほうにボタンが設置されていますので、そこを開かなくてはいけません。

Joomlaでは、管理画面のキャッシュファイル一覧にJCH Optimizeのキャッシュも現れるので、これを削除するだけです。