Script Lazy Load Untuk Blogger

Apa itu Lazy loading?

Lazy loading adalah cara untuk mengidentifikasi sumber daya sebagai non-blocking (non-critical) dan memuatnya hanya saat dibutuhkan. Ini adalah cara untuk mempersingkat panjang jalur rendering yang penting, yang berarti mengurangi waktu muat halaman.

Pemuatan lambat dapat terjadi pada saat yang berbeda dalam aplikasi, tetapi biasanya terjadi pada beberapa interaksi pengguna seperti pengguliran dan navigasi.

Dibawah ini script untuk Lazy Load yang bisa diterapkan pada template Blogger. silahkan letakan di akhir HTML, di atas kode </body>

<script type=”text/javascript”>
//<![CDATA[
!function(t,e){“object”==typeof exports?module.exports=e(t):”function”==typeof define&&define.amd?define([],e(t)):t.LazyLoad=e(t)}(“undefined”!=typeof global?global:this.window||this.global,function(t){“use strict”;const e={src:”data-src”,srcset:”data-srcset”,selector:”.lazyload”},r=function(){let t={},e=!1,s=0,o=arguments.length;”[object Boolean]”===Object.prototype.toString.call(arguments[0])&&(e=arguments[0],s++);let n=function(s){for(let o in s)Object.prototype.hasOwnProperty.call(s,o)&&(e&&”[object Object]”===Object.prototype.toString.call(s[o])?t[o]=r(!0,t[o],s[o]):t[o]=s[o])};for(;s<o;s++){n(arguments[s])}return t};function s(t,s){this.settings=r(e,s||{}),this.images=t||document.querySelectorAll(this.settings.selector),this.observer=null,this.init()}if(s.prototype={init:function(){if(!t.IntersectionObserver)return void this.loadImages();let e=this;this.observer=new IntersectionObserver(function(t){t.forEach(function(t){if(t.intersectionRatio>0){e.observer.unobserve(t.target);let r=t.target.getAttribute(e.settings.src),s=t.target.getAttribute(e.settings.srcset);”img”===t.target.tagName.toLowerCase()?(r&&(t.target.src=r),s&&(t.target.srcset=s)):t.target.style.backgroundImage=”url(“+r+”)”}})},{root:null,rootMargin:”0px”,threshold:[0]}),Array.prototype.forEach.call(this.images,function(t){e.observer.observe(t)})},loadAndDestroy:function(){this.settings&&(this.loadImages(),this.destroy())},loadImages:function(){if(!this.settings)return;let t=this;Array.prototype.forEach.call(this.images,function(e){let r=e.getAttribute(t.settings.src),s=e.getAttribute(t.settings.srcset);”img”===e.tagName.toLowerCase()?(r&&(e.src=r),s&&(e.srcset=s)):e.style.backgroundImage=”url(“+r+”)”})},destroy:function(){this.settings&&(this.observer.disconnect(),this.settings=null)}},t.lazyload=function(t,e){return new s(t,e)},t.jQuery){const e=t.jQuery;e.fn.lazyload=function(t){return(t=t||{}).attribute=t.attribute||”data-src”,new s(e.makeArray(this),t),this}}return s}); $(‘img’).addClass(‘lazyload’); $(“img”).each(function() { var $this = $(this), src = $this.attr(“src”); $this.attr( “data-src”, src ); $this.removeAttr(“src”); }); $(‘img’).attr(‘src’, “”); window.addEventListener(“scroll”, function(event) { lazyload(); }); $(window).on(‘load’, function () { $(‘img’).each(function () { if (lazyload(this)) { $(this).attr(‘src’, $(this).data(‘src’)).removeAttr(‘data-src’); } }); });
//]]>
</script>

Menurut sumber dari developer mozilla Seiring berkembangnya web, peningkatan besar dalam jumlah dan ukuran aset yang dikirim ke pengguna. Antara tahun 2011 dan 2019, bobot sumber daya rata-rata meningkat dari ~100KB menjadi ~400KB untuk desktop dan ~50KB menjadi ~350KB untuk seluler. Sementara ukuran Gambar meningkat dari ~250KB menjadi ~900KB di desktop dan ~100KB menjadi ~850KB di seluler.

Salah satu metode yang dapat dgunakan untuk mengatasi masalah ini adalah dengan mempersingkat panjang Jalur Rendering dengan menggunakan Lazy load.