WordPressプラグイン「Async JavaScript（エイシンク ジャバスクリプト）」の使い方について解説します。
Async JavaScriptは、JavaScriptの読み込みを非同期もしくは遅延化させることによって、サイトの読み込み速度改善を図ることができるプラグインです！
Webサイトの表示速度は、SEOに影響を与えるので気にされる方も多いのではないでしょうか。
「PageSpeed Insights」でサイトを分析した結果の改善できる項目に「レンダリングを妨げるリソースの除外」という項目があると思います。
Async JavaScriptを使うことで、レンダリングブロックしているJavaScriptの影響を改善し、スコア向上に貢献する可能性があるので是非試してみてください。
「レンダリングを妨げるリソースの除外」をプラグインで改善する場合には「Autoptimize」というプラグインが有名ですが、こちらの「Async JavaScript」を合わせて使うとさらに効果が出るかと思いますので、併用することをおすすめします。
Async JavaScriptの概要
Async JavaScript（エイシンク ジャバスクリプト）は、JavaScriptの読み込みを非同期化、もしくは遅延化できるプラグインです。
そもそもAsyncという単語自体に非同期という意味がありますので、名前の通りのままの機能を持つプラグインということになります。
サイトデータの読み込みのベースとなるのはHTMLですが、このうちJavaScriptの読み込み方を最適化することで、ページの表示速度を改善が見込めます。
ちなみにコードをいじればこの非同期化や遅延化の設定は可能ですので、ある程度知識があってご自身でコードを見て非同期設定や遅延設定ができる場合には、当プラグインは導入する必要はありません。
「そもそもJavaScriptとはどういったもので、非同期と遅延にはどのような違いがあるの？」という方もいらっしゃるかと思いますので簡単に解説します。設定方法のみ知りたい方は飛ばしてくださいね。
JavaScriptはサイトの動きを担っている
JavaScript（ジャバスクリプト）はプログラミング言語のひとつで、Webサイトでは主に動きに関わる部分を担当しています。
例えば、画像がフワッと浮き上がるような動きや、ページ内リンクでスムーズにスクロールするようなものが挙げられます。
つまりこのプログラムの読み込み方の設定を変えることで、ページ表示速度を最適化しようというプラグインが今回紹介している「Async JavaScript」というプラグインというわけですね。
デフォルトの状態では、HTML内にJavaScriptがあった場合にはHTMLの読み込みを一時停止してJavaScriptの読み込みをして実行します。
しかし、非同期や遅延設定では少し違った読み込み方をします。
非同期（Async）とは？
JavaScriptの読み込みの際に、HTMLの解析をストップせずに、同時にJavaScriptをダウンロードをするのが非同期設定です。
そしてJavaScriptを読み込みが完了したら、HTMLの読み込みを一時停止してJavaScriptを実行します。
HTMLの読み込みを同時に行うことで、サイトの表示が遅くなってしまうことを防ぎます。
- HTMLの解析と同時にJavaScriptの読み込み
- JavaScriptの読み込み後、HTMLの解析を一時停止してJavaScriptを実行
遅延（Defer）とは？
一方遅延（Defer）設定の場合には途中でHTMLの解析をストップしないで読み込みができます。
その代わりJavaScriptの読み込みはHTMLの読み込みがすべて完了した後になります。
- HTMLの解析と同時にJavaScriptの読み込み
- HTMLの読み込みがすべて完了した後にJavaScriptを実行
これにより、サイトにアクセスした時にユーザーが体感する表示速度は速くなりますが、利用しているJavaScriptの内容によっては表示がうまくいかないことがあります。
非同期と遅延のどちらがいいかは、サイトの構造やJavaScriptでどのようなプログラムを使っているかによります。実際に設定してみて、おかしい箇所があればもう片方を試してみるなどするのが良いでしょう。
Async JavaScriptの使い方と設定方法
プラグイン「Async JavaScript」をインストールしてください。
見た目はこんな感じです。Autoptimizeと開発元が同じなのでロゴが同じですね。
プラグインを有効化すると、設定の項目に
このように「Async JavaScript」の項目が追加されていると思うので、こちらから設定を進めます。
設定のタブ項目を見てみると、「Wizard」「Settings」「Status」「Help」「Optimize More!」という項目に分かれていますが、メインの設定は「Settings」のみで完結するので、他の項目は何もしなくてOKです。
他の項目が気になるという方のために一応補足しておくと、「Wizard」でGTmetrixの連携設定をし、「Status」で状況を確認することができます。「Help」にプラグインの簡単な解説が載っています。「Optimize More!」は他のプラグインの宣伝です。
GTmetrixはサイトパフォーマンスを測定するサイトで「PageSpeed Insights」と似たようなものだと思ってください。
わざわざGTmetrixと連携する必要性はないと思いますので、「Setting」以外の項目は原則不要と判断し、Settings部分の設定方法のみ解説します。
基本の設定方法（簡単設定方法）
基本的な設定は上記の通り設定するだけでOK。ただ、これでうまくいかないこともあるので各項目について補足します。
Enable JavaScript Method
このプラグインでの設定を有効にするかどうかの項目なので、必ずチェックを入れましょう。逆にチェックを外せば、プラグインの影響を無効化できます。
Quick Settings
全てのファイルについて同じ設定にしたいなど一括で設定する場合に使いますが、不具合が起きたときに原因が特定しづらいので次項の「Async JavaScript Method」と「jQuery」での設定をおすすめします。こちらでも同様の設定ができます。
ちなみに「Apply Async」は全JavaScriptファイルの非同期化、「Apply Defer」は遅延化、（jQuery excluded）がついている項目はjQueryのファイルだけは適用除外にしてそれ以外は一括適用する設定です。
Async JavaScript Method
非同期化の「Async」か遅延の「Defer」を選択します。スコア向上と言う面では「Defer」が推奨です。
ただし表示がおかしい場合には、Asyncにして直らないか試してみてください。
jQuery
同様に、「Async」か「Defer」を選択します。こちらも問題がないのであれば「Defer」推奨です。
ただし、jQueryは表示に問題が出やすい要素でもあります。Deferで表示に問題があれば、Asyncにしてみてください。
Asyncでも直らない場合には「Exclude」で対応します。「Exclude」を選択することでjQueryのファイルでは設定から除外します。
設定が完了するたびに、設定ページ下方にある「Save Setting」をクリックして忘れずに設定を保存してください。
個別に設定する方法
続いて個別にファイルを指定して設定する方法で、こちらは中上級者向けです。
初心者は基本設定だけすればOKなので、空欄のままで問題ありません。
非同期化や遅延化をすると不具合が生じ、その不具合を起こしているファイルを特定できる場合などにはこちらでファイルごと設定が可能です。
「Scripts to Async」で非同期化するファイルを指定、「Scripts to Defer」で遅延化するファイルを指定、「Scripts Exclusion」で設定しないファイルを指定します。複数指定する場合には、ファイル名の間を「 , （カンマ）」で区切ってください。
特定のプラグインを設定から除外する
もしお使いのプラグインに関わる部分で表示がおかしくなってしまったり、うまく機能しないような時には、そのプラグインを設定から除外することでうまく機能するはずです。
プラグインの除外設定は「Plugin Exclusions」という項目から行います。
上図のように、ボックス内をクリックするとWordPress内で適用しているプラグインが見れますので、該当のプラグインを選択することで除外が可能となっています。
特定のテーマを設定から除外する
「Theme Exclusions」という項目で、テーマでもプラグインと同様に除外設定が可能です。
テーマを定期的に変更して使い分けるということは普通はないかと思いますので、使う場面はないかと思いますが…。
Async JavaScriptの設定を他プラグインで機能させる
設定の一番最後のところに「Async JavaScript For Plugins」という項目があります。
JavaScriptファイルの読み込みを必要とするプラグインで、「Async JavaScript」がその機能を補助できるようなプラグインを使っている場合に、その補助を有効化することができるというものです。
例えば、姉妹プラグインのAutoptimizeを利用していれば、上図のように設定の連携が可能です。
「Enable Autoptimize Support to allow you to override AO’s default “defer” flag (see below)」にチェックを入れ、「Autoptimize Javascript Method」で読み込みをAsyncかDeferのどちらか選択して保存すれば設定が適用されます。
まとめ：Async JavaScriptはAutoptimizeと併用がおすすめ
Async JavaScriptは、「PageSpeed Insights」の「レンダリングを妨げるリソースの除外」におけるJavaScriptファイルの読み込み最適化に貢献し、スコア向上に役立ちます。
ただ、Autoptimizeの方が効果が大きい場合が多いと思われます。利用するならAutoptimizeと併用して補助的に使うのが良いでしょう。
スコア改善を目指している方は是非試してみてくださいね！