Async JavaScript:「非同期」か「延期」属性を追加できる

2017年4月13日

Javascript ファイルに「非同期」か「延期」属性を追加できる WordPress 用プラグインの紹介です。
それは「Async JavaScript」です。
その導入手順から日本語化・使い方と設定などを解説していきます。

Async JavaScript

Async JavaScript - WordPress.org

Async JavaScript は、wp_enqueue_script 関数で読み込まれる外部 Javascript ファイルに async または defer 属性を追加できます。
属性追加を除外する Javascript ファイルを指定することもできます。

Javascript と同時に CSS ファイルも非同期ロードしたい場合には下記のプラグインもあります。
WP Performance – WordPress活用術

ページの表示速度を最適化できる Autoptimize の作者さんが提供しています。

記事を作成もしくは更新時点でのバージョン:2.20.03.01
マルチサイトでの利用:可

インストール手順

Async JavaScript をインストールするには 2 種類の方法があります。
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化する。
Async JavaScript – WordPress.org

もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面からインストールできます。

ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Async JavaScript」と入力します。

WordPressプラグイン「Async JavaScript」の導入から日本語化・使い方と設定項目を解説している画像

検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。

プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。

WordPressプラグインのインストール手順を解説 – WordPress活用術

日本語化

Async JavaScript を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。

WordPress と関連プロジェクト(テーマ・プラグイン)用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。

※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。

日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。

WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術

専用メニュー

WordPressプラグイン「Async JavaScript」の導入から日本語化・使い方と設定項目を解説している画像

管理画面の「設定」メニューの中に追加されています。

使い方

WordPressプラグイン「Async JavaScript」の導入から日本語化・使い方と設定項目を解説している画像

デフォルトでは、プラグインの機能は無効になっているので、
設定画面から有効にし設定を行いましょう。

設定

WordPressプラグイン「Async JavaScript」の導入から日本語化・使い方と設定項目を解説している画像

  • Enable Async JavaScript?
    このプラグインの機能を有効にするかどうか。
  • Also enable Async JavaScript for logged in users?
    ログインユーザーに対しても Javascript の非同期を有効にするかどうか。
  • Also enable Async JavaScript on cart/ checkout pages?
    (WooCommerce 用)カート/チェックアウトページで Javascript の非同期を有効にするかどうか。

WordPressプラグイン「Async JavaScript」の導入から日本語化・使い方と設定項目を解説している画像

クイック設定を行えます。
各ボタンを使用すると、現在の設定が全て上書きされます。

WordPressプラグイン「Async JavaScript」の導入から日本語化・使い方と設定項目を解説している画像

適用する方法(非同期または延期)を選択します。

WordPressプラグイン「Async JavaScript」の導入から日本語化・使い方と設定項目を解説している画像

jQuery に適用する方法(非同期または延期)を選択します。
デフォルトでは、Exclude(除外)になっています。

jQuery を非同期または遅延ロードすると、
一部の jQuery 関数、特にスクリプトを実行する前に、
jQuery をロードする必要があるインラインスクリプトが機能しなくなる場合があります。

WordPressプラグイン「Async JavaScript」の導入から日本語化・使い方と設定項目を解説している画像

「async」属性を適用するスクリプトをカンマ区切りで指定できます。
例:jquery.js,jquery-ui.js

WordPressプラグイン「Async JavaScript」の導入から日本語化・使い方と設定項目を解説している画像

「defer」属性を適用したいスクリプトをカンマ区切りで指定できます。
例:jquery.js,jquery-ui.js

WordPressプラグイン「Async JavaScript」の導入から日本語化・使い方と設定項目を解説している画像

ページの読み込み中に非同期または延期を適用しないようにするスクリプトをカンマ区切りで指定できます。

WordPressプラグイン「Async JavaScript」の導入から日本語化・使い方と設定項目を解説している画像

非同期・遅延属性を適用したくないスクリプトを含むインストール済みプラグインを選択できます。
1 つ以上のプラグインを選択します。

選択したプラグインのファイル内に含まれる全ての JavaScript ファイルが除外されます。
選択したプラグインによって読み込まれた外部 JavaScript は影響を受けません。

プラグインが他の場所にある JavaScript をロードする場合、グローバルメソッドが使用されます(非同期または遅延)。

WordPressプラグイン「Async JavaScript」の導入から日本語化・使い方と設定項目を解説している画像

非同期・遅延属性を適用したくないスクリプトを含むインストール済みテーマを選択できます。
1 つ以上のテーマを選択します。

選択したテーマのファイル内に含まれる JavaScript ファイルが除外されます。
選択したテーマによって読み込まれた外部 JavaScript は影響を受けません。

テーマが他の場所で提供されている JavaScript をロードする場合、グローバルメソッドが使用されます(非同期または遅延)。

WordPressプラグイン「Async JavaScript」の導入から日本語化・使い方と設定項目を解説している画像

一部のテーマ・プラグインは、wp_enqueue_script 関数を使用せずに JavaScript ファイルをロードします。
場合によっては、テーマ・プラグインの機能に必要です。

Async Javascript がサポートするアクティブなテーマ/プラグインがある場合は、ここにリストアップされます。

Enable Autoptimize Support to allow you to override AO’s default “defer" flag (see below):
Autoptimize サポートを有効にして、Autoptimize のデフォルトの「defer」フラグをオーバーライドできるようにするかどうか。

Autoptimize Javascript Method:
Async Javascripts が「async」に設定されている場合は、
Autoptimize の JavaScript 方法を「async」に変更すると、
パフォーマンスの改善に役立つ可能性があります。

しかし、表示レイアウトなどを壊す可能性もあります。

URL

Async JavaScript – WordPress.org

本ページはアフィリエイトプログラムによる収益を得ています

非同期&延期

Posted by 管理人