8wired

とりあえずやってみるブログ

STINGER5でAsynchronous Javascriptを使うときの設定

2016/06/14

 Asynchronous Javascriptは、サイト内で利用しているJavaScriptを非同期でロードして、表示速度を向上させるくれる便利なプラグインです。

 JavaScriptを非同期にすると、Javascriptがまとめて後で読み込まれ、サイトの描画に必要な部分が先に読み込まれるようになるので、体感的にページの表示速度が向上するという効果があります。

 PageSpeed Insightsの診断結果で、「レンダリングを妨げる JavaScript を削除する」への対策として利用しています。

 非常に便利なプラグインなのですが、Javascriptを後で読み込むことによる不具合(厳密にはJavascriptを読み込む順番の変更による不具合)が多少あり、STINGER5でAsynchronous Javascriptを利用した場合には、下記の不具合を確認しています。

  • スマホ表示でアコーディオンメニューが開かない
  • サイドバーの「スクロール広告用」のウィジェットが機能しない

 これらの不具合への対策として、Asynchronous Javascriptがこれらの機能に影響するJavascriptの読み込みを非同期化しないよう設定します。

 STINGER5で使用されているJavascriptはbase.js, html5shiv.js, scroll.jsの3つ。これにjqueryを加えた4つが対象になります。

async-js-settings

 Asynchronous Javascriptの設定で「Exclude by Name」に4つのJavascriptの拡張子を抜いたファイル名「jquery,base,html5shiv,scroll」を記述します。これで4つのファイルは非同期化されなくなり不具合が解消されると思います。

 

-WordPress
-