Async JavaScript 非同期・延期プラグインの設定方法と使い方

ワードプレス(WordPress)ブログサイトのJavaScriptのスクリプトコードを読み込むのを非同期または延期させて読み込みパフォーマンスを向上させることができるプラグインAsync JavaScriptを解説します。

この記事を見ることで得られるメリット

Async JavaScriptの使い方と設定方法がわかります

Async JavaScriptで実現できること
- JavaScriptの非同期(Async)と延期(Defer)とは
Async JavaScriptのインストール方法
Async JavaScriptの使い方
まとめ

Async JavaScriptで実現できること

Async JavaScript はJavaScriptの読み込みを非同期(Async)または延期(Defer)させてブログサイトの表示速度を向上させるプラグインです。

ブログサイトの表示速度の向上が期待できます

ブログサイトの表示速度を測定するPageSpeed Insightsで「レンダリングを妨げるリソースの除外」という項目の数値を改善できる可能性があります。

Async JavaScriptは同じ開発者の作成したコードを最適化して高速化するAutoptimizeプラグインと併用して使うとより効果的です

JavaScriptの非同期(Async)と延期(Defer)とは

HTMLコードを先に読み込んでから後でJavaScriptのコードを読み込む設定にするのが非同期(Async)です。

いっぽう延期(Defer)はHTMLの読み込み完了を待たずにJavaScriptのコードを読み込みます。

なので環境によってはどちらの設定のほうがパフォーマンスが向上するかは微妙に異なります。なのでPageSpeed Insightsで計測して検証しながら調整する必要があるため一概には言えませんが、延期(Defer)のほうがパフォーマンスが向上する傾向にあります。

Async JavaScriptのインストール方法

Async JavaScriptプラグインをWordPressにインストールする方法を解説します。

WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面

WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
「新規追加」をクリックします
検索ボックスに”Async JavaScript”と入力すると下に検索結果が表示されます
”Async JavaScript”の「今すぐインストール」ボタンをクリックします

“Async JavaScript”のインストール完了画面

↑Async JavaScriptのインストールが完了すると有効化ボタンが表示されるのでクリックします。

“Async JavaScript”を有効化すると表示される画面

これでAsync JavaScriptのインストールと有効化が完了しました。

Async JavaScriptの使い方

Async JavaScriptをインストールして有効化しただけでは非同期も延期化もされていないので設定は必須です。

設定方法を解説します。

WoredPressのダッシュボード(管理者画面)の「設定」内の「Async JavaScript」をクリック

↑Async JavaScriptの設定画面に入るにはWoredPressのダッシュボード(管理者画面)の「設定」内の「Async JavaScript」をクリックします。

Async JavaScriptの設定

Async JavaScriptの設定画面には下記の5つのタブがありますが、使うのはSettings(設定)だけです。他のタブは無視して大丈夫です。

Wizard(ウィザード)
Settings(設定)
Status(状態)
Help(ヘルプ)
Optimize More!(もっと最適化)

Enable Async JavaScrip(設定)

“Async JavaScript”の設定画面の「非同期JavaScript有効」

↑Enable Async JavaScript(非同期JavaScriptの有効化)にチェックマークを入れて有効化します。
下の2つは設定項目の意味は次の通りです。

ログインしたユーザーに対して非同期JavaScriptも有効にしますか？
カート/チェックアウトページで非同期JavaScriptも有効にしますか？

両方ともチェックしなくても大丈夫です。
もし該当するページでも非同期化したい場合はチェックマークを付けてください。

Quick Settings(設定)

“Async JavaScript”の設定画面の「クイック設定」

↑1つのボタンを押すことで一括して全項目を下記の設定に変更できます。

Apply Async：非同期を適用する
Apply Defer：延期を適用する
Apply Async(jQuery excluded)：非同期を適用する(jQueryを除く)
Apply Defer(jQuery excluded)：延期を適用する(jQueryを除く)

おすすめの設定は「Apply Defer：延期を適用する」です。

もしこの項目で一括設定しない場合は以降の設定をひとつづつ設定していく必要があります。

Quick Settings(設定)

“Async JavaScript”の設定画面の「非同期JavaScriptメソッド」

↑前項目の「クイック設定」をしなかった場合は非同期(Async)または延期(Defer)を選択します。

jQuery(設定)

“Async JavaScript”の設定画面の「jQuery」

↑「クイック設定」をしなかった場合は非同期(Async)または延期(Defer)もしくは除外(Exclude)を選択します。

jQueryはJavaScriptコードをよりシンプルに記述できるようしたコードです

Scripts to Async(設定)

“Async JavaScript”の設定画面の「非同期化するスクリプト」

↑空白で大丈夫です。
もしパフォーマンスの低下に影響を及ぼしているスクリプトファイルが特定されている場合は、この空欄に入力することでファイル単位で非同期化させることも可能です。

Scripts to Defer(設定)

“Async JavaScript”の設定画面の「延期するスクリプト」

↑空白で大丈夫です。
もしパフォーマンスの低下に影響を及ぼしているスクリプトファイルが特定されている場合は、この空欄に入力することでファイル単位で延期化させることができます、

Script Exclusion(設定)

“Async JavaScript”の設定画面の「スクリプトの除外」

↑空白で大丈夫です。
非同期も延期もしたくないファイルがあれば入力することで設定から除外することができます。

Plugin Exclusions(設定)

“Async JavaScript”の設定画面の「プラグインの除外」

↑非同期や延期化でプラグイン機能の表示に問題が生じた場合はこの項目に該当プラグインを指定します。

空欄の箇所に、ブログサイトに導入されているプラグイン一覧がプルダウンメニューで表示されるので、そこから選択します。

Theme Exclusions(設定)

“Async JavaScript”の設定画面の「テーマの除外」

↑空白で大丈夫です。
この空欄には前項のプラグインと同様にテーマ単位で除外指定ができます。

空欄にはプルダウンメニューでブログサイトにインストールされているテーマ一覧が表示されるので選択できます。

Async JavaScript for Plugins(設定)

“Async JavaScript”の設定画面の「プラグインの非同期JavaScript」

↑もし「Autoptimize」プラグインが有効化されている場合はAsync JavaScriptと連携させることができます。

「Autoptimize」と「Async JavaScript」を連携したほうがパフォーマンスは向上するので、下記のように設定します。

Enable Autoptimize Support to allow you to override AO’s default “defer” flag (see below) 翻訳：Autoptimize Supportを有効にして、AOのデフォルトの「defer」フラグをオーバーライドできるようにします
Autoptimize Javascript Method: Async Defer翻訳：Javascriptメソッドを最適化する：非同期延期

設定を変更したら最終行にあるSave settingsボタンを押してください。