現状・条件
- レンタルサーバ環境 ( ブログを始めるなら国内シェア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 フォントだけを使用する方法は下記 ▼ の記事をご参照ください。
サードパーティのドメインに事前接続する (上級ユーザー向け)
ブラウザーに事前接続させたいサードパーティドメインを指定することでサイトのスピードがアップされます。やり方は以下の記事をご覧ください。
他、PageSpeed Insight でパソコン 最大 97 点、モバイル最大 68 点までスコアをアップさせるために行ったこと！
リンク
コメント