Async JavaScriptで読み込みを非同期化して高速化する方法【WordPressプラグイン】
※本ページにはプロモーションが含まれている場合があります。
・WordPressサイトを高速化したい
・プラグイン「Async JavaScript」でできることや使い方を知りたい
・サイト高速化のためのおすすめの設定を知りたい
・JavaScriptの非同期や遅延について知りたい
ブログのSEOの最重要項目の1つとも言えるページの表示速度。
サイトの速度を計測できるPageSpeed Insightsであまり良いスコアが出なかったり、
「レンダリングを妨げるリソースの除外」の項目で合格できない方も多いはず。
そんな時にJavaScriptの読み込みを非同期・遅延することでサイトを高速化してくれるのが「Async JavaScript」というプラグイン。
本記事では、「Async JavaScript」を使ってサイトを高速化する方法を解説します。
本記事の内容
- Javascriptの非同期/遅延読み込みについて
- 「Async JavaScript」でできること
- サイトを高速化するAsync JavaScriptのおすすめの設定方法
本記事を読むと、JavaScriptの非同期・遅延の意味や、Async JavaScriptでサイトを高速化するための、安全でより高速化できるおすすめの設定方法がわかります。
- ライター100名以上の組織の法人を経営→株式譲渡
- 立ち上げから半年で月間1,000万PVを達成
- 1年で月間1200万PVを達成
- 年商約1億円を達成
- 法人向けコンサル1社あたり月額60~100万円
- PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数
>> 【2021年】おすすめのアフィリエイトASP15選【初心者に必須のASPを厳選】
>> 【超豪華特典】AFFINGER6(アフィンガー6)の豪華13特典付き購入方法【レビュー】
＼ 月間1300万PVのプロが解説 ／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓
>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！
Async JavaScriptでJSを非同期して高速化しよう！
「Async JavaScript」は先述のとおり、JavaScriptの読み込みを非同期化・遅延化することでサイトを高速化してくれるプラグインです。
Javascriptの非同期(Async)って？
まず「Javascript」とはプログラミング言語の１つであり、WordPressの画面上での動きなどを処理するためのプログラムです。
例えば、
- 目次ボタンをクリックしたときの目次の開閉の動き
- 目次の項目をクリックした時にスクロールでなめらかに移動させる動き
などもJavaScriptの役目です。
続いて「非同期(Async)」とは、JavascriptやCSSなどのコードを読み込む方法の1つです。
通常の読み込み
ページを表示するときには基本的に、ページのファイルのコードが上から順に読み込み・実行されます。
非同期を使わない通常の読み込みの場合は、ファイルの途中にJavascriptのコードがあった場合、その場でJavascriptを読み込み・実行するので、その読み込みと実行の間だけHTMLの読み込みが中断されます。
つまりJavascriptを読み込んでいる間、HTMLの読み込みがストップされるので、その分だけページの表示速度が遅くなります。
Javascriptを読み込む時間だけ表示が遅くなるのが、この通常の読み込み方法の問題です。
そしてこれを解決するのが
- 非同期(Async)
- 遅延(Defer)
の2つの読み込み方法です。
非同期(Async)の読み込み
HTMLの読み込みを中断させずに、並行して同時にJavascriptを読み込むことでページ全体の読み込み時間を短縮する読み込み方法のこと。
非同期読み込みでは、HTMLの読み込みと同時にJavascriptも読み込むので、その分だけページの表示速度を速くすることができます。
読み込みの流れとしては、上の画像の通りで、
- HTMLとJavascriptを並行して読み込み
- Javascriptの読み込みが完了したら、HTMLの読み込みを中断してJavascriptを実行
- Javascriptの実行が完了したらHTMLの読み込みを再開
という流れです。
遅延(Defer)の読み込み
非同期(Async)と同じで、HTMLの読み込みを中断させずに並行して同時にJavascriptを読み込むことで読み込み時間を短縮する方法。Javascriptの実行のタイミングだけが非同期(Async)と異なる。
遅延読み込みも非同期読み込みと同じく、HTMLの読み込みと同時にJavascriptも読み込むことでページの表示速度を速くすることができます。
違いはJavascriptの実行のタイミングで、
非同期の場合はHTMLを中断して実行されていたのに対し、遅延の場合はHTMLを全て読み込んでから最後にJavascriptが実行されます。
読み込みの流れとしては、上の画像の通りで、
- HTMLとJavascriptを並行して読み込み
- (Javascriptの読み込みが完了してもまだ実行はしない)
- HTMLの読み込みが完了したらJavaScriptを実行する
という流れです。
非同期と遅延のそれぞれのメリットと使い分け
遅延読み込み
- メリット：HTMLの読み込みを一度も中断しないので、ページの表示速度が速い
- デメリット：Javascriptの実行が最後になるので、ページの表示が崩れる場合がある
非同期読み込み
- メリット：途中でJavascriptを読み込むので、遅延よりも表示崩れが起こりにくい
- デメリット：Javascriptの実行中はHTMLの読み込みを中断するので、遅延より表示速度がやや遅い
非同期/遅延以外のJavaScriptの最適化はAutoptimizeがおすすめです。
>> 【2021年最新】Autoptimizeの設定方法と使い方：コード最適化プラグイン【WordPress】
Async JavaScriptでできること
解説した非同期読み込みや遅延読み込みを利用することで、ページの表示速度を上げてくれるのがAsync JavaScriptというプラグインの機能です。
Async JavaScriptでは具体的には以下のようなことが行えます。
- Javascriptの非同期・遅延読み込み
- jQueryの非同期・遅延読み込み
- 非同期・遅延読み込みから除外するJSやプラグインなどの設定
「レンダリングを妨げるリソースの除外」にも効果的
Async JavaScriptで非同期・遅延読み込みを行うことで、PageSpeed Insightsでスコアが伸びない原因の１つの「レンダリングを妨げるリソースの除外」を解決することができます。
という方も多いので、これを解決できるAsync JavaScriptは実は是非とも使うべき超重要なプラグインです。
Async JavaScriptのインストールと有効化
どのプラグインでもそうですが、プラグインの相性によっては不具合が起こる可能性があります。インストールの前に、以下の記事を参考にWordPressのバックアップを取っておきましょう。
>> 【2021年最新】BackWPupの正しい設定方法と使い方：自動バックアッププラグイン【WordPress】
まずはWordPressの管理画面から「プラグイン」→「新規追加」をクリックします。
プラグインの検索窓に「Async JavaScript」と入力して検索します。
上の画像のプラグインがAsync JavaScriptです。
「今すぐインストール」をクリックしてインストールします。
インストールが完了したら「有効化」をクリックします。
インストール済みプラグイン一覧の画面に切り替わり、「プラグインを有効化しました。」と表示されたらAsync JavaScriptのインストールと有効化が完了です。
Async JavaScriptの使い方と設定方法
まずは「設定」→「Async JavaScript」をクリックします。
この画面がAsync JavaScriptの設定画面になります。
設定画面の5つのタブ
Async JavaScriptの設定画面には、上のように5つのタブがあります。
この5つのうちメインの設定に必要なのは「Settings」の項目のみになります。
「Settings」での設定方法は後ほど解説しますが、一旦これら5つのタブについて簡単にご紹介します。
Wizard
GTmetrixという、サイト速度を計測することができるサイトのAPIキーを登録して連携するための設定タブ。
ここでGTmetrixと連携することでサイトの速度を把握しやすくなりますが、不要なのでこのタブはスキップでOK。
Settings
このプラグインのメインとなる設定を行うタブです。
唯一必要なタブですので、後ほど詳しく解説します。
Status
Async JavaScriptの設定の状況とGTmetrixで計測されたサイトの速度の状態を確認できるタブ。
特に使う機会はありません。
Help
Async JavaScriptについての情報や様々なヘルプ・サポートなどが記載されています。
特に使う機会はありません。
Optimize More!
Async JavaScriptに関連する様々な有料のサービスが紹介されています。
不要ですので特にチェックしなくてもOKです。
サイトを高速化するおすすめの設定方法
それでは、ここからはいよいよ高速化のためのおすすめの設定方法です。
プラグインの相性によっては不具合が起こる可能性もあるので、WordPressのバックアップを取っておきましょう。
>> 【2021年最新】BackWPupの正しい設定方法と使い方：自動バックアッププラグイン【WordPress】
おすすめの高速化設定はこれ
サイトを高速化するためのおすすめの設定をご紹介します。
まずは「Settings」のタブを開きましょう。
サイトを高速化するためには、上の画像を参考に以下の3点だけ設定すればOKです。
設定する項目
- Enable Async JavaScript：「Enable Async JavaScript?」にチェック
- Async JavaScript Method：「Defer」を選択
- jQuery：「Defer」を選択
設定の変更ができたら、「Save Settings」をクリックすればAsync JavaScriptでサイトを高速化するための設定は完了です。
非同期(Async)と遅延(Defer)の使い分け
非同期(Async)と遅延(Defer)の違いやメリットは冒頭でも解説したとおり以下のようになっています。
| 非同期(Async) | 遅延(Defer) | |
|---|---|---|
| 違い | HTMLの読み込みを中断してJavascriptを実行する | HTMLの読み込みが完了してからJavascriptを実行する |
| メリット | HTMLの読み込みを一度も中断しないので、ページの表示速度が速い | 途中でJavascriptを読み込むので、遅延よりも表示崩れが起こりにくい |
| デメリット | Javascriptの実行が最後になるので、ページの表示が崩れる場合がある | Javascriptの実行中はHTMLの読み込みを中断するので、遅延より表示速度がやや遅い |
つまりサイト高速化のためには遅延(Defer)がおすすめなので今回も遅延(Defer)を選択していますが、表示崩れや不具合が起こった場合は非同期(Async)に切り替えましょう。
Async JavaScriptの各種設定項目
おすすめの設定は先ほど紹介したとおりですが、本章ではそれぞれの設定項目の内容を詳しく解説します。
Enable Async JavaScript：プラグインの有効化/無効化
この項目では、プラグインの機能の有効化/無効化の切り替えができます。
1つ目の項目の「Enable Async JavaScript?」にのみチェックを入れましょう。
Enable Async JavaScript?
プラグインの機能自体の有効化/無効化の切り替えができます。
先述のとおり、チェックを入れます。
Also enable Async JavaScript for logged in users?
WordPressにログインしているユーザーに対して非同期/遅延などの機能を有効にするかを設定できます。
不要なので、デフォルトのままチェックなしでOKです。
Also enable Async JavaScript on cart/ checkout pages?
お買い物かごや決済ページでも非同期/遅延などの機能を有効にするかどうかを設定できます。
ECサイトなどのための機能であり不要なので、デフォルトのままチェックなしでOKです。
Quick Settings：簡単に設定する
この後に設定する「Async JavaScript Method」と「jQuery」の2つの項目をワンクリックで簡単に設定するためのメニューです。
選択肢は以下のとおりですが、それぞれ個別で設定した方がわかりやすいので、この項目はスキップでOK。
設定の選択肢
- Apply Async：全て非同期に設定
- Apply Defer：全て遅延に設定
- Apply Async (jQuery excluded)：jQueryを除いて全て非同期に設定
- Apply Defer (jQuery excluded)：jQueryを除いて全て遅延に設定
Async JavaScript Method：JSの「非同期化」と「遅延化」を選択
この項目では、JavaScriptの読み込みを「非同期」と「遅延」のどちらにするかを選択できます。
画像のとおり、Defer(遅延)を選択しましょう。
設定の選択肢
- Async：非同期読み込み
- Defer：遅延読み込み
jQuery：jQueryの「非同期化」と「遅延化」を選択
jQueryの読み込みを「非同期」と「遅延」のどちらにするか選択できます。
JavaScriptと同じ役割を果たすプログラム言語で、JavaScriptがより進化したもの。
ここの設定もDefer(遅延)にしましょう。
jQueryの遅延はJavaScriptの遅延よりも影響が大きく、やや不具合が起こりやすいです。
不具合が起こったり表示が崩れた場合はAsync(非同期)に切り替え、それでも調子が悪ければExclude(非同期・遅延なし)に切り替えましょう。
設定の選択肢
- Async：非同期読み込み
- Defer：遅延読み込み
- Exclude：設定から除外する(非同期も遅延もせず、通常の読み込み)
Scripts to Async：JSファイルを指定して非同期化
JavaScriptのファイル名を個別で指定して、指定したファイルは非同期化で読み込むように設定できます。
特に不要なので、スキップでOK。
必要な場合は以下のようにファイル名を記入しましょう。
Scripts to Defer：JSファイルを指定して遅延化
JavaScriptのファイル名を指定して、指定したファイルは遅延で読み込むように設定できます。
特に不要なのでスキップでOK。
必要な場合は先ほどの非同期の指定と同じように、以下のようにファイル名で指定。
Script Exclusion：JSファイルを指定して除外
JavaScriptのファイル名を個別で指定して、指定したファイルは非同期も遅延も行わず通常の読み込みにするように設定できます。
基本的に不要ですが、非同期・遅延にすると不具合が起こるような特定のファイルはここで指定しておきましょう。
非同期や遅延のファイルの設定と同様、以下のようにファイル名を入力すればOKです。
Plugin Exclusions：プラグインを指定して除外
プラグインを指定して、そのプラグインのJavaScriptやjQueryは非同期/遅延から除隊して通常の読み込みにするための設定。
基本的に不要ですが、特定のプラグインのコードで不具合が起こっている場合はこの項目でプラグインを指定して除外しましょう。
設定するには、入力欄をクリックすると上記のようにプラグインが一覧で表示されるので、除外したいプラグインをクリックすればOKです。
Theme Exclusions：テーマを指定して除外
特定のWordPressテーマを指定して、テーマのフォルダに含まれるJavascriptファイルは非同期/遅延から除外して通常の読み込みにするように設定できます。
基本的に不要なのでスキップでOK。
設定する場合は、入力欄をクリックすると画像のようにテーマが一覧で表示されるので、除外したいテーマをクリックします。
Async JavaScript For Plugins：サポートの案内
Async JavaScriptからのメッセージとサポートの案内です。
以下のようなことが記載されていますが、チェックしなくてもOKです。
・何かサポートできることがあればAsync JavaScriptのサポートフォーラムから問い合わせてねという旨
Async JavaScriptで非同期/遅延読み込みをして高速化しよう！
プラグイン「Async JavaScript」を使ってJavascriptを非同期/遅延読み込みすることでサイトを高速化する方法を解説しました。
JavaScriptの非同期/遅延読み込みを使うことで、PageSpeed Insightsでよく表示される改善点である「レンダリングを妨げるリソースの除外」の評価が改善されます。
他のプラグインではできないことなので、Autoptimizeを既に導入している方も合わせて導入しておきましょう。
サイト高速化については以下の記事もおすすめです。
公式LINE限定で読めるパスワード付きの記事でがっつり解説しています。
LINE参加者の声
400名が以上参加中！無料で読めます♪
＼ 最短で収益化 ／
