WordPress設定

Async JavaScript 非同期・延期プラグインの設定方法と使い方読み終わるまで 2

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

ワードプレス(WordPress)ブログサイトのJavaScriptのスクリプトコードを読み込むのを非同期または延期させて読み込みパフォーマンスを向上させることができるプラグイン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のダッシュボード(管理者画面)の新規プラグイン追加画面WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面
  1. WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
  2. 「新規追加」をクリックします
  3. 検索ボックスに”Async JavaScript”と入力すると下に検索結果が表示されます
  4. ”Async JavaScript”の「今すぐインストール」ボタンをクリックします
"Async JavaScript"のインストール完了画面“Async JavaScript”のインストール完了画面

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

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

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

Async JavaScriptの使い方

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

設定方法を解説します。

WoredPressのダッシュボード(管理者画面)の「設定」内の「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有効」“Async JavaScript”の設定画面の「非同期JavaScript有効」

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

  •  

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

Quick Settings(設定)

"Async JavaScript"の設定画面の「クイック設定」“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 JavaScript”の設定画面の「非同期JavaScriptメソッド」

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

jQuery(設定)

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

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

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

Scripts to Async(設定)

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

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

Scripts to Defer(設定)

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

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

Script Exclusion(設定)

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

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

Plugin Exclusions(設定)

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

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

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

Theme Exclusions(設定)

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

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

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

Async JavaScript for Plugins(設定)

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

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

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

  • Enable Autoptimize Support to allow you to override AO’s default “defer” flag (see below) 翻訳:
  • 非同期  延期

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

Status(状態)の確認

設定を変更して保存したらStatus(状態)タブから設定状態を確認できます。

"Async JavaScript"の設定画面のStatus(状態)タブ“Async JavaScript”の設定画面のStatus(状態)タブ

各項目は下記の意味になっています。

  • ステータス:有効
  • 方法:延期する
  • jQuery:延期
  • 非同期スクリプト:
  • スクリプトを延期する:
  • 除外:
    • スクリプト:
    • プラグイン:Rich Table of Contents
    • テーマ:
  • ステータスの最適化:有効
  • 最適化方法:延期

もし目次生成プラグイン「Rich Table of Contents」を使っている場合は除外するプラグインに指定すると目次の非表示ボタンの表示が崩れるの防げます

Async JavaScriptの注意点

Async JavaScriptはコードの読み込み実行の位置を制御してパフォーマンス向上を図るプラグインなので、ブログサイトの環境によって効果が異なります。

そのためブログサイトのページ表示速度のパフォーマンスを評価できるWebサイト「PageSpeed Insights」で計測しながら、Async JavaScriptの遅延または延期のどちらが効果的なのかを都度確認して設定する必要があります。

ちなみに、Async JavaScriptプラグインを使わずにWoredPressのfunctions.phpファイルに直接asyncやdeferを記述することも可能ですがPHPの知識が必要です。

まとめ

Async JavaScriptを導入して有効化して適切に設定するとブログサイトの表示速度を向上することが可能です。

ただし、パフォーマンス速度の測定という根気が必要な部分があるので、他のプラグインと比べると導入の敷居は高いです。

しかも、労力がかかる割には10%~20%ほどしかパフォーマンスは改善しません。

最適化プラグインのAutoptimizeと併用して使う方が効果は期待できます。

なのでもしAutoptimizeを使っている場合はAsync JavaScriptを導入すると更にパフォーマンス向上が期待できます。

Async JavaScriptと同じ開発者が作成したコード最適化プラグイン「Autoptimize」の設定方法はこちらの記事を参考にしてください↓
Autoptimize コードを最適化して高速化するプラグイン 設定方法と使い方