JavaScriptやCSSを遅延ロードする方法
はじめに
defer.jsで外部のJavaScriptやCSSの遅延読み込みが出来たので、忘れないように備忘録としてまとめてみました。
defer.jsについて興味がある方は参考にご覧下さい。
defer.jsとは
defer.jsはShin氏が2019年3月にリリースしたJavaScript、CSS、画像、iframeを遅延読み込みするためのライブラリです。
defer.min.jsは超小型でサイズは1.81kB、現在の最新バージョンはv3.6.0です。
CDNで外部ファイルを読み込んでも良いし、JetThemeのようにインライン化して使用します。
defer.jsに関する解説や使用方法は下記記事をご覧下さい。
wenyanetの記事
GithubのREADME.md
アタルさんのDefer.js翻訳記事
リモさんのDefer.js使用方法記事

【Defer.js】SNS の埋め込み数が多い場合の対応方法 | リモスキ
Twitter・Instagram の埋め込み数が多い場合に適した Defer.js の適用方法を紹介します。
上記記事を読んでもピンと来ない方は、このブログに組み込んでいるコードを後半に入れておいたので参考に見て下さい。
なぜdefer.jsを使用するのか
画像の遅延読み込みは loading="lazy"のクラスを追加することで、ブラウザでネイティブの遅延ロードができます。
また、JavaScriptで画像を遅延ロードする場合はclass="lazylode"等の追加で実施出来ます。
下記記事で少し解説しているので、興味のある方は参考に見て下さい。

【必見】loading=”lazy”の正しい使い方 - after work lab
はじめに 皆さんは遅延読み込み(lazy loding)という言葉を聞いたことがありますか。 電車の遅延は困りますが、Webコンテンツの遅延読み込みは通信量が減りブラウザの表示速度が改善されるので、素晴らしい仕組みだと言えます。 但し、用法容量を理解して使...

【Web表示高速化】JavaScriptを使ったLazyLoadの方法 - after work lab
はじめに 前回ネイティブlazy-lode(loading=”lazy”)の使用方法について記事を書きましたが、適用範囲に制限があることが分かりました。 ネイティブlazy-lodeで遅延読み込みが出来ない部分はJavaScriptを使って改善する必要があるのです...
一方、「AdScence」「YouTube」「Twitter」「ShareThis」等のコンテンツは表示前にJavaScriptが外部より読み込まれますが、それなりのファイルサイズなので、ページスピードを大きく低下させる原因になります。
ファーストビューに「AdScence」「Twitter」「YouTube」がないなら、重たいJavaScriptを呼び込まない工夫が必要です。
その為、管理人はJetThemeを使う迄は、zukooさんやq-Azさんが公開されている記事を参考に、JavaScriptの遅延読み込みをブログに埋め込んでました。
zukoo

pagespeedinsightsで『レンダリングを妨げるリソースの除外』する #1
京都市のホームページ制作会社です。お客様自身で簡単に更新できるホームページを制作いたします。 サイト公開後の運用サポートもお任せください。お見積もりは無料です、お気軽にご相談ください。
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で遅延読み込みさせるコード
管理人が遅延読み込みしたいと思ったコードは7つです。
・TwitterのJavaScript
・ShareThisのJavaScript
・prismのJavaScriptとCSS
・font-awesomeのCSS
・CodepenのJavaScript
・広告ブロックによる損失収益の回復タグの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';
var deferUrl7 = 'https://fundingchoicesmessages.google.com/i/pub-5860764237864409?ers=1';
//遅延表示させるクラス
const selector1 = 'lazy-twitter-tweet'; // 遅延読み込みさせるダミーのクラス
const selector2 = 'lazy-twitter-timeline'; // 遅延読み込みさせるダミーのクラス
const selector3 = 'sharethis-inline-reaction-buttons';
const selector4 = 'twitter-tweet';
const selector5 = 'twitter-timeline';
const embed1 = document.getElementsByClassName(selector1);
const embed2 = document.getElementsByClassName(selector2);
const embed3 = document.getElementsByClassName(selector3);
const embed4 = document.querySelectorAll('[class*="language-"]');
const embed5 = document.getElementsByClassName('fas');
const embed6 = document.getElementsByClassName('codepen');
const embed7 = document.getElementsByClassName(selector4);
const embed8 = document.getElementsByClassName(selector5);
try {
//広告ブロックによる損失収益の回復タグのJavaScript遅延読込み
Defer.js(deferUrl7, 'ad-blocker-js',1000);
//TwitterのJavaScriptとDomの遅延読込み
if (embed1.length !== 0 || embed2.length !== 0) {
Defer.js(deferUrl1, 'widgets-js', 1000, function() {
Defer.dom2('.lazy-twitter-tweet, .lazy-twitter-timeline', 200, null, function(node) {
if (node.className === 'lazy-twitter-tweet') {
node.className = 'twitter-tweet tw-align-center'; // 遅延読み込みさせるオリジナルのクラスに置き換える
} else {
node.className = 'twitter-timeline'; // 遅延読み込みさせるオリジナルのクラスに置き換える
}
twttr.widgets.load(node.parentNode);
}, { rootMargin: "200%" });
});
}
//sharethisのJavaScriptの遅延読込み
if (embed3.length !== 0) {
Defer.js(deferUrl2, 'sharethis-js', 1000);
}
//prismのJavaScriptとcssの遅延読込み
if (embed4.length !== 0) {
Defer.js(deferUrl3, 'prism-js', 1000, function() {
Defer.dom2('pre code', 200, 'scroll-loaded-prism', Prism.highlightElement, { rootMargin: "120%" });
}, true);
Defer.css(deferUrl4, 'prism-css', 1000);
}
//font-awesomeのcssを遅延読込み
if (embed5.length !== 0) {
Defer.css(deferUrl5, 'font-awesome-css', 1000);
}
//CodepenのJavaScriptの遅延読込み
if (embed6.length !== 0) {
Defer.js(deferUrl6, 'codepen-js', 1000);
}
} catch (error) { console.log(error) }
}
2023年2月21日 追記
当ブログに埋め込んでいるDefer.js@3.5.0はアタルさんがカスタマイズされたものを使用しておりDefer.dom2で設定してます。
#JetTheme #DeferJS
— アタル⭐️😼Excel VBA for Mac をAppleScriptで補完中...😽⭐️ (@Ataruchi) February 21, 2023
GoogleBlogger用ブログテンプレート(テーマ)の「JetTheme」では、defer.js@2.5.0をアレンジ後にインライン組込(Defer.dom関数に、引数1つ追加)
➡️JetTheme対応の『defer.js@3.5.0』コードをUPしましたので、ご利用くださいませ(リプ、参照)
著作権はShinさん所有@shinsenter https://t.co/VoCS1wgABa
まとめ
今まではページで使ってないJavaScriptやCSSを無駄に読み込んでましたが、要素が表示されるタイミングでコードを読み込むので、大変エコな方法だと思います。
JavaScriptやCSSを遅延読み込みする方法としては、とても簡単なのでオススメです。
気軽に足跡残してね!
この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。
https://t.co/kmpFNGDO5h
— heavy-peat (@AfterWork_Lab) February 13, 2022
ブログでのJavaScriptやCSSの遅延読み込みは、defer.jsを使用する方法に変更しました。
とても便利なので、JetThemeユーザはオススメしまーす。#Blogger #JetTheme #JavaScript #CSS #遅延読み込み
それでは今回の記事はこれでおしまい。
defer.js 今さらながら導入してみたら、すごく良かったです!
ご紹介ありがとうございます。
りもさん、コメントありがとうございます。
defer.jsはとても素晴らしいのに利用者が少なくもったいなー、と思ってました。
defer.jsを作られたShinさんが一番喜んでいるのでは、と思ってます。
あトんさんのprism.jsの遅延読み込みコードを使わせて頂きました。
とても助かりました。ありがとうございます。
お役に立てて良かったです。
Defer.dom2() の宣伝、ありがとうございます‼️
たぶん、JetTheme 対応後のJS Defer.dom() で4つめの引数を null にしても動作するかと思いますが、(Defer.js v3.4.0 時点では変更されていた) Shin さんオリジナルコードが『Defer.dom2()』となります。
ドキュメント通りに利用できますし、不具合があるといけないので…
アタルさん、コメントありがとうございます。Defer.dom() の使い方は、少し理解が進んだので、もっと活用できたらと思ってます。