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

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

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

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

リソースを圧縮して転送サイズを減らしブログを高速化する方法(CSS、JS、WEBフォントなどの圧縮)
先日から、ちょこちょこブログの高速化をしています。 この前は、ブラウザキャッシュの設定をしてPageSpeed Insightsのスコアが少し改善しました。 とりあえず、今回も1つずつ改善していきたいので、今回は「リソースを圧縮

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

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

インストールと設定

Autoptimize
Autoptimize は、Web サイトのスピードを加速し、JS、CSS、HTML を集約して最小化することで、帯域幅を節約します。

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

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が描写されなくなる

テストではうまくいっていたのに、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で投稿した機能しない時は、一度停止して確認するといいです。

スポンサーリンク
336
336