Blog atau website yang ringan dapat memberikan point yang lebih untuk mempertahankan para pengunjung di blog Anda, jadi saya akan memberikan tutorial untuk meringankan/mempercepat loading blog dengan lazyload pure javascript. Tuttorial ini dapat juga untuk mengatasi image atau thumbnail blog/website yang berat. Tutorial ini saya dapatkan dari blog Mastamvan.

Ada berbagai macam cara untuk meringankan loading blog, di antarnya adalah dengan mengkompress salah satu komponen dari blog/website (CSS, Image, HTML). Untuk mengetes seberapa cepat loading blog Anda, Anda bisa mengetesnya di Google PageSpeed Insights atau Gtmetrix dengan lazyload image pure Javascript.

Cara Efektif Mempercepat Loading Dengan Lazyload


Tips yang saya berikan ini dapat juga mengatasi leverage browser caching image di Google PageSpeed Insights, jadi tutorial ini sangat berpengaruh untuk meringankan loading Anda, apalagi score Anda menjadi lebih meningkat dan akan di pandang dengan blog Fast Loading.


  • Login ke Blogger
  • Lalu ke Template > Edit HTML. Dan silakan Anda cari kode </body>
  • Jika sudah Copy dan Paste kode Javascript dibawah ini tepat di atasnya.
<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://rawgit.com/mastamvan/backup/master/lazyload.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

//]]>

</script>
  • Selanjutnya Anda cari gambar yang ingin di defer menggunakan lazyload
Silakan Anda tambahkan beberapa komponen untuk mengaktifkan kode ini yakni menambahkan class='lazy' pada tag thumbnail Anda, lalu tambahkan

data- pada tag src.

Jika Anda sudah memiliki tag class='', silakan Anda tambahkan saja lazy, contoh penerapannya

<img class='lazy thumbnail'...>

Contoh penerapan data- pada scr

<img class="lazy" data-src="..." />

<img class="lazy" expr:data-src="..." />

Contoh full tag pada image yang sudah valid lazyload

<img class='lazy' expr:alt='data:title' expr:data-src='data:sourceUrl' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:title='data:title' expr:width='data:width' style='display: block'/>
  • Silakan Save Template Anda.
Jika mengalami kendala silakan berkomentar dibawah. Terimakasih telah berkunjung, semoga bermanfaat.