どうも、satoshi（@shin_sasasa）です。
ここではワードプレスのプラグイン『Autoptimize』の使い方について解説していきます。
『Autoptimize』は、HTML CSS JavaScriptを縮小して高速化できるプラグインです。
診断ツールで、HTMLやCSSを縮小した方が良いと判定されたら、導入を検討しましょう。
この記事の内容
Autoptimize とは
Autoptimizeとは、HTML、CSS、JavaScriptを縮小してくれるプラグインです。
このプラグインを上手に使えば、サイトの高速化が実現できます。
Head Cleanerよりは良い
Autoptimizeと似ているプラグインでHead Cleanerというプラグインが有名です。
運営しているサイト環境に応じて表示が崩れてJavaScriptが動かなくなったりしたので、Head Cleanerは使わない方がいいです。
予想外の挙動の可能性アリ
ただAutoptimizeも、表示が崩れたり、予想外の挙動を起こすことが充分考えられます。
サーバー環境やWordPressのテーマなどでも違ってきますので、プラグインを使う時はローカル環境でテストしたり、バックアップしてから設定してください。
ちなみにこのサイトは、サーバーは｢エックスサーバー｣で、テーマは｢賢威｣を使っています。
Autoptimize の使い方
Autoptimizeインストール
管理画面左メニューの｢プラグイン｣を選択し｢新規追加｣をクリックしてから、右上の検索窓で｢Autoptimize｣と入力します。
そうすると上写真のような画面になるので、｢今すぐインストール｣をクリックし、そのまま｢有効化｣してください。
Autoptimizeの設定方法
管理画面左メニューの｢設定｣の中に｢Autoptimize｣が新たに追加されます。その｢Autoptimize｣をクリックしてください。
この画面で設定をしていきます。
HTML Options
HTML Optionsは、二つともチェックを入れます。
JavaScript Options
JavaScript Optionsは、一番上の｢Optimize JavaScript Code?｣にだけチェックを入れます。
もし設定後、レイアウトが崩れたり、普段と違う挙動になってしまった場合は、このJavaScriptが影響している可能性が高いので、チェックをすべて外してみてください。
CSS Options
CSS Optionsは、1番目と4番目の｢Optimize CSS Code?｣と｢Also aggregate inline CSS?｣にチェックを入れます。
CDN Options
CDN Optionsは、このままにしておきます。
Cache Info
Cache Infoは一番下の｢Save aggregated script/css as static files?｣にチェックを入れておきます。
そして最後に、｢Save Changes and Empty Cache｣をクリックします。
これで設定は終わりです。
Autoptimizeはこんな人におすすめ
サイトの表示速度を無料で診断できるツールはいろいろあります。
Googleが提供している『PageSpeed Insights』で以下表示があったら、『Autoptimize』を導入することをおすすめします。
- スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
- JavaScript を縮小する
- HTML を縮小する
- CSS を縮小する
これらが表示されている状態であれば、『Autoptimize』を導入することでスコアを向上させる事が出来ます。
最後
今回はワードプレスのプラグイン『Autoptimize』の使い方について解説していきました。
これ以外にも導入するべきプラグインをまとめているので↓のページをご覧ください。
