Top

JavaScriptファイルをスクロール発火で遅延読み込みさせる方法

JavaScript のファイル自体を遅延読み込みする方法は色々ありますが、マウスのスクロールに反応してファイルを遅延読み込みさせる方法です。

スクロールされることでファイル自体が初めて読み込まれるためファーストビューでその JavaScript コードは実行されません。結果としてファーストビューでの速度改善が見込めます。

PageSpeed Insights などの速度判定ツールも基本ファーストビューでのファイル読み込みのみを基準としているので、この方法で読み込まれる JavaScript ファイルは判定に加味されません。少しだけズルい方法な気もしますがこの方法で PageSpeed Insights のスコアを上げることが出来たりもします。

Lazyload-script

注意事項

仕組みは画像を LazyLoad させる方法と似ています。画像の LazyLoad との違いは「スクロールのみに反応する」ところです。

画像の LazyLoad もスクロールイベント自体に反応しているわけですが、画像が画面に入った事を判定に使っているものが多いです。このコードは画面に入ったらなどの判定は行いません。画面のスクロールが行われたら発火するとい方法を取ります。

スクロールイベントを感知して発火されるので当然スクロールが行われなければ何も起きません。一画面構成の Web ページなどでは使えない遅延読み込みの方法ということになります。スクロールを一切せずに返ってしまう訪問者にも読み込まれずに終わってしまうということになります。また何らかの理由でスクロールイベントが発生しない状況、そういうブラウザがあるのかわかりませんが、そういう場合は JavaScript 自体が読み込まれないままになってしまいます。

スポンサーリンク

スクロール版LazyLoad

以下のスクリプトタグを遅延読み込みしたいと仮定します。

<script src="http://example.jp/sample.js" async="async"></script>

JavaScript

function lazyLoadScript(scriptSrc) {
    //一回だけ実行するためにおく変数
    var scrollFirstTime = 1;

    //スクロールで発火
    window.addEventListener("scroll", oneTimeFunction, false);

    function oneTimeFunction() {
        if (scrollFirstTime === 1) {

            //2回以上実行されないように変数の変更
            scrollFirstTime = 0;

            //スクリプトタグの作成と src 値の設定
            var adScript = document.createElement("script");
            adScript.src = scriptSrc;

            //async 属性の付与 いらない場合は行ごと削除
            adScript.setAttribute("async", "async");

            //スクリプトタグの挿入
            document.body.appendChild(adScript);

            //念のためスクロールイベント自体を削除
            window.removeEventListener("scroll", oneTimeFunction, false);
        }
    }
}

//使い方
lazyLoadScript("http://example.jp/sample.js");

//2個以上 JavaScript ファイルを読み込みたい場合は lazyLoadScript 関数をその個数呼ぶ
lazyLoadScript("http://example.jp/sample2.js");
lazyLoadScript("http://example.jp/sample3.js");

そもそもが遅延読み込みなので async させる必要があるのかないのか微妙ですが付けておいても悪くないと思います。

もう少しかっこよくコードを書けるような気もするのですが単純にしました。クロージャーにしたかったので少し雑ですが関数の中に関数を書いてます。赤字の src を変更すればどんな JavaScript ファイルでも遅延読み込みが可能です。読み込まれた JavaScript ファイルは body 要素の一番下に基本入ります。

複数の JavaScript ファイルを遅延読み込みしたい場合は関数を何回も実行すれば OK です。

まとめ

JavaScript ファイルを遅延読込させることのおそらく最大の利点は PageSpeed Insights のスコアアップです。

当ブログは全ての JavaScript ファイルを遅延読込させているので PageSpeed Insights の JavaScript 関係でのスコア低下がありません。

PageSpeed Insights の判定

仮に全ての script を遅延読み込みをすると枠で囲った部分による減点がなくなります。