Meringankan Loading Blog Dengan Lazyload

Halo Sobat blog kita, di kesempatan kali ini admin mau berbagi artikel berjudul Meringankan Loading Blog Dengan Lazyload, kami sudah membuat artikel dengan baik, yang berkualitas dan bermanfaat untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan tentang android, Blogger, Javascript, Tips Blog, Tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

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'/>