Cara Menambahkan Script Lazy Loading Theme Blogger

Hari ini saya coba cek theme sendiri yang dibangun dengan bootstrap. Tool yang digunakan seperti biasa menggunakan PageSpeed Insight. Dan hasilnya ada beberapa kekurangan yang harus diperbaiki. Diantaranya adalah "defer offscreen images" yang terkait pemuatan gambar.

Kemudian disebutkan di sana bagaimana solusi untuk masalah tersebut. Silahkan kunjungi literatur tersebut bagi yang ingin penjelasan secara rinci. Namun bagi teman-teman yang ingin membaca pengalaman saya di sini tidak mengapa. Karena tulisan ini berusaha merangkumnya dengan bahasa yang berbeda.

Dan sependek pengetahuan saya terkait solusi ini terdapat dua pilihan. Apakah akan menggunakan script yang memanggil pustaka jquery ataukah tidak. Berikut ini bahasan kita tentang cara menambahkan script lazy loading untuk theme blogger.

Cara Menambahkan Script Lazy Loading Theme Blogger

Sikap malas terhadap sesuatu terkadang "menguntungkan". Sikap ini memang tidak baik namun tidak pada beberapa keadaan. Saya sendiri pernah mengalami sesuatu yang tidak terduga. Ceritanya waktu itu bekerja sebagai operator gas proses di perusahaan. 

Suatu ketika terjadi kerusakan pada salah satu mesin. Teknisi sudah bekerja keras hingga menjelang maghrib. Selesai istirahat semua bergegas untuk kembali ke tempat kerja. Kecuali saya pribadi yang ogah-ogahan dan berjalan di belakang.

Karena saya datang sedikit terlambat ke area sekitar mesin. Atasan saya inisiatif menyalakan mesin sendiri. Namun saat menekan tombol power malah terjadi ledakan. Untung semua selamat setelah teman yang terkena ledakan api dibawa ke RS terdekat.

Berkaca dari pengalaman tersebut ada pelajaran yang bisa dipetik. Termasuk didalamnya ketika membahas script lazy loading. Benar, pemuatan gambar yang lazy ini termasuk menguntungkan. Karena gambar terlalu banyak memakan bandwith dibandingkan yang lainnya.

Berikut ini tahapannya agar script lazy loading bisa terpasang pada theme blogger. Ini wajib diketahui lho bagi teman-teman yang sedang membuat theme sendiri.

1. Login ke dashboard Blogger.

2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".

3. Tekan Ctrl + F dan masukan kode ini </body> kemudian tekan enter.

4. Setelah itu paste kode di bawah ini di atas tag </body>. Baris kode dengan memanfaatkan jQuery di bawah ini saya dapat dari techleaf.in

<script> //<;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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMqtYJoIIzxCUUxbgqyg-Xo_KJSEHBq483XyvTGJ-PIvYRzcit1rxmmXzG4jMf6JlBeZmbPydxc_c9bT4NjKnVomQwlK7QhyWfsqgdFWRJKZBSN6HVIFi8jxUZ1wylGEeDkt-YkBKewSGh/s1600/sun.gif",effect:"fadeIn",threshold:"-50"})}); //]]> </script> <script defer src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

5. Alternatif lainnya bisa menggunakan kode di bawah ini jika tidak tertarik dengan jquery. Baris kode di bawah ini merupakan native lazy loading dari web.dev. 

<script> if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll('img[loading="lazy"]'); images.forEach(img => { img.src = img.dataset.src; }); } else { // Dynamically import the LazySizes library const script = document.createElement('script'); script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js'; document.body.appendChild(script); } </script>

6. Klik icon "Simpan" yang terletak pada bagian paling pojok kanan atas.

7. Hasil bisa dilihat seperti pada link yang sama dengan tutorial ini.

Demo

Kesimpulan

Script lazy loading tidak berarti membuat malas loading sebuah blog. Melainkan pemuatan gambar saja yang terkena script lazy. Bahkan efek dari hal tersebut malah semakin mempercepat loading blog. Sebagaimana teman-teman uji sendiri dengan tool pagespeed. 

Silahkan pastikan setelah pemasangan script lazy loading. Maka nilai performance akan naik dan tidak lagi disertai notifikasi error.

Jadi inget ya, sikap malas pada tempatnya bisa menguntungkan tuh. Termasuk teman-teman blogger yang masih muda nih. Jika merasa malas kalau lulus sekolah nanti bekerja dengan mengucurkan keringat. Maka sudah selayaknya sedari sekarang mempersiapkan diri dengan berbagai keterampilan.

Semoga bermanfaat.

Ralat:

Beberapa jam kemudian setelah memasang script lazy loading kembali uji coba dengan pagespeed. Ternyata, kode yang pertama menghasilkan 3 (tiga) error, yaitu:"Uses deprecated APIs, Browser errors were logged to the console dan Includes front-end JavaScript libraries with known security vulnerabilities.

Sedangkan kode yang kedua menghasilkan 1 (satu) error saja, yaitu: penggunaan API yang sudah usang yang kemungkinan akan dihapus karena sudah tidak digunakan lagi. Oleh karena itu saya harus mencari script terbaru yang lebih aman.

Dan akhirnya saya menemukan kode yang lumayan cocok. Mengapa dikatakan lumayan? Karena untuk desktop tidak ada notifikasi dari pagespeed tentang: "Defer offscreen images". Hanya pada tes pengujian versi mobile masih ada. Dan ini baris kode script lazy loading yang saya dapat dari github. 

<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', "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); 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>

Buat teman-teman sekalian silahkan coba sendiri satu per satu. Kemudian tes dengan pagespeed insight untuk membuktikan. Untuk saat ini, baris kode lazy loading script di atas yang saya sarankan. Dan ini juga digunakan pada theme utama saya saat ini.

Selamat mencoba.

Baca Juga