Cara Memasang Script Lazy Load Image Di Blog Untuk Mempercepat Loading Blog
Cara Memasang Script Lazy Load Image Di Blog Untuk Defer Image Loading Blog Jadi Lebih Cepat - Lazyload ini memiliki peran yang sangat penting bagi sebuah blog agar kualitas blog tetap terjaga. Bayangin aja, 75% pengunjung blog akan kabur jika loading blog atau website melebihi dari tiga detik. Bukan cuma itu aja, sekarang Google juga lebih mengutamakan blog dan website yang memiliki loading cepat dari pada blog dengan loading lambat agar muncul di hasil penelusuran Google.
Gak heran kenapa fitur ini wajib banget dipasang di setiap blog dan website. Selain meningkatkan page rank, dengan lazyload juga bisa membuat para pengunjung nyaman saat mengakses blog kamu. Kamu bisa bandingkan antara blog yang sudah terpasang fitur lazyload image dengan sebelum memasang lazyload. Bagi kamu yang belum tahu dan belum paham fungsi dari lazyload ini, bisa kamu baca penjelasan dibawah ini.
Apa Sih Script Lazyload Image Itu?
Script lazyload itu adalah script yang akan menunda pemuatan file dalam sebuah halaman blog atau website hingga ada aktifitas tertentu yaitu dengan melakukan scroll halaman tersebut ke atas atau ke bawah. Kalau masih belum paham juga, langsung aja cek cuplikan vidio dibawah.
Di artikel kali ini saya akan memberikan tutorial cara memasang lazyload ini diblog agar loading blog lebih cepat dari sebelumnya. Yah walaupun tutorial ini udah banyak banget yang bahas di Google. Tapi gak ada salahnya saya buatkan kembali tutorial ini. Ya itung-itung nambah jumlah postingan diblog ini.
Cara Memasang Script Lazyload Image Diblog Agar Loading Blog Lebih Cepat
- Buka dulu dashboard blogger kamu kemudian masuk ke menu Theme ➤ Edit HTML.
- Taruh CSS dibawah ini diatas ]]></b:skin> atau </style> juga bisa.
.lazyload,
.lazyloading {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: opacity 300ms;
} - Tambahkan script lazy load dibawah ini tepat sebelum atau diatas tag penutup </body>
<script>
//<![CDATA[
// LazyLoad
function loadScript(d){var o=document.createElement("script");o.src=d,document.body.appendChild(o)}function downloadJSAtOnload(){loadScript("https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/lazyarlinas.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script> - Setelah itu cari tag kondisional gambar <img... yang ada di template kamu. Ada beberapa tag image seperti ini di template kamu. Kamu bisa ubah semuanya. Contohnya seperti ini :
<img expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 225, "225:170")'/> - Lalu tambahkan class='lazy' setelah img.
- Ganti expr:src menjadi expr:data-src
- Tambahkan src dan value-nya sebelum tag penutup img tadi. Hasilnya akan seperti dibawah ini.
<img class='lazy' expr:alt='data:post.title' expr:title='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 225, "225:170")' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' width='280'/>
Kamu bisa ganti animasi loading-nya dengan gambar atau gif pilihan kamu. Tapi saran saya samakan saja dengan setelan default diatas.
- Setelah itu klik simpan dan lihat hasilnya.
Kamu bisa pasang lazyload ini di semua halaman atau postingan yang memuat gambar. Bisa di header blog, thumbnail related post atau yang lainnya. Jadi gak cuma di thumbnail homepage aja. Untuk hasilnya bisa kamu lihat langsung disini. Dan untuk hasil di GTmetrix setelah memasang script lazyload bisa kamu lihat pada gambar dibawah ini :
Kalau kamu buka dan lihat, pasti gambar thumbnail yang ada di blog bakalan nge-bleng gak ada gambarnya. Karena seperti yang sudah saya jelaskan diatas. Gambar yang di pasang script lazyload ini tidak akan terlihat sampai ada aktifitas scroll di halaman tersebut.
Mungkin cukup sekian dulu tutorial cara memasang script lazyload gambar diblog untuk mempercepat loading blog yang bisa saya bahas di artikel ini. Kalau masih bingung atau mengalami masalah saat penerapan script lazyload ini, tanyakan langsung di kolom komentar
Baca Juga
Posting Komentar
Posting Komentar