JavaScript や CSS の最適化のための Autoptimize プラグインの設定方法

現状・条件

• レンタルサーバ環境 ( ブログを始めるなら国内シェアNo.1のエックスサーバー )
• WordPress バージョン：5.2.4
• WordPress のテーマ：Cocoon 1.9.9.5.3
• Autoptimize：2.5.1

Autoptimize をインストールする

WordPress 管理画面から、
・押下：「プラグイン」>「新規追加」
・ページ内：
検索キーワードに Autoptimize を入力して検索します。

「今すぐインストール」>「有効化」します。

Autoptimize を設定する

設定するには、２つの方法から設定画面にアクセスできます。

❶ WordPress 管理画面から、
・押下：「プラグイン」> 「インストール済みプラグイン」
・ページ内：「Autoptimize」>「設定」をクリックします。

もしくは、
❷ WordPress 管理画面から、
・押下：「設定」> 「Autoptimize」をクリックします。

「JS, CSS & HTML」 タブを設定

各メニュー毎にチェックする項目は下記の通りです。

JavaScript オプション

• JavaScript コードの最適化
• Aggregate JS-files?
• インラインの JS を連結
• Autoptimize からスクリプトを除外: デフォルトのままで良いですが、Enlighter を使用中であれば、下記のように編集します。
  wp-includes/js/dist/, wp-includes/js/tinymce/, EnlighterJS.min.js,mootools-core-yc.js

CSS オプション

• CSS コードを最適化
• Aggregate CSS-files?
• インラインの CSS を連結
• すべての CSS をインライン化

HTML オプション

• HTML コードを最適化

その他オプション

基本的にはデフォルトのままです。

「変更を保存」ボタンをクリックします。

「Images」 タブを設定

Lazy-load images? にチェックを入れて、「変更を保存」ボタンをクリックします。

「追加」 タブを設定

Google フォントを削除することでサイトのスピードが良くなります！

※ 必要な特定の Google フォントだけを使用する方法は下記 ▼ の記事をご参照ください。

サードパーティのドメインに事前接続する (上級ユーザー向け)

ブラウザーに事前接続させたいサードパーティドメインを指定することでサイトのスピードがアップされます。やり方は以下の記事をご覧ください。

---