ソースを圧縮してくれるWordPressプラグイン Autoptimize の使い方と注意

テーマをソースの圧縮のできるLuxeritasへの変更したため現在は使用していません。

HTMLやCSSの改行や余分な空白を削除してくれるWordpress用プラグインの Autoptimize の使い方と注意点です。

ぼくはAutoptimizeは好きでよく使っているんですが、JavaScript絡みの不具合が結構発生します。意外なところではWordpress用テンプレートSimplicityのソースのハイライトがうまく表示されなくなります。

効果はというと、不要な空白や改行を消せば多少はデータ量は減りますが、ぶっちゃけるとサーバ側の圧縮設定をするほうがはるかに効果があります。

リソースを圧縮して転送サイズを減らしブログを高速化する方法(CSS、JS、WEBフォントなどの圧縮)

高速化はあまり期待できませんがAutoptimizeを使うとCSSやスクリプトをを静的に保存できるので、それなりに意味はあります。

改行や空白の削除はソースが汚くて見られたくない場合にも有効ですが(エディターでフォーマットすればバレるけど)、Wordpressを使ってるとあまり関係ないですから、気持ち程度にということで。

定期的にアップデートも行われていますし、ぼく自身愛用しているので、Autoptimizeの使い方と気づいた注意点をまとめてみました。

インストールと設定

Autoptimize

インストールは アドミンバー>プラグイン>新規追加 より行います。

autoptimizeで 検索 > インストール > 有効化 で完了。

初期状態ではオプションにチェックが入っていないので、有効にしたい項目を選んでいきます。

Autoptimizeの設定

Adminバー > 設定 > Autoptimize よりアクセス。

右上に表示されるトグルボタンが〔高度な設定を表示〕になっていたら、クリックして高度な設定を表示させます。

これしておかないと除外指定ができないんです。

ワードプレスプラグイン wordpress plugin autoptimize

HTMLコードを最適化では不具合は生じないので、チェックを入れてしまいましょう。

〔コメントを残す〕はコメントを消していいならチェックを入れません。

Javascriptオプション

Javascriptオプションは不具合が出やすいので注意です。

Javascriptコードの最適化にチェックを入れる前に、予めスクリプトがすべて動くことを確認して下さい。

ワードプレスプラグイン wordpress plugin autoptimize

問題がなければそれでよし、動かない場合は、そのスクリプトファイルを除外指定します。

Autoptimize からスクリプトを除外】に , (カンマ)をつけてその後にファイル名を記述します。

サイトのルートからのパスが必要かと思ったら、そうでもなさそう。とりあえずファイル名を付け加えてみてうまくいったらそれでよし、だめならパスを加えてみるのがいいかもしれません。

Try and Catchの繰り返し】はエラーが出てそれ以降の処理が止まってしまうのを防ぐための項目です。原因が分からなくなったり、パフォーマンスが低下する可能性があるのでチェックは外しておくほうがいいです。

CSSオプション

CSSオプションは、いじりすぎると崩れることがあります。

ワードプレスプラグイン wordpress plugin autoptimize

データを生成:画像をURI化は、おそらくBASE64のやつだと思いますが、大きな画像を使う通常ページでは表示されなくなったり、変なことになるのでチェクを外しておくほうがいいです。

インラインのCSSを連結】は、ページ内に記述されたCSSを連結してくれます。<style></style>だけならいいですが、要素にstyle=””で記述している場合はちょっと注意が必要です。

AutoptimizeからSCC】を除外は、崩れた場合にCSSファイル名を指定します。,(カンマ)の後にファイル名を加えます。パスはなくてもいいっぽい。

CSSのインライン化】はクセがあるので、分からなければチェックを入れないでOK。

CDN、静的ファイル生成オプション

ワードプレスプラグイン wordpress plugin autoptimize

CDNオプション】はCDNを利用しているのなら入れておくといいです。ただ、スクリプトによっては問題が生じる可能性があるので外しておくほうがいいだろうと思います。

連結されたスクリプト/CSSを静的ファイルとして保存】は、不具合がないなら入れておきます。上で連結したスクリプトやCSSが静的なファイルとして扱われるので軽くなります。

Autoptimize使用上の注意点

Javascriptを圧縮すると、しばしば不具合が生じます。

気づいたところでは

  • Highchartsが描写されなくなる
  • Simplicityのソースコード表示設定をオンにしてもhighlite.jsが効かない
  • Adblock系プラグインで、全員アドブロックを使用していると誤認される

Highchartsが描写されなくなる

Highchartsのグラフを描画させるとき、テストではうまくいっていたのに、Wordpressサイトで表示されないことがあります。

CDNを使えば発生しないので見落としがちなんですが、ローカルだと動かなくなります。これはスクリプトファイルを除外指定することで回避できます。

パスはサイトのトップが基準になるような、ファイル名だけでもいいような。よくわからないけど、jsというフォルダに入れているのならこれでOK。

js/highcharts/code/highcharts.js

Simplicity のソースコード設定でhighlights.jsが機能しない

テンプレートに入っているSimplicityソースコードを強調してくれるhighlights.jsは機能しなくなります。プラグインだと使えるんですが、テンプレートからの利用だと機能せずただの<pre></pre>に囲まれた状態になります。

除外ファイルはこれ

wp-content/themes/simplicity2/highlight-js/highlight.min.js

AntiAdblock系のプラグイン

広告っぽいファイル名のコードを実行できるかで判定しているAntiAdblock系のプラグインはうまく機能しません。

これも除外してやれば動く(ことはあった)。Adblock使用の判定方法によって代わってくるかもしれません。

まとめ

Autoptimizeは設定が簡単で効果も感じやすいのですが、意外と厄介です。

テストではうまく動いていたスクリプトがWordpressで機能しない時は、Autoptimizeを一度停止させて確認するといいです。

スポンサーリンク

WordPress