外部のJavaScriptやCSSを遅延読み込みする方法

2022/02/13 2022/05/01

はじめに

defer.jsで外部のJavaScriptやCSSの遅延読み込みが出来たので、忘れないように備忘録としてまとめてみました。

defer.jsについて興味がある方は参考にご覧下さい。

defer.jsとは

defer.jsはShin氏が2019年3月にリリースしたJavaScript、CSS、画像、iframeを遅延読み込みするためのライブラリです。

defer.min.jsは超小型でサイズは1.42kB、現在の最新バージョンはv2.6.0です。

CDNで外部ファイルを読み込んでも良いし、JetThemeのようにインライン化して使用します。

defer.jsに関する解説や使用方法は下記記事をご覧下さい。

wenyanetの記事

？JS、CSS、画像、iframeを遅延読み込みするための超小型のネイティブパフォーマンスライブラリ...ウェブサイトを簡単に高速化します。 - wenyanet

GithubのREADME.md

shinsenter/defer.js: 🥇 A super small, super efficient library that helps you lazy load almost everything like images, video, audio, iframes as well as stylesheets, and JavaScript.

上記記事を読んでもピンと来ない方は、このブログに組み込んでいるコードを後半に入れておいたので参考に見て下さい。

なぜdefer.jsを使用するのか

画像の遅延読み込みは loading="lazy"のクラスを追加することで、ブラウザでネイティブの遅延ロードができます。

また、JavaScriptで画像を遅延ロードする場合はclass="lazylode"等の追加で実施出来ます。

下記記事で少し解説しているので、興味のある方は参考に見て下さい。

【必見】loading=”lazy”の正しい使い方 - after work lab

【Web表示高速化】JavaScriptを使ったLazyLoadの方法 - after work lab

一方、「AdScence」「YouTube」「Twitter」「ShareThis」等のコンテンツは表示前にJavaScriptが外部より読み込まれますが、それなりのファイルサイズなので、ページスピードを大きく低下させる原因になります。

ファーストビューに「AdScence」「Twitter」「YouTube」がないなら、重たいJavaScriptを呼び込まない工夫が必要です。

その為、管理人はJetThemeを使う迄は、zukooさんやq-Azさんが公開されている記事を参考に、JavaScriptの遅延読み込みをブログに埋め込んでました。

zukoo

pagespeedinsightsで『レンダリングを妨げるリソースの除外』する　#1

q-Az

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

上記方法はイベント実行のタイミングでJavaScriptを遅延読み込みするもので、スクロールやクリックをトリガーに発火し遅延ロードするものです。

q-Azさんのコードが一番小さいので、</body>の前に入れて使ってました。

今まで使っていたコードを参考に載せておきます。

コード

<script>
//<![CDATA[ 
function lazyLoadScript(scriptSrc) {

    var scrollFirstTime = 1;

    //スクロールorマウスクリックor画面タッチで発火
    window.addEventListener("scroll", oneTimeFunction, false);
    //window.addEventListener("mousedown", oneTimeFunction, false);
    //window.addEventListener("touchstart", oneTimeFunction, false);
    //window.addEventListener("mousemove", oneTimeFunction, false);

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

            scrollFirstTime = 0;
            var adScript = document.createElement("script");
            adScript.src = scriptSrc;

            document.body.appendChild(adScript);
            window.removeEventListener("scroll", oneTimeFunction, false);
            //window.removeEventListener("mousedown", oneTimeFunction, false);
            //window.removeEventListener("touchstart", oneTimeFunction, false);
            //window.removeEventListener("mousemove", oneTimeFunction, false);

        }
    }
}

//遅延読み込みするjavascript
lazyLoadScript("https://platform-api.sharethis.com/js/sharethis.js#property=xxxx&product=inline-reaction-buttons");
lazyLoadScript("https://xxxx/prism121.js");
lazyLoadScript("https://platform.twitter.com/widgets.js");
//]]>
</script>

JavaScriptの遅延読み込みは上記コードで十分なのですが、スクロールイベントで一気に読み込みが発生することと、CSSの遅延読み込みには未対応なのが不満でした。

JetThemeはdefer.jsを使って「AdSecnce」「YouTube」を遅延読み込みしてますが、よく調べてみるとDOMの実行に合わせてJavaScriptやCSSを遅延読み込みできることが分かりました。

こんな便利なライブラリは使わないと損なので、さっそくJetThemeに組み込んでみました。

defer.jsで遅延読み込みさせるコード

管理人が遅延読み込みしたいと思ったコードは6つです。

・TwitterのJavaScript

・ShareThisのJavaScript

・prismのJavaScriptとCSS

・font-awesomeのCSS

・CodepenのJavaScript

参考にブログに組み込んでいるコードを載せておきます。

JetThemeをお使いの方は/*Your Script is here to maintain performance.*/の下にコードを入れて下さい。

なお、構文はGithubのREAD.meに詳しく書かれているので熟読下さい。

コード

function jtCallback(){
/*Your Script is here to maintain performance.*/

// the example below if you use url.
// Defer.css('your_css_url','your-style-id',100);
// Defer.js('your_script_url','your-script-id',100);

//sharethisのJavaScriptの遅延読込み
Defer.js('https://platform-api.sharethis.com/js/sharethis.js#property=xxxx&product=inline-reaction-buttons', 'sharethis-js', 1000, function() {
    Defer.dom('.sharethis-inline-reaction-buttons', 200, 'loaded');
});

//TwitterのJavaScriptの遅延読込み
Defer.js('https://platform.twitter.com/widgets.js', 'widgets-js', 1000, function() {
    Defer.dom('.twitter-tweet', 200, 'loaded');
});

//prismのJavaScriptの遅延読込み
Defer.js('https://xxxx/prism121.js', 'prism-js', 1000, function () {
  Defer.dom('pre code', 0, 'ide-loaded');
});

//prismのcssを遅延読込み
Defer.css('https://xxxx/prismJS118.css', 'prism-css', 1000, function() {
    Defer.dom('pre code', 200, 'loaded');
});

//font-awesomeのcssを遅延読込み
Defer.css('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css', 'font-awesome-css', 1000, function() {
    Defer.dom('.far', 200, 'loaded');
});

//CodepenのJavaScriptの遅延読込み
Defer.js('https://cpwebassets.codepen.io/assets/embed/ei.js', 'codepen-js', 1000, function() {
    Defer.dom('.codepen', 200, 'loaded');
});

}

まとめ

今まではページで使ってないJavaScriptやCSSを無駄に読み込んでましたが、要素が表示されるタイミングでコードを読み込むので、大変エコな方法だと思います。

JavaScriptやCSSを遅延読み込みする方法としては、とても簡単なのでオススメです。

気軽に足跡残してね！

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。

ツイッターで♡いいねする

https://t.co/kmpFNGDO5h

ブログでのJavaScriptやCSSの遅延読み込みは、defer.jsを使用する方法に変更しました。

とても便利なので、JetThemeユーザはオススメしまーす。#Blogger #JetTheme #JavaScript #CSS #遅延読み込み
— heavy-peat (@AfterWork_Lab) February 13, 2022