Selain iklan (bagi yang memasang iklan), elemen lain dalam blog yang seringkali menjadi penghambat laju pemuatan halaman saat diakses sehingga kecepatan blog menjadi lambat adalah elemen gambar. Selain dengan rasa, kita bisa mengetahui hal itu misalnya dengan mengukur kecepatan blog menggunakan tool-tool penganalisa kecepatan web seperti gtmetrix dan semacamnya. Hasilnya, gambar pun menjadi salah satu yang cukup berpengaruh dalam persoalan loading.
Bagi anda yang banyak menggunakan gambar sebagai ilustrasi dalam postingan blog, tentunya hal ini menjadi problem serius yang harus segera ditangani agar tidak berdampak buruk bagi blog. Betapa tidak, Google sendiri sejak tahun 2010 telah memasukkan kecepatan website sebagai salah satu indikator penilaian untuk SEO. Artinya, blog anda bisa jadi akan semakin susah ditemukan oleh pengunjung jika loading blog anda lemot dan lama saat diakses.
Untuk mengatasi hal tersebut, cara yang paling tepat yaitu dengan mengatur kembali pengelolaan gambar pada blog dengan lebih efisien secukupnya saja. Kita bisa mengurangi jumlah gambar atau juga memperkecil ukuran gambar dengan cara mengkompresnya agar gambar menjadi lebih cepat saat dimuat. Jika hal itu sudah anda lakukan, cara lainnya yaitu gunakan lazy load image agar loading blog anda semakin cepat.
Lazy load adalah kode javascript yang berfungsi untuk mempercepat loading blog dengan cara menunda penampilan gambar atau iklan yang ada di sebuah situs. Dengan menerapkan trik ini, maka blog akan lebih cepat saat loading awal karena tidak merender semua gambar atau iklan yang ada. Gambar atau iklan baru akan muncul setelah kita menggulir halaman hingga sampai pada tempat di mana elemen tersebut berada.
Pada artikel terdahulu, pernah saya ulas mengenai cara pemasangan lazy load pada blog untuk iklan adsense (baca: Memasang Lazy Load Adsense Agar Loading Blog Menjadi Cepat). Nah, pada kesempatan kali ini, akan saya bahas tentang cara pemasangan lazy load untuk versi gambar (image). Bagaimana caranya?, simak tutorial di bawah ini.
Cara Memasang Lazy Load Image Agar Loading Blog Makin Cepat
1. Buka akun blogger anda.
2. Pilih thema dan klik edit html.
3. Cari kode </body> kemudian letakkan kode berikut ini di atasnya.
<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://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
4. Simpan kembali template anda.
Silahkan anda bisa mengetesnya untuk melihat hasilnya. Kalau tampilan gambar menjadi muncul belakangan dengan indahnya ketika halaman digulir ke bawah, maka script di atas berarti telah bekerja dengan baik seperti yang diharapkan. Anda juga bisa mengecek kembali kecepatan blog anda menggunakan gtmetrix untuk melihat perbedaannya. Skornya pun menjadi lebih baik bukan!. Demikian. Semoga bermanfaat.