Autoptimizeでページスピードを改善しよう
この記事では、ページの高速化に有利なプラグイン「Autoptimize」の設定方法について解説しています。
Autoptimizeとは？
CSS・HTML・JavaScriptのコードの最適化や、画像の最適化など、サイトの高速化に繋がる処理を実行してくれる便利なプラグインです。
Autoptimizeをダウンロードする
それでは早速プラグインのダウンロードを行っていきましょう。
サイドメニューから［プラグイン］［新規追加］と進みます。画像には2箇所表示していますが、どちらから進んでも同じです。
そうするとプラグインのストア画面に進むので、左上の検索バーに［Autoptimize］と打ち込み検索をかけます。
Autoptimize を設定する
設定では、JS・CSS・HTML・画像の最適化が行えます。
ここからは、各項目でのオススメ設定を紹介していきます。
JavaScriptの最適化
［JavaScriptコードの最適化］にチェックを入れると、各種設定ができるようになります。
上の2つにチェックを入れておくと良いかと思います。最適化にしてサイトのデザインがおかしくなった場合は、［head内への強制］か［try-catch］にチェックを入れて様子を見てみましょう。
JavaScriptコードの最適化
ここにチェックを入れると、JSファイルの中の余計なデータ（改行など）を取り除いてデータサイズを軽くしてくれます。
JSファイルを連結する
レンダリングの妨げ（表示速度の低下）を防ぐように、複数のファイルを一つに連結して読み込んでくれます。
head内へ強制
JSファイルがhead内で読み込まれるようになります。
不具合が発生した場合はここにチェックを入れてみましょう。
ただしhead内で読み込むと表示速度が遅くなるので、基本的にはfooterで読み込むべきです。WordPressのカスタマイズができる場合は、テーマエディターやFTPソフトで、特定のファイルだけheadに移すのが良いかと思います。
CSSの最適化
［CSSコードを最適化］にチェックを入れると、各種設定ができるようになります。
CSSでは上の3つにチェックを入れておくと良いかと思います。
コードの最適化
ここにチェックを入れると、CSSファイルの中の余計なデータ（改行や空白など）を取り除いてデータサイズを軽くしてくれます。
CSSファイルを連結する
複数のCSSファイルを連結して読み込んでくれます。
インラインのCSSも連結
HTMLの中に挿入されているCSSコードについても、連結して読み込んでくれるようになります。
HTMLの最適化
［HTMLコードを最適化］にチェックを入ておきましょう。これでHTML内の不要なデータが取り除かれます。
HTMLコメントを維持
記述したコメントアウトがページ内に残されるようになります。
どうしてもという場合以外は、ここはチェックを入れなくて良いかと思います。
その他オプション
その他オプションは上3つにチェックを入れておくと良いかと思います。
一番下のログイン状態に関しては、ログイン機能が搭載されているサイト向けの項目になります。
個人ブログであればチェックは外しておいて良いでしょう。
変更が完了したら忘れずに変更の保存とキャッシュの削除をクリックしておきます。
画像の最適化
つづいて画像の設定を行っていきます。一番上のタブメニューから［画像］をクリック。
画像の最適化ですが、どちらもチェックを入れなくてOKです。遅延読み込み系のプラグインやライブラリを利用していない方は、下にだけチェックを入れておきましょう。
画像の最適化は、プラグインか手動で行うのがオススメです。
設定後は確認を！
すべての設定が済んだら、必ずサイトを確認しておきましょう。
他のプラグインやテーマとの相性が悪い場合は、サイトのデザインが崩れてしまう可能性があるからです。
まとめ
サイトの軽量化・最適化にオススメな「Autoptimize」について解説しました。
表示速度を改善する上では、簡単で非常に効果的なプラグインだと思います。是非導入してみてください。
