「Autoptimize」プラグインでHTML、CSS、JavaScriptを圧縮【WordPress】

この記事は約4分で読めます。

ますたータク
ますたータク

ども。ますたータクだにゃ

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 ファイルを連結する

この2つにチェックを入れるとOK。

もしこの設定をした結果サイトがバグったりした場合、

  • <head> 内へ JavaScript を強制
  • try-catch の折り返しを追加

これらにチェックを入れるとOKでしょう。

CSS オプション

CSSに関する設定ができます。基本、

  • CSS コードを最適化
  • CSS ファイルを連結する
  • インラインの CSS を連結

の3つにチェックを入れるとOKです。

HTML オプション

HTMLに関する設定ができます。基本的に、

  • HTML コードを最適化

をチェックするだけでOK。

その他オプション

その他の設定です。

  • 連結されたスクリプト / CSS を静的ファイルとして保存
  • 除外されたCSSファイルとJSファイルを縮小する

の2つにチェックを入れると良いでしょう。

 

これらの「JS、CSS & HTML」タブの設定が終わったら、「変更を保存してキャッシュを削除」しておきましょう。

「画像」タブ

「画像」タブはどうやらLazy Loadの設定ができるっぽいですね。僕はLazy Load用のプラグインには、以下の記事で書いている「Lazy Loader」プラグインを使っているため、スルーすることにしました。

「追加」タブ

「追加」タブでは、僕は

  • 絵文字を削除

にチェックしています。

設定が終わったら「変更を保存」しておきましょう。

「更に最適化」タブと「Critical CSS」タブ

「更に最適化」タブと「Critical CSS」タブは、有料機能やより高度な機能です。特に設定する必要はないでしょう。

使い方(キャッシュ削除)

Autoptimizeのキャッシュファイルはそのままにしておくとどんどんサイズが大きくなっていってしまいます。そして不具合が出るかもしれません。そこで、定期的にキャッシュを削除しましょう。

やり方はかんたんです。WordPress管理画面上部にある「Autoptimize」にカーソルを合わせて、「キャッシュを削除」をクリックするだけです。

一言

ますたータク
ますたータク

以上、かんたんに使えて便利なプラグイン、「Autoptimize」でした!

タイトルとURLをコピーしました