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

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

コードが書かれたモニター

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

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

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

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

async属性の使い方

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

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

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

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

簡単ですね。

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

async属性の注意点

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

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

関連する記事

この記事が気に入ったら
「いいね!」しよう

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

TwitterでWeberNoteをフォローしよう!

コメント