現状・条件
- レンタルサーバ環境 ( ブログを始めるなら国内シェアNo.1のエックスサーバー
)
- WordPress バージョン:5.2.4
- WordPress のテーマ:Cocoon 1.9.9.5.3
- Autoptimize:2.5.1
Autoptimize をインストールする
WordPress 管理画面から、
・押下:「プラグイン」>「新規追加」
・ページ内:
検索キーワードに Autoptimize を入力して検索します。
![Autoptimize-setup-1](https://www.jacepark.com/wp-content/uploads/2019/11/Autoptimize-setup-1.jpg)
「今すぐインストール」>「有効化」します。
Autoptimize を設定する
設定するには、2つの方法から設定画面にアクセスできます。
❶ 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
![Autoptimize-setup-2](https://www.jacepark.com/wp-content/uploads/2019/11/Autoptimize-setup-2-1024x504.jpg)
CSS オプション
- CSS コードを最適化
- Aggregate CSS-files?
- インラインの CSS を連結
- すべての CSS をインライン化
![Autoptimize-setup-3](https://www.jacepark.com/wp-content/uploads/2019/11/Autoptimize-setup-3-1024x556.jpg)
HTML オプション
- HTML コードを最適化
![Autoptimize-setup-4](https://www.jacepark.com/wp-content/uploads/2019/11/Autoptimize-setup-4-1024x169.jpg)
その他オプション
基本的にはデフォルトのままです。
![Autoptimize-setup-5](https://www.jacepark.com/wp-content/uploads/2019/11/Autoptimize-setup-5-1024x379.jpg)
「変更を保存」ボタンをクリックします。
「Images」 タブを設定
Lazy-load images? にチェックを入れて、「変更を保存」ボタンをクリックします。
![Autoptimize-setup-6](https://www.jacepark.com/wp-content/uploads/2019/11/Autoptimize-setup-6-1024x206.jpg)
「追加」 タブを設定
Google フォントを削除することでサイトのスピードが良くなります!
※ 必要な特定の Google フォントだけを使用する方法は下記 ▼ の記事をご参照ください。
![Autoptimize-setup-7](https://www.jacepark.com/wp-content/uploads/2019/11/Autoptimize-setup-7-1024x330.jpg)
サードパーティのドメインに事前接続する (上級ユーザー向け)
![Autoptimize-setup-8](https://www.jacepark.com/wp-content/uploads/2019/11/Autoptimize-setup-8-1024x350.jpg)
ブラウザーに事前接続させたいサードパーティドメインを指定することでサイトのスピードがアップされます。やり方は以下の記事をご覧ください。
他、PageSpeed Insight でパソコン 最大 97 点、モバイル最大 68 点までスコアをアップさせるために行ったこと!
リンク
コメント