Bagi Anda para pengguna patform Wordpress self hosting pasti sudah tak asing lagi atau setidaknya pernah mendengan plugin yang bernama Lazy Load. Plugin yang dipercaya dan sudah terbukti dapat meningkatkan kecepatan loading halaman website secara signifikan.
Cara kerja plugin ini sendiri cukup sederhana, dimana dia hanya akan me-load gambar, video dan iframe yang berada di areal landing page view atau areal terlihat di awal halaman terbuka. Jadi ketiga element(gambar, video, iframe) yang berada di areal tak terlihat baru akan di load ketika pengguna melakukan scroll halaman.
Metode tersebut ternyata cukup ampuh untuk meningkatkan loading speed halaman website pada wordpress. Peningkatan kecepatan loading halaman dapat kita amati dengan jelas jika kita menggunakan tool pengetest kecepatan loading halaman web seperti GT-Metrix ataupun sejenisnya.
Baca Juga : Cara Membuat Iklan Melayang Disamping Halaman Blog/WordpressNah, kabar gembira untuk Anda para pengguna platform Blogspot karena ternyata ada sebuah script atau kode JQuery yang memiliki kinerja hampir serupa dengan plugin Lazy Load wordpress tersebut. Lalu seperti apa dan bagaimana cara pemasangan script tersebut? Oke, langsung saja simak langkah-langkahnya:
- Pertama masuk ke dashboard blogger Anda, buka edit HTML (Tema >> Edit HTML). Selanjutnya cari kode </body> , agar lebih mudah Anda bisa memanfaatkan tool pencarian (Ctrl+F).
- Selanjutnya copy script/kode Lazy Load di bawah ini, lalu taruh kode tersebut tepat diatas kode </body> .
<script type='text/javascript'>- Terakhir Simpan template.
//<;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/AVvXsEjtO8ljbqInJ-ssgNK14KyQP99J00re-8PV65Rt9sKhidUmGi4u-_9lntY9RXIrJM2-k3rzKovOm-ktxOqmp0msTVG4QWcqd16O-Zk_Qwwu7VrzNrEtBxq_XWowmExuegTMTPae-6l6TAXK/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
Sekarang coba Anda lihat hasilnya dengan melakukan pengujian loading speed test bisa menggunakan GT-Metrix, PageSpeed Insight ataupun sejenisnya.
Itulah salah satu cara untuk meningkatkan kecepatan loading halaman blog dengan mudah menggunakan Script/kode Lazy Load.
Jika ada yang masih kurang jelas langsung saja Anda tanyakan melalui kolom komentar dibawah. Semoga bermanfaat.