Cara Percepat Loading Blog Dengan Lazy Load Image
Kecepatan loading sebuah website merupakan salah satu syarat penting bagi blog agar muncul di page one google atau mesin pencari lainnya.
Bagi kamu yang memiliki sebuah blog dan ingin mengurangi boucerate blog karena alasan blog kamu lemot dan lama di buka.
Hal ini lah yang kadang bisa membuat artikel kamu susah bersaing di mesin pencari.
Loading blog yang cepat merupakan salah satu sarat SEO bagi sebuah blog agar mudah tampil di halaman depan mesin pencari.
Dan kecepatan loading blog juga merupakan salah satu indikasi dari google agar blog kamu gampang di temukan di mesin pencari.
Google sendiri tidak akan menampilkan sebuah blog jika blog tersebut susah di buka oleh pengunjung.
Baca Juga
Cara Pasang Script Lazy Load AdSense agar Loading Iklan Lebih Cepat
Gambar bikin blog kamu lambat
Dan salah satu hal yang membuat blog kamu susah di buka adalah ukuran gambar yang cukup besar.
Oleh karena itu banyak pakar SEO menyarankan untuk menggunakan gambar dengan ukuran yang wajar.
Bukan gambar HD dengan ukuran file yang sangat besar.
Hal ini selain membuat blog kamu saat di buka cukup lambat sehingga menyebabkan google menyangka blog kamu rusak dan tidak bisa di buka.
Karena kasus ini blog kamu jadi tidak bisa bersaing walau isi dari blog kamu bagus dan enak untuk di baca.
Saya juga tidak menyarankan kamu untuk tidak memasukkan image di artikel blog kamu.
Gambar juga bisa menambah kenyamanan pengunjung untuk betah berlama-lama membaca tulisan yang sudah kamu buat.
Namun sudah ada cara untuk mengatasi loading blog lama karena kamu memasukkan banyak gambar di artikel yang kamu tulis.
Salah satu caranya adalah dengan menggunakan script Lazy load image.
Kegunaan lazyload image
Gambar sendiri memang sebuah kebutuhan agar artikel yang kamu tulis enak di lihat dan bisa juga membuat para pengunjung berlama-lama saat membaca artikel kamu.
Namun sebuah gambar dengan ukuran yang cukup besar bisa membuat blog kamu lemot sehingga para pengunjung menekan tombol back yang ada di browser.
Dengan menekan tombol back, maka blog kamu akan mendapatkan boucerate yang tinggi dan bisa berdampak di SEO yang membuat google ogah menampilkan artikel yang kamu buat.
Untuk itu Lazyload memiliki kegunaan untuk membuat blog kamu memiliki speed loading yang cukup cepat.
Karena gambar tidak akan tampil jika pengunjung tidak scroll ke bawah hingga pada bagian kamu menempatkan gambar.
Sehingga blog kamu akan terbuka lebih cepat ketimbang kamu tidak menggunakan script lazy load image di blog kamu.
Cara Pasang Script Lazy Load Image Di blogspot
Bagi kamu pengguna blogspot kamu bisa mengikuti langkah-langkah yang akan newbie berikan kali ini
Masukkan menu theme, lalu pilih edit html
Cari kota HTML </body>
Letakkan script lazyload image di bawah ini tepat di atas </body>
<script type='text/javascript'>Tekan simpan
//<![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:"https://www.spruko.com/demo/pinlist/demo/img/loader.svg",effect:"fadeIn",threshold:"-50"})});
//]]></script>
Lalu silahkan akses blog kamu untuk mengecek apakah script lazyload berjalan dengan baik.
Baca Juga
1001 Cara Menghasilkan Uang Gratis Tanpa Modal Dari Internet Untuk Pemula
Plugin lazy load wordpress
Bagi pengguna wordpress, kamu bisa dengan lebih mudah menerapkan script lazy load kamu cukup install plugin lazy load dan blog kamu akan secara otomatis terdapat fitur lazy load
Kamu bisa menggunakan salah satu plugin lazy load di bawah ini
- A3 Lazy Load
- WP Rocket
- BJ Lazy Load
- Dll
Nah di atas merupakan informasi mengenai apa itu lazy load dan juga kegunaan dari script lazy load untuk website dan cara menerapkan script lazy load di website.
Kamu bisa menerapkan script lazy load untuk mendapatkan performa terbaik dari blog dan juga website kamu.
Sekian dulu tutorial newbie kali ini dengan judul Cara Percepat Loading Blog Dengan Lazy Load Image.
0 Response to "Cara Percepat Loading Blog Dengan Lazy Load Image"
Post a Comment
Jangan lupa komentar ya