ソースを圧縮してくれるWordPressプラグイン Autoptimize の使い方と注意
テーマをソースの圧縮できるLuxeritasへに変更したため現在は使用していません。
HTMLやCSSの改行や余分な空白を削除してくれるWordpress用プラグインの Autoptimize の使い方と注意点です。
ぼくはAutoptimizeは好きでよく使っているんですが、JavaScript絡みの不具合が結構発生します。意外なところではWordpress用テンプレートSimplicityのソースのハイライトがうまく表示されなくなります。
効果はというと、不要な空白や改行を消せば多少はデータ量は減りますが、ぶっちゃけるとサーバ側の圧縮設定をするほうがはるかに効果があります。
テキスト部分の圧縮をしてもサイトの高速化はあまり期待できませんが、 Autoptimize を使うと CSS や スクリプト を静的に保存できるので、それなりに意味はあります。
改行や空白の削除はソースが汚くて見られたくない場合にも有効ですが（エディターでフォーマットすればバレるけど）、Wordpressを使ってるとあまり関係ないですから、気持ち程度にということで。
定期的にアップデートも行われていますし、ぼく自身愛用しているので、Autoptimizeの使い方と気づいた注意点をまとめてみました。
インストールと設定
インストールは アドミンバー＞プラグイン＞新規追加 より行います。
autoptimizeで 検索 ＞ インストール ＞ 有効化 で完了。
初期状態ではオプションにチェックが入っていないので、有効にしたい項目を選んでいきます。
Autoptimizeの設定
[Adminバー] > [設定] > [Autoptimize] より設定画面にアクセス。右上に表示されるトグルボタンが〔高度な設定を表示〕になっていたら、クリックして高度な設定を表示させます。
これをしておかないと、特定のファイルを圧縮させないための除外指定ができないんです。
HTMLコードを最適化では不具合は生じないので、チェックを入れてしまいましょう。
〔コメントを残す〕はコメントを消していいならチェックを入れません。
Javascriptオプション
Javascriptオプションは不具合が出やすいので注意が必要です。
Javascriptコードの最適化にチェックを入れる前に、予めスクリプトがすべて動くことを確認して下さい。
Autoptimize を有効にしてもスクリプトが問題なく動けばそれでよし、だめならそのスクリプトファイルを除外指定します。
【Autoptimize からスクリプトを除外】に , （カンマ）をつけてその後にファイル名を記述します。
サイトのルートからのパスが必要かと思ったら、そうでもなさそう。とりあえずファイル名を付け加えてみてうまくいったらそれでよし、だめならパスを加えてみるのがいいかもしれません。
【Try and Catchの繰り返し】はエラーが出てそれ以降の処理が止まってしまうのを防ぐための項目です。原因が分からなくなったり、パフォーマンスが低下する可能性があるのでチェックは外しておくほうがいいです。
CSSオプション
CSSオプションは、いじりすぎると表示が崩れることがあります。
データを生成：画像をURI化は、おそらくBASE64のやつだと思いますが、大きな画像を使う通常ページでは表示されなくなったり、変なことになるのでチェクを外しておくほうがいいです。
【インラインのCSSを連結】は、ページ内に記述されたCSSを連結してくれます。<style></style>だけならいいですが、要素にstyle=""で記述している場合はちょっと注意が必要です。
【AutoptimizeからSCC】を除外は、崩れた場合にCSSファイル名を指定します。,（カンマ）の後にファイル名を加えます。パスはなくてもいいっぽい。
【CSSのインライン化】はクセがあるので、分からなければチェックを入れないでOK。
CDN、静的ファイル生成オプション
【CDNオプション】はCDNを利用しているのなら入れておくといいです。ただ、スクリプトによっては問題が生じる可能性があるので確認は必要です。
【連結されたスクリプト/CSSを静的ファイルとして保存】は、不具合がないなら入れておきます。上で連結したスクリプトやCSSが静的なファイルとして扱われるので軽くなります。
Autoptimize使用上の注意点
Javascriptを圧縮すると、しばしば不具合が生じます。
気づいたところでは
- Highchartsが描写されなくなる
- Simplicityのソースコード表示設定をオンにしてもhighlite.jsが効かない
- Adblock系プラグインで、全員アドブロックを使用していると誤認される
Highchartsが描写されなくなる
Highchartsのグラフを描画させるとき、テストではうまくいっていたのに、Wordpressサイトで表示されないことがあります。
CDNを使えば発生しないので見落としがちなんですが、ローカルから読み込むと動かなくなります。回避方法は Highcharts のスクリプトファイルを除外指定です。
AntiAdblock系のプラグイン
広告っぽいファイル名のコードを実行できるかで判定しているAntiAdblock系のプラグインはうまく機能しません。
これも除外してやれば動く（ことはあった）。Adblock使用の判定方法によって代わってくるかもしれません。
まとめ
Autoptimizeは設定が簡単で効果も感じやすいのですが、javascript の圧縮は厄介です。
テストではうまく動いていたスクリプトがWordpressで機能しない時は、Autoptimizeを一度停止させて確認するといいです。