Tips Mempercepat Loading Blog Dengan Lazy Load
Apakah Anda sudah tahu apa itu jquery Lazy Load ?. Apakah Lazy Load Script sudah dipasang pada template Blogger Anda ?.Jika belum, jangan khawatir kami akan berbagi tips meningkatkan kecepatan loading situs web atau halaman blog Anda dengan Lazy Load.
Ketika Anda menginstal Lazy Load dalam templat blog Anda, kecepatan loading blog Anda umumnya dijanjikan akan meningkat secara signifikan.
Hanya saja berdasarkan pengalaman Admin, memang tidak semua templat cocok dipasang kode skrip ini. Ada templat-templat jenis tertentu seperti Magazine style, yang tidak membuat pengaruh apapun pada kecepatan loading blog meskipun sudah dipasang Lazy Load.
Selain itu, masih ada banyak untuk cara untuk membuat blog Anda menjadi lebih cepat misalnya mengkompresi HTML atau image, menghapus kode skrip yang tidak berfungsi, membuang widget-widget yang tidak berguna, dll.
Yang jelas Anda boleh saja memasang kode skrip ini dan kemudian silahkan cek hasilnya di PageSpeeds Insights. Syukur-syukur hasilnya memuaskan dalam arti kecepatan loadingnya meningkat secara signifikan.
Pada dasarnya Lazy Load direkomendasikan jika situs Web atau blog Anda memiliki terlalu banyak gambar atau grafis dalam setiap postingannya. Apalagi jika gambar yang Anda unggah kedalam postingan tidak di kompresi terlebih dahulu. Hal ini tentu saja membuat beban loading situs Web atau Blog Anda menjadi berat. Anda dapat mengkompresi gambar sebelum diungggah dengan memggunakan aplikasi JPEG Optimizer.
Cara kerja Lazy Load adalah dengan menunda pemuatan gambar sampai seluruh halaman selesai di render. Dampak paling jelas dari Lazy Load adalah ketika gambar-gambar yang Anda muat di postingan baru akan muncul begitu halaman artikel Anda scroll kebawah. Sedangkan post thumbnail di Home Page / Beranda muncul paling belakangan.
Bagaimanapun, pemasangan Jquery Lazy Load Script ini dalam templat hanyalah salah satu dari banyak trik untuk meningkatkan kecepatan loading blog dan layak untuk dicoba.
Langkah instalasi :
Langkah 1. Masuk ke akun Blogger Anda dan Buka Dashboard Blogger Anda.
Langkah 2. Buka Template => Edit HTML.
Langkah 3. Selanjutnya cari tag penutup </ body>. Kemudian Copy dan Pastekan kode skript Lazy Load ini sebelum / diatas tag </ body>.
Berikut, inilah kode skrip nya :
<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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJS0Nc-TGi0K8E2tnSrQPdYFW-SH60I78t7Z3INfnaiu-KAQVReY6amBFHnyJzhGeBtWj11gNPP8VXHS8rZSACi2H75eqEMWjZUqzOO_KA_PUDpFiGvftBwFS0mycRoEpc2MjSBp50xw/s1600/bloggersstand.gif",effect:"fadeIn",threshold:"-50"})});//]]></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/AVvXsEiUJS0Nc-TGi0K8E2tnSrQPdYFW-SH60I78t7Z3INfnaiu-KAQVReY6amBFHnyJzhGeBtWj11gNPP8VXHS8rZSACi2H75eqEMWjZUqzOO_KA_PUDpFiGvftBwFS0mycRoEpc2MjSBp50xw/s1600/bloggersstand.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>
Selamat mencoba dan Happy Blogging !.
Source Code : http://www.bloggersstand.com/2016/02/javascript-to-increase-website-loading-speed.html
test juga
BalasHapus