どうも、笹塚神之介(@shin_sasasa)です。

ここではワードプレスのプラグイン『Autoptimize』の使い方について解説していきます。

『Autoptimize』は、HTML CSS JavaScriptを縮小して高速化できるプラグインです。

診断ツールで、HTMLやCSSを縮小した方が良いと判定されたら、導入を検討しましょう。



Autoptimize とは

公式プラグインディレクトリ「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はこんな人におすすめ

サイトの表示速度を無料で診断できるツールはいろいろあります。

Page Speed Insights

Googleが提供している『PageSpeed Insights』で以下表示があったら、『Autoptimize』を導入することをおすすめします。

  • スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
  • JavaScript を縮小する
  • HTML を縮小する
  • CSS を縮小する

これらが表示されている状態であれば、『Autoptimize』を導入することでスコアを向上させる事が出来ます。

最後

今回はワードプレスのプラグイン『Autoptimize』の使い方について解説していきました。

これ以外にも導入するべきプラグインをまとめているので↓のページをご覧ください。