vier

Let's be more curious.

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

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

はじめに

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

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


defer.jsとは

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


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

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


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


wenyanetの記事

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

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

@ shinsenter / defer.js🥇 JS、CSS、画像、iframeを遅延読み込みするための非常に小さなネイティブパフォーマンスライブラリ...ほとんどすべてを延期し、Webサイトを簡単に高速化します。目次目次延期/非同期スクリプトタグは十分ではありませんコンテンツの遅延読み込みブラウザのサポートあなたのページにインストール基本的な使い方JavaScriptの読み込みを延期するJav


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.

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.

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


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


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

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

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

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




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

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

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

zukoo

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

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

京都市のホームページ制作会社です。お客様自身で簡単に更新できるホームページを制作いたします。 サイト公開後の運用サポートもお任せください。お見積もりは無料です、お気軽にご相談ください。


q-Az

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

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

JavaScriptのファイル自体を遅延読み込みする方法は色々ありますが、マウスのスクロールに反応してファイルを遅延読み込みさせる方法です。スクロールされることでファイル自体が初めて読み込まれるためファーストビューでそのJavaScriptコードは実行されません。結果としてファーストビューでの速度改



上記方法はイベント実行のタイミングで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);

//遅延読込みさせる外部参照ファイル
var deferUrl1 = 'https://platform.twitter.com/widgets.js';
var deferUrl2 = 'https://platform-api.sharethis.com/js/sharethis.js#property=5f4aad10ec6f5100126117d9&product=inline-reaction-buttons';
var deferUrl3 = 'https://blog-imgs-135.fc2.com/z/r/u/zru/prism121.js';
var deferUrl4 = 'https://blog-imgs-147.fc2.com/z/r/u/zru/prismJS118.css';
var deferUrl5 = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css';
var deferUrl6 = 'https://cpwebassets.codepen.io/assets/embed/ei.js';

//遅延表示させるクラス
const embed1 = document.getElementsByClassName('twitter-tweet');
const embed2 = document.getElementsByClassName('sharethis-inline-reaction-buttons');
const embed3 = document.getElementsByClassName('line-numbers');
const embed4 = document.getElementsByClassName('fas');
const embed5 = document.getElementsByClassName('codepen');

try {
    //TwitterのJavaScriptの遅延読込み
    if (embed1.length !== 0) Defer.js(deferUrl1, 'widgets-js', 1000, function() { Defer.dom(embed1, 200, 'loaded'); });
    //sharethisのJavaScriptの遅延読込み
    if (embed2.length !== 0) Defer.js(deferUrl2, 'sharethis-js', 1000, function() { Defer.dom(embed2, 200, 'loaded'); });
    //prismのJavaScriptとcssの遅延読込み
    if (embed3.length !== 0) Defer.js(deferUrl3, 'prism-js', 1000, function() { Defer.dom('pre code', 100, 'ide-loaded', Prism.highlightElement, { rootMargin: "120%" }); });
    if (embed3.length !== 0) Defer.css(deferUrl4, 'prism-css', 1000, function() { Defer.dom('pre code', 200, 'loaded'); });
    //font-awesomeのcssを遅延読込み
    if (embed4.length !== 0) Defer.css(deferUrl5, 'font-awesome-css', 1000, function() { Defer.dom(embed4, 200, 'loaded'); });
    //CodepenのJavaScriptの遅延読込み
    if (embed5.length !== 0) Defer.js(deferUrl6, 'codepen-js', 1000, function() { Defer.dom(embed5, 200, 'loaded'); });
} catch (error) { console.log(error) }

}


まとめ

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

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


気軽に足跡残してね!

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


それでは今回の記事はこれでおしまい。

Next Post Previous Post
4 Comments
  • りも
    りも 5/30/2022

    defer.js 今さらながら導入してみたら、すごく良かったです!
    ご紹介ありがとうございます。

    • あトん
      あトん 6/02/2022

      りもさん、コメントありがとうございます。
      defer.jsはとても素晴らしいのに利用者が少なくもったいなー、と思ってました。
      defer.jsを作られたShinさんが一番喜んでいるのでは、と思ってます。

  • Reika
    Reika 6/24/2022

    あトんさんのprism.jsの遅延読み込みコードを使わせて頂きました。
    とても助かりました。ありがとうございます。

    • あトん
      あトん 6/26/2022

      お役に立てて良かったです。

Please Enter Comments in Light mode
comment url