オフスクリーン画像の遅延読み込み
サイズ76KBの減らせるデータ量が76KBってどういうこと？
「オフスクリーンの画像の遅延読み込み」の意味がわからず調べてみると、画面に表示されていない画像は読み込まず、ダミー画像を読み込んでおいて、スクロールして画像が表示されたときに画像を表示させるそうです。
Bloggerで比較的簡単にできそうな方法がみつかったので試してみることに。
JQuery Lazy Load プラグイン導入
JQuery本体を読み込み
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
※読み込み済みなので省略しました。
Lazy Loadのプラグインを読み込み
jsDelivrというサイトがJQueryのプラグインをオープンソースのCDN（コンテンツデリバリネットワーク）で使えて、Lazy Loadもみつかったので試してみました。<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>
HTMLに貼り付け
上記2つを<head>〜</head>にコピー。JavaScriptをコピー
How to Add Lazy load Plugin in Blogger BlogSpot For Faster Loading?｜www.bloggerspice.com（英語サイト）
参考サイトのJavaScript（下記）を<head>〜</head>にコピー。
<!-- lazy load start www.bloggerspice.com -->
<script type='text/javascript'>//<;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
<!-- lazy load end www.bloggerspice.com -->とありますが</body>の直前に貼り付けても動きました。
追記 ページの読み込みに関係あるものは<head>〜</head>にある方が良いそうなので修正しました。
カスタマイズ
$(function () {
$("img").lazyload({
placeholder: "【ダミー画像URL】",
effect: "fadeIn",
threshold: "-30"
});
})- 「fadeIn」フェードインのエフェクト、フェードしたくない場合は削除。
- 「threshold」読み込みタイミング。マイナスの値を指定すると遅くなります。
- ダミー画像は自分で用意して入れ替えました。
PageSpeed Insightsで確認
PageSpeed Insightsで分析してみると「オフスクリーン画像の遅延読み込み」の項目がなくなっていました！
、、、数字はみなかったことに。。。
サイドバーの画像が表示されない問題
結果はともかくできたことに満足していると、サイドバーの人気の投稿の画像が表示されない、、、というよりも遅い！
一番下までスクロールしないと表示されません。
HTMLのソースコードの記載の順番に画像が表示されることが原因だそうです。
サイドバーの画像を除外
サイドバーの画像（#sub-content img）を除外することで、表示することができるそうです。※()の中はテンプレートによって変わると思います。Bloggerだと一緒なのかな？
コピーしたJavaScriptの修正
[修正前]$("img").lazyload({[修正後]
$("img").not("#sub-content img").lazyload({できました！
しかし、どうすればPageSpeed Insightsの結果はよくなるのかわかりません。
0 件のコメント:
コメントを投稿