Sudah banyak sekali cara mempercepat loading blog dengan lazy load. Namun, mayoritas panduan mempercepat loading blog tersebut untuk wordpress.
Sejatinya seorang blogger yang sangat senang membuat pengunjung blog nya merasa terpuaskan adalah dengan loading blog yang sangat cepat, banyak sekali keuntungan yang didapat oleh blogger dengan 1 hal tersebut.
Berikut Keuntungannya yang didapat pada Tips Ngeblog untuk Pemula kali ini. Yuk kita pelajari teknik dan tutorial cara mempercepat loading blog di blogspot dan wordpress ini.
Jangan Terlalu Fokus Untuk Memiliki Blog Yang Bagus, Namun Fokuslah Untuk Membuat Konten Berkualitas yang disukai pengunjung dan bermanfaat untuk orang lain.
Keuntungan dan Manfaat Memiliki Loading Blog yang Cepat
Sebenarnya, manfaat mempunyai blog dengan loading yang cepat sangatlah banyak. Tapi, beberapa manfaat yang memiliki potensi besar untuk kemajuan blog diantaranya, yaitu:
- Membantu meningkatkan kualitas SEO Onpage Blog.
- Meningkatkan trafik pengunjung blog.
- Blog semakin disukai oleh pengunjung.
- Membuat blog terindex lebih cepat di search engine google.
Nah itulah manfaat dari Tips Blogging untuk anak sekolah dan mahasiswa yang satu ini. Okelah kita langsung ke inti Tips nya, Jadi Cara Membuat Loading Blog Menjadi Sangat Cepat itu banyak sekali Tutorial nya.
Cara Mempercepat Loading Blog dengan Lazy Load di Blogspot
cara mempercepat loading blog dengan lazy load terbaruDiataranya adalah Memperkecil Ukuran Gambar Pada Postingan, Mengkompres CSS, Javascript Dan HTML, Merubah Format Gambar Menjadi Base 64 dan Masih Banyak lagi. Disini saya akan memberi 1 Cara Mempercepat Loading Blog dengan Lazy Load Plugin yang Ampuh dan sebenarnya adalah Milik WordPress.
Namun para pengguna Blogspot atau Blogger bisa menggunakan Plugin Tersebut Dalam Bentuk Script Jquery nya yang tidak akan membuat blog anda menjadi Erorr atau Rusak tapi malah Membuat Loading Blog anda menjadi sangat cepat!
Baik kita langung masuk ke Langkah-Langkah Pemasangan Plugin Jquery Lazy Load di Blog, ditambah lagi jika blog tersebut sudah mengalihkan http ke https yang biasa juga disebut dengan menggunakan ssl certificate.
Tutorial Memasang Javascript Lazy Load di Blogger
- Silahkan anda Login Ke Blogger.com
- Pada Dashboad Blogger ➔ Pilih Template ➔ Edit HTML
- Cari Kode </body> untuk memudahkan silahkan Menggunakan CTRL+F.
- Letakkan Kode Javascipt Lazy Load dibawah Tepat Diatas Kode </body>.
- Jika Sudah Dipasang, Simpan Template ➔ Refresh Halaman Dashboard Blogger.
Lihat Hasilnya Loading Blog Anda Menjadi Sangat Cepat.
<script type="text/javascript">
//<![CDATA[
//Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);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://1.bp.blogspot.com/-Qg5bi1ZtDdM/VZ5nHAyYBqI/AAAAAAAAChE/exGnasO4oyk/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
Itulah Tips Blogging Tentang Cara Mempercepat Loading Blog dengan Lazy Load yang Menurut Saya sederhana namun Efeknya Sangat Mantap dan mempunyai Keuntungan yang bagus untuk kemajuan blog anda. Terimakasih dan Semoga bermanfaat ya tutorial cara mempercepat loading blog dengan script lazy load ini.