【JavaScript】レンダリングブロックするjsファイルを非同期化して、ページのスピードを速くする方法

GoogleのPageSpeed Insightsでサイトをチェックすると、読み込みスピードを速くする方法として「レンダリングをブロックするリソースの読み込みを遅延させるか、非同期に読み込むか、これらのリソースの重要部分を HTML 内に直接インライン化してください」と提案されることがあります。

これはHTMLの描画完了前にJavaScriptの読み込みが発生しているため、ページを表示する速度が遅くなっていることを指しています。ページの読み込みスピードは、SEOやユーザー体験に大きく影響するため、可能であれば対策しておくことをおすすめします。

今回は、jsファイルを非同期で読み込むことができるようになる[async属性]について説明します。

jsファイルを非同期読み込みにする方法

JavaScriptファイルを非同期読み込みにするには、HTML5からサポートされた[async属性]を使います。

通常、外部JavaScriptは下記のように記述していると思います。

<script src="hoge.js"></script>

これに[async]を追加します。

<script src="hoge.js" async></script>

簡単ですね。

これで「Javascript読み込み」と「HTMLページ描画」が別々に並行して行われるようになり、ページのレンダリングが速くなります。

いいことずくめのように感じる[async属性]ですが、注意しなくてはいけない点があります。それは非同期で読み込むため、jsファイルの実行順序がわからないということ。

実行する順番がわからないため、複数のファイルに依存関係があるスクリプトは非同期で読み込むと上手く動作しない可能性があります（例えばjQueryなど）。そのため、[async属性]を使う場合は、完全に独立しているスクリプトで使うことをおすすめします。