WordPressサイトを高速化する方法の一つに、HTML、CSS、JavaScriptといったものを圧縮する、という方法があります。
この記事では、手軽にHTML、CSS、JavaScriptを圧縮できるWordPress向けプラグイン「Autoptimize」を紹介していきます。
インストール～有効化
プラグイン追加画面で「Autoptimize」で検索すると、Autoptimizeプラグインが出てくるかと思うので、それを「今すぐインストール」します。
詳しいインストール方法は以下の記事をどうぞ。
インストールが終了したら、早速「有効化」をクリックして有効化！
使い方（設定方法）
おすすめの設定について書いていきます。
プラグイン＞インストール済みプラグイン を開きます。
そして、「Autoptimize」のところにある「設定」をクリック。
すると、Autoptimizeの設定画面が開かれます。
「JS、CSS & HTML」タブ、「画像」タブ、「追加」タブ、「更に最適化」タブ、「Critical CSS」タブに分かれています。
というわけで、まずは「JS、CSS & HTML」タブの設定について書きます。
JavaScript オプション
JavaScriptの最適化に関する設定ができます。基本的には、
- JavaScript コードの最適化
- JS ファイルを連結する
この２つにチェックを入れるとOK。
もしこの設定をした結果サイトがバグったりした場合、
- <head> 内へ JavaScript を強制
- try-catch の折り返しを追加
これらにチェックを入れるとOKでしょう。
CSS オプション
CSSに関する設定ができます。基本、
- CSS コードを最適化
- CSS ファイルを連結する
- インラインの CSS を連結
の３つにチェックを入れるとOKです。
HTML オプション
HTMLに関する設定ができます。基本的に、
- HTML コードを最適化
をチェックするだけでOK。
その他オプション
その他の設定です。
- 連結されたスクリプト / CSS を静的ファイルとして保存
- 除外されたCSSファイルとJSファイルを縮小する
の２つにチェックを入れると良いでしょう。
これらの「JS、CSS & HTML」タブの設定が終わったら、「変更を保存してキャッシュを削除」しておきましょう。
「画像」タブ
「画像」タブはどうやらLazy Loadの設定ができるっぽいですね。僕はLazy Load用のプラグインには、以下の記事で書いている「Lazy Loader」プラグインを使っているため、スルーすることにしました。
「追加」タブ
「追加」タブでは、僕は
- 絵文字を削除
にチェックしています。
設定が終わったら「変更を保存」しておきましょう。
「更に最適化」タブと「Critical CSS」タブ
「更に最適化」タブと「Critical CSS」タブは、有料機能やより高度な機能です。特に設定する必要はないでしょう。
使い方（キャッシュ削除）
Autoptimizeのキャッシュファイルはそのままにしておくとどんどんサイズが大きくなっていってしまいます。そして不具合が出るかもしれません。そこで、定期的にキャッシュを削除しましょう。
やり方はかんたんです。WordPress管理画面上部にある「Autoptimize」にカーソルを合わせて、「キャッシュを削除」をクリックするだけです。
一言
以上、かんたんに使えて便利なプラグイン、「Autoptimize」でした！
