Cara Menunda Pemuatan Gambar Sebelum Scroll Halaman

Salah satu faktor yang menyumbang beban loading pada suatu blog adalah konten gambar, di sini Arlina Code akan memberikan tips tentang bagaimana Cara Menunda Pemuatan Gambar Sebelum Scroll Halaman.

Menunda Pemuatan Gambar Sebelum Scroll Halaman di sini adalah saat memuat sebuah halaman gambar tidak akan dimuat sampai kita scroll halaman dan itu akan menambah kecepatan blog. Proses seperti ini pernah saya bagikan juga di sini Cara Meningkatkan Loading Blog dengan LazySizes.

Cara Menunda Pemuatan Gambar Sebelum Scroll Halaman

Pertama, buka Blogger > Klik menu Tema > Klik Edit HTML > Kemudian cari dan tambahkan kode di bawah ini sebelum </body>

Kode 1

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

Bagi sobat yang sudah terlanjur menambahkan kode Lazysizes, cukup ganti kode tersebut dengan versi ini

Kode 2

<script>
//<![CDATA[
// Lazysizes
var lazysizer=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazysizer||0!=document.body.scrollTop&&!1===lazysizer)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/lazysarline.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazysizer=!0)},!0);
//]]>
</script>

Pilih salah satu kode di atas

Penerapannya hampir sama seperti pada postingan tentang Lazysizes, sobat hanya perlu mencari semua img di dalam tema. Kode akan terlihat seperti ini :

<img...

Contohnya :

<img src='//www.blogger.com/img/icon_delete13.gif'/>

Tambahkan class='lazy' untuk Kode 1 dan class='lazyload' untuk Kode 2 pada markup tersebut seperti ini :

<img class='lazy' data-src='//www.blogger.com/img/icon_delete13.gif' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Ganti src menjadi data-src dan tambahkan src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' setelah data-src

Atau contoh ini :

<img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 280, &quot;300:200&quot;)' height='186' width='280'/>

Jadi seperti ini :

<img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 280, &quot;300:200&quot;)' height='186' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' width='280'/>

Lakukan cara di atas pada semua markup img pada tema. Bagaimana jika di dalam markup img tersebut sudah terdapat class? Maka sobat hanya perlu menambahkan lazy atau lazyload setelah class pertama, contohnya :

<img class='blogger lazy' data-src='//www.blogger.com/img/icon_delete13.gif' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Setelah selesai, simpan tema dan lihat hasilnya di blog sobat.

Result

Selanjutnya untuk meningkatkan bagian Expires headers yang bisa sobat cek di GTmetrix sobat perlu mengganti s1600 dan s640 pada link gambar di dalam Editor postingan. Contohnya seperti ini :

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDUDH6mHGUz7ezNRgbMukeIoNcEeVuZ_UuI8WWbQweDJK5Z185vUc-7pNDxTupd6H34XYK5q0ZX_GLlU9wWZPhfveGA0eY7ZWDvF0cH7wHApex_JxSB3aRWBXuBshrYqPewDWXVWgahZ3j/s1600/Cara%2BMemasang%2BWidget%2BNewsletter%2Bdi%2BBlogger.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memasang Widget Newsletter di Blogger" class="lazyload" style="border: none;" data-original-height="800" data-original-width="1200" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDUDH6mHGUz7ezNRgbMukeIoNcEeVuZ_UuI8WWbQweDJK5Z185vUc-7pNDxTupd6H34XYK5q0ZX_GLlU9wWZPhfveGA0eY7ZWDvF0cH7wHApex_JxSB3aRWBXuBshrYqPewDWXVWgahZ3j/s640/Cara%2BMemasang%2BWidget%2BNewsletter%2Bdi%2BBlogger.png" title="Cara Memasang Widget Newsletter di Blogger" width="640" /></a></div>

Tambahkan -rw di setiap gambar postingan

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDUDH6mHGUz7ezNRgbMukeIoNcEeVuZ_UuI8WWbQweDJK5Z185vUc-7pNDxTupd6H34XYK5q0ZX_GLlU9wWZPhfveGA0eY7ZWDvF0cH7wHApex_JxSB3aRWBXuBshrYqPewDWXVWgahZ3j/s1600-rw/Cara%2BMemasang%2BWidget%2BNewsletter%2Bdi%2BBlogger.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memasang Widget Newsletter di Blogger" class="lazyload" style="border: none;" data-original-height="800" data-original-width="1200" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDUDH6mHGUz7ezNRgbMukeIoNcEeVuZ_UuI8WWbQweDJK5Z185vUc-7pNDxTupd6H34XYK5q0ZX_GLlU9wWZPhfveGA0eY7ZWDvF0cH7wHApex_JxSB3aRWBXuBshrYqPewDWXVWgahZ3j/s640-rw/Cara%2BMemasang%2BWidget%2BNewsletter%2Bdi%2BBlogger.png" title="Cara Memasang Widget Newsletter di Blogger" width="640" /></a></div>

Perlu diketahui, jika sobat sudah menambahkan -rw di setiap gambar postingan. Gambar tersebut tidak akan terbaca oleh widget pihak ke tiga seperti widget Recent Post, Random Post, dll. Kecuali sobat menyesuaikan kembali kode third party tersebut dengan format gambar yang baru.