こんにちは、りゅうのすけ(@k_r001)です。
この記事では、「Async JavaScript」の設定方法についてまとめています。
こういった方に向けて、書いています。
モバイルでの表示速度が97点に達しているので、参考になると思います。
レンダリングを妨げるリソースの除外に使うプラグイン
レンダリングを妨げるリソースの除外には、「Async JavaScript」を使います。
姉妹プラグイン「Autoptimize」と合わせて使用することで、より最適化に貢献できます。
「Autoptimize」の設定方法は、⬇︎下記記事にまとめてあります。
【Autoptimize】プラグインを使ってソースコードの最適化
Async JavaScriptのインストール
まずは、「Async JavaScript」をインストールしましょう。
キーワードに、「JavaScript」と入力すれば出てきます。
インストール後は、有効化することを忘れないようにしましょう。
パソコンにダウンロードして取得したいという方は、⬇︎下記リンクより取得できます。
Async JavaScriptの設定
「Async JavaScript」の設定するには、「Settings」を押しましょう。
設定すべき箇所は、「Settings」に揃ってるので他は、変更しません。
Enable Async JavaScript
「Enable Async JavaScript」は、非同期JavaScriptを有効にするチェック項目です。
ここにチェックを入れないと機能しないので、チェックしましょう。
Async JavaScript Method
Async JavaScript Methodは、async or deferのどちらかを選択します。
- async：非同期
- defer：遅延
筆者は、deferを選択しています。
おすすめはないので、早い方を選択しましょう。
jQuery
jQueryはJavaScriptのためのライブラリです。
jQueryを使用することでシンプルにJavaScriptを記述できるようになり、数十行にわたるコードが数行で実行できるようになります。
- async：非同期
- defer：遅延
- Exclude：除外
筆者は、deferを選択しています。
jQueryは表示に問題も出やすいので、deferで問題があればasyncにしましょう。
Async JavaScript For Plugins
こちらは、「Autoptimize」を使っている場合は設定しましょう。
「Enable Autoptimize Support to allow you to override AO’s default “defer” flag」にチェックを入れます。
Autoptimize Javascript Methodのどちらかに、チェックを入れて保存しましょう。
これで設定は完了です。
まとめAsync JavaScriptとAutoptimizeはセットで使おう
「Async JavaScript」は、レンダリングを妨げるリソースの除外のJavaScriptファイルを改善するのに役立ちます。
「Autoptimize」とあわせて使うことで、より最適化に貢献できます。
【Autoptimize】プラグインを使ってソースコードの最適化
最後まで見ていただき、ありがとうございました。
