WordPressプラグイン『Autoptimize』の紹介と導入/使用方法

 このサイトでは、WordPressのプラグインであるAutoptimizeを使用してある程度の軽量化を行っています。
 便利ですし、防備録もかねてインストール方法などの紹介をいたします。

広告

Autoptimizeとは

 Autoptimizeとは、WordPressのプラグインの一つです。HTML、CSS、JavaScriptの最適化を行うことで、サイトの軽量化/最適化を行うことができます。
 このプラグインを設定しておくと、自分で色々やるよりもはるかに楽に、かつそれなりに細かく設定しつつ最適化をすることができます。

インストール方法

 Autoptimizeは、WordPressのプラグインディレクトリに公開されています。


 ですので、WordPressの管理画面から、プラグイン→新規追加→Autoptimizeで検索→インストールをすることで追加できます。
 上の新規追加手段が使えない場合などは、プラグインディレクトリからダウンロードです。

使用方法

 Autoptimizeをインストールし終わると、管理画面の「設定」にAutoptimizeの項が追加されるので、それをクリックして開き、適宜設定します。
 そして最後に「変更を保存」もしくは「変更を保存してキャッシュを削除」を押せば、変更が適用されます。設定を変更するときも基本的に、「設定」→「Autoptimize」で設定をします。これが基本的な使い方です。

設定項目

 設定項目(軽い解説のようなもの付き)は以下の通り。

  • HTMLオプション: 名前の通り。HTMLの最適化設定をします。
    • HTMLコードを最適化: ONにするとページのHTMLから改行などが省略され、最適化されます。基本的に、Webサイトの表示に変わりはないですが、改行コード分ファイルサイズが小さくなります。ただ、減るのは改行やコメント等の僅かなサイズであること、ソースコードがとても見づらくなることを勘案し、このサイトではOFFにしています。
    • HTMLコメントを残す: 「HTMLコードを最適化」を選択していると選べなくなります。HTMLコードの最適化時にHTML文書内に書いたコメントをページ内に残すかどうかを選びます。
    • JavaScriptオプション: JavaScriptの最適化設定オプションです。
    • JavaScriptコードの最適化: JavaScriptの最適化をするかどうか。このサイトではチェックを入れてJavaScriptの最適化が行われるようにしています。
    • <head>内へJavaScriptを強制: head内にJavaScriptを強制的に挿入するかどうかを選べます。JavaScriptを早めに読み込めますが、jsを遅延しておきたいときは無効のほうがよいでしょう。このサイトでは読み込みスピードのことを考えて、チェックは外しています。
    • インラインのJSを連結: インライン内、即ちHTML文書内に記述されているJavaScriptを連結し、一気に読み込めるようにします。読み込みのスピードが速くなるそうなので、このサイトではチェックを入れています。
    • Autoptimizeからスクリプトを除外: JavaScriptコードの最適化から省くjsファイルの指定。特別除外すべきjsファイルも仕込んでいないので、このサイトではデフォルトのままにしてあります。
    • try-catchの折り返しを追加: JSエラー用の項目みたいです。このサイトでは特にエラーも出ていないので、チェックは外してあります。
  • CSSオプション: CSSの最適化設定のオプションです。
    • CSSコードを最適化: HTMLやJavaScriptの設定と同じく、CSSの最適化機能のオンオフを選択します。このサイトでは色々と独自CSSなどを入れるなどもしているため、当然チェック。
    • データを生成:画像をURI化: 画像をURI化、すなわち文字列の状態にして、CSS自体に含めるか。このサイトでは一応チェックにしています。特に背景画像はいじってはいませんが。
    • Googleフォントの削除: Googleフォントを読み込む必要が無かったり、読み込まないようにする場合にチェックする項目です。このサイトは英字のフォントにMerriweatherを使用しているので、チェックは外しています。
    • インラインのCSSを連結: HTML文書内のCSSを連結するかどうかを決めるオプションです。これにより、読み込みが早くなると思われます。このサイトではチェックしています。というか大体のサイトではチェックしておいたほうがいいのではないかしら。
    • CSSのインライン化と遅延: CSSをインラインで読み込むかどうか。あえてそうする利点もないので、このサイトではチェックを外しています。外部CSSの影響範囲が小さなサイトでは有効なのかもしれませんが、正直CSSを遅延させると、読み込まれるまでの見た目がえらいことになるのではないかと思われますし…。
    • すべてのCSSをインライン化: 場合によりけりです。使っているCSSのサイズが小さい場合はチェックを検討してもいいかもしれませんが、長大なCSSをHTML文書内に織り込むと、読み込みなどが遅くなると思われますので、このサイトではチェックを外しています。
    • AutoptimizeからCSSを除外: 最適化、つまりこの場合は、CSSを一塊のCSSファイルに纏めることですが、その中から除外するファイルの設定。このサイトではデフォルトのままです。
  • CDNオプション: CDNサービスを使ってWebサイトの提供を行う場合に設定するオプション
    • CDNのベースURL: ここにCDNのルートURLを入力すると、それに対応できるみたいです。…CDNを使う予定は未定ですし、ルートURLというのも不明ですので、空欄にしています。
    • キャッシュ情報: 最適化したCSSのキャッシュをどの場所に置いているかなどの情報が閲覧できます。基本的に情報閲覧用のコーナーで、選択する項目は最後の一つだけです。
  • 連結されたスクリプト/CSSを静的ファイルとして保存: 唯一選択できる項目です。デフォルトでON、このサイトでもONです。最適化するとCSSやJSの外部ファイルはだいたい一つの大きなものに纏まるわけですが、それを保存するかどうかのオプションです。サーバとの兼ね合いでなにか問題が起きたときは外してみてください、という項目の様子です。

 これだけつらつらと書き連ねましたが、このプラグインは基本的に日本語化されていますので、設定画面の項目名とそれについている解説に従ってチェックしていくといいかな、とか。

キャッシュがたまった場合

 静的ファイルはおそらくCSSを書き換えたりする際に変更されつつ基本的に静的ファイルでキャッシュされるようですが、どうも更新のたびに過去バージョンも残しているらしく、時々管理バーの上の部分の「Autoptimize」と書かれている部分左が赤くなります。そういうときは設定画面から「変更を保存してキャッシュを削除」で再び緑色に戻ります。

 使用方法は大体以上です。

その他コメントなど

 Autoptimizeの使用方法を纏めました。これを適用しておくと、読み込みも早くなりますし、それにともなってGoogleのPageSpeed Insightsの評価も上がります。サイトの高速化の一助として、適度なシンプルさを持ったプラグインだと思います。

広告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA