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 - Lazy load 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 lazy load juga bisa membuat para pengunjung nyaman saat mengakses blog kamu.

Kamu bisa bandingkan antara blog yang sudah terpasang fitur lazy load image dengan sebelum memasang lazy load. Bagi kamu yang belum tahu dan belum paham fungsi dari lazy load ini, bisa kamu baca penjelasan dibawah ini.

Apa Sih Script Lazy Load Image Itu?

Script lazy load 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 lazy load ini di blog 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 hitung-hitung nambah jumlah postingan di blog ini.

Cara Memasang Script Lazy Load Image di Blog 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 lazy load 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 hasil di GTmetrix setelah memasang script lazy load 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 lazy load ini tidak akan terlihat sampai ada aktifitas scroll di halaman tersebut. 

Mungkin cukup sekian dulu tutorial cara memasang script lazy load gambar diblog untuk mempercepat loading blog yang bisa saya bahas di artikel ini. Kalau masih bingung atau mengalami masalah saat penerapan script lazy load ini, tanyakan langsung di kolom komentar

Share :