サイト速度テストツール GTmetrix に JavaScriptの読み込みのタイミングをずらす よう指摘されました。
目次
JavaScriptの読み込みのタイミングをずらす
JavaScriptの読み込みのタイミングをずらす のに WordPressプラグイン Async JavaScript を使います。
Async JavaScript のインストール
「プラグイン」「新規追加」をクリック
![GTmetrix が JavaScriptの読み込みのタイミングをずらす よう指摘 3 「プラグイン」「新規追加」をクリック](https://jikuu.work/wp-content/uploads/2021/09/plugin.jpg)
Async JavaScript 検索し「今すぐインストール」をクリックし有効化する。
![GTmetrix が JavaScriptの読み込みのタイミングをずらす よう指摘 4 Async JavaScript 検索し「今すぐインストール」をクリックし有効化する。](https://jikuu.work/wp-content/uploads/2021/12/Async-JavaScript.jpg)
Async JavaScript の設定方法
「設定」「 Async JavaScript 」をクリック
![GTmetrix が JavaScriptの読み込みのタイミングをずらす よう指摘 5 「設定」「 Async JavaScript 」をクリック](https://jikuu.work/wp-content/uploads/2021/12/Async.jpg)
「Setting」を選択し Enable Async JavaScript にチェックを入れます
![GTmetrix が JavaScriptの読み込みのタイミングをずらす よう指摘 6 「Setting」を選択し Enable Async JavaScript にチェックを入れます](https://jikuu.work/wp-content/uploads/2021/12/Enable-Async-JavaScript.jpg)
「Async JavaScript Method」「 jQuery」ともに Defer を選択 します。
![GTmetrix が JavaScriptの読み込みのタイミングをずらす よう指摘 7 「Async JavaScript Method」「 jQuery」ともに Defer を選択 します。](https://jikuu.work/wp-content/uploads/2021/12/jQuery.jpg)
Defer を選択した方が点数がでます。
Autoptimize プラグインと連携
Enable Autoptimize Support to allow you to override AO’s default “defer” flag (see below) にチェックを入れ、 Autoptimize Javascript Method で Defer を選択します。
「Save Settings」ボタンをクリックして、設定を保存します。
![GTmetrix が JavaScriptの読み込みのタイミングをずらす よう指摘 8 Enable Autoptimize Support to allow you to override AO's default "defer" flag (see below) にチェックを入れ、 Autoptimize Javascript Method で Defer を選択します。](https://jikuu.work/wp-content/uploads/2021/12/Enable-Autoptimize-Support.jpg)
Autoptimize プラグインで最適化した JavaScriptコードを遅延して読み込むことが出来るようになりました。
WordPressのSEO内部対策
WordPressのSEO内部対策 として
SEO対策が施された 有料テーマを使う
有料テーマの中には SEO対策が施された ものがあります。
SEO内部対策・サイト表示高速化
ココナラ
のサービスには WordPressのSEO内部対策・サイト表示高速化 をうたったものもあります。
GTmetrix で Grade A が出るまでにやったこと
- サイト速度テストツール GTmetrix に 画像の最適化 を指摘されました。
- GTmetrix が JavaScriptの読み込みのタイミングをずらす よう指摘
- CloudFlare を導入すると ブログの変更 が即座に確認できない
- GTmetrix が CDN(Content Delivery Network) を使用するよう指摘
- CloudFlare プラグインを入れると Development Mode 切り替え が楽
![GTmetrix で Grade A が出るまでにやったこと 2 GTmetrix で Grade A が出るまでにやったこと](https://jikuu.work/wp-content/uploads/2021/12/grade-600x244.jpg)