1# Cara Mempercepat Loading blog Menggunakan Lazy Load

Cara Memasang lazy load di blog | Pada kesempatan kali ini saya akan berbagi tutorial cara untuk mempercepat loading blog dengan cara menggunakan lazy load.

Bagi sobat yang belum mengetahui apa itu lazy load?

Lazy Load adalah sebuah istilah script yang bekerja untuk menunda loading suatu element pada sebuah blog hingga halaman tersebut discroll atau digulir oleh pengunjung.

Sehingga seluruh element yang diterapkan script lazy laod tidak akan muncul kecuali setelah halaman teresbut digulirkan.

Lazy load ini bisa digunakan pada setiap element yang ada pada suatu blog atau website seperti widget, gambar dan lain sebagainya.


Pada kesempatan kali ini, saya akan berbagi tutorial cara menggunakan lazy load untuk men-delay laoding gambar.

Seperti yang saya katakan diatas lazy load berfungsi untuk menunda atau delay loading suatu element, nah pada kali ini kita akan terapkan lazy load pada gambar.

Setelah mengetahui fungsi secara umum script lazy load...

Sekarang saatnya untuk mengetahui fungsi lazy load terhadap loading blog..

Pada pemabahasan kita kali ini yaitu cara mempercepat loading blog menggunakan script lazy load, dengan script ini sebagian atau seluruh gambar akan kita terapkan script lazy load ini.

Tujuannya agar seluruh gambar pada blog kita akan dimuat hanya ketika halaman digulirkan atau di scroll.

Dan pastinya hal ini akan berpengaruh terhadap loading blog menjadi lebih cepat ketika dimuat, karena gambar akan dimuat setelah seluruh elemen lain selesai dimuat.

Hasil akhir dari menerapkan script lazy laod ini akan mempercepat loading blog di page speed dan GTMetix.

Seberapa penting kecepatan loading pada suatu blog?

Moz.com dalam situs resminya mengatakan bahwa:

Suatu halaman yang lambat dimuat akan berpengaruh terhadap indexing dan perayapan robot google.
selain itu kecepatan laoding blog sangat penting untuk user experience atau pengalaman pengguna saat mengunjungi situ anda.
Suatu halaman bila dimuat lebih lambat akan cenderung memiliki nila bounce rates yang lebih tinggi  average time lebih rendah, pastinya ini tidak baik untuk SEO.
Source: https://moz.com/learn/seo/page-speed

Oleh karena itu kecepatan loading blog itu menurut saya sangat penting,

Nah, lalu bagaimana cara untuk mempercepat loading blog dengan lazy laod?

Langsung saja kita bahas dibawah ini:

1. Back up template sobat, pasti sudah tau tujuannya untuk apa.
2. Selanjutnya silahkan copy acritp lazy load dibawah ini diatas kode </body>

<script type="text/javascript">
//<![CDATA[
//LazyLoad Image
function loadScript(d) {
    var o = document.createElement("script");
    o.src = d, document.body.appendChild(o)
}

function downloadJSAtOnload() {
    loadScript("https://rawcdn.githack.com/aqilmujahidiin/javascript/1d5f0f9f412626d47178e4b7031930d0c9f31897/lazyload")
}
window.addEventListener ? window.addEventListener("load", downloadJSAtOnload, !1) : window.attachEvent ? window.attachEvent("onload", downloadJSAtOnload) : window.onload = downloadJSAtOnload; //]]>
</script>

3. langkah selanjutnya agar script diatas berfungsi sobat harus nemambahkan class='lazy' pada setiap element Img pada blog sobat dan merubah src menjadi data-src atau expr-src menjadi expr:data-src

Lalu bagaimana cara menemukan element atau selector img pada blog sobat?

silahkan cari kode  data:post.thumbnailUrl pada blog sobat dengan menggunakan kombinasi tombol CTRL+F pada keyboard sobat.

Jika kesulitan mencari kode  data:post.thumbnailUrl sobat cari saja kode <img pada template sobat kemudian tambahkan class='lazy' dan rubah expr-src menjadi expr:data-src dan src menjadi data-src


lihat kode dibawah ini yang ada pada template saya:

<div class='img-thumbnail'>
  <b:if cond='data:post.firstImageUrl'>
 <a expr:href='data:post.url'>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title'/>
 </a>
  <b:elseif cond='data:post.thumbnailUrl'/>
 <a expr:href='data:post.url'>
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title'/>
 </a>
  <b:else/>
 <a expr:href='data:post.url'>
<img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKCQkf3d0ji8i_8w0KmZOUj3jxun5nnPQ68mFLHzSYyFDos2pZVOmhMCnp_ZhMJDPtVtwH__0rjz4FKTpHXpJf8-w_b4onoJDSMNOKCP76t71R5_ri_xcXr9de1RfDflbjPo3umxyM3TPV/w420-c-h280/no-image.png'/>
 </a>
  </b:if>
  </div>

Kemudian setelah dirubah akan menjadi seperti gambar dibawah ini:

<div class='img-thumbnail'>
    <b:if cond='data:post.firstImageUrl'>
        <a expr:href='data:post.url'>
<img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title'/>
 </a>
        <b:elseif cond='data:post.thumbnailUrl' />
        <a expr:href='data:post.url'>
<img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title'/>
 </a>
        <b:else/>
        <a expr:href='data:post.url'>
<img class='lazy' expr:alt='data:post.title' expr:title='data:post.title' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKCQkf3d0ji8i_8w0KmZOUj3jxun5nnPQ68mFLHzSYyFDos2pZVOmhMCnp_ZhMJDPtVtwH__0rjz4FKTpHXpJf8-w_b4onoJDSMNOKCP76t71R5_ri_xcXr9de1RfDflbjPo3umxyM3TPV/w420-c-h280/no-image.png'/>
 </a>
    </b:if>
</div>

4. jangan lupa save template sobat kemudian test di pagespeed atau gtmetrix dan lihat hasilnya.



Tutorial ini harus dilakukan dengan teliti ya sob supaya berhasil dan tidak terjadi error.

Demikian tutorial Cara Mempercepat Loading blog Menggunakan Lazy Load yang dapat saya share semoga dapat membantu.

jika masih ada yang kesulitan silahkan tanyakan di kolom komentar ya sob jangan malu-malu nanti saya bantu.