JavaScriptやCSSを非同期ロードしてサイトを高速化してくれるWordPressプラグイン「Async JS and CSS」

JavaScriptやCSSを非同期ロードしてサイトを高速化してくれるWordPressプラグイン「Async JS and CSS」

JavaScriptやCSSを非同期ロードしてサイトを高速化してくれるWordPressプラグイン「Async JS and CSS」

Async JS and CSSは、JavaScriptやCSSを非同期ロードすることでWordPressサイトの表示速度を高速化してくれるプラグインです。

非同期ロードすることで、JavaScriptやCSSを読み込むときの順番待ちがなくなり、サイトの表示速度向上に繋がります。

非同期とは

IT用語辞典バイナリによると、以下のように定義されています。

非同期とは、データを転送する際に、送信側と受信側のタイミングの一致(同期)を気にせずにデータをやり取りすることである。

送信側と受信側で厳密にタイミングの一致を図る「同期」方式は、受信側にデータを受け入れる準備ができているので、データそのものの他に必要な付加情報が少なくて済み、伝送効率が高くなるというメリットがある。非同期に通信を行うと、送信するデータごとに「スタートピット」と「ストップビット」という情報を付与する必要がある。そのためデータ伝送効率は下がるが、任意のタイミングでデータを送ることができるので、全体を滞らせるような現象が生じなくなる。

Async JS and CSSのインストール

インストール手順は以下の通りです。

  1. Async JS and CSSをダウンロードします。
  2. ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。
  3. 管理画面の[プラグイン]ページで、Async JS and CSSを有効化します。

Async JS and CSSの設定

管理画面の[設定] – [Async settings]から、Async JS and CSSの設定を行うことができます。

設定画面

 

Load Javascript asynchronously:チェックを入れると、JavaScriptを非同期ロードします。
Detect <script> tags in wp_head:チェックを入れると、wp_head()で出力される<script>タグを非同期にします。
Detect <script> tags in wp_footer:チェックを入れると、wp_footer()で出力される<script>タグを非同期にします。
Load CSS asynchronously:チェックを入れると、CSSを非同期ロードします。
CSS loading method:CSSをロードする方法を選択します。デフォルトだとインライン。
Minify CSS:チェックを入れると、CSSをMinify化(余分な改行やスペースを除外)します。
Remove “?ver=XXX” part from URLs:チェックを入れると、CSSのファイル名に付与されるバージョン番号を取り除きます。
Exceptions (files to ignore and load in render-blocking way):除外したいファイル名を入力します。

表示が崩れたり動きがおかしくなる場合は、該当の箇所を除外設定しましょう。

あとがき

簡単に非同期にできていいですね。JavaScriptだけ非同期にしたい場合は、Asynchronous Javascriptというプラグインもありますよ。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です