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, "300:200")' height='186' width='280'/>
Jadi seperti ini :
<img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 280, "300:200")' 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.
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.
Oke, demikian dari Arlina Code tentang Cara Menunda Pemuatan Gambar Sebelum Scroll Halaman. Semoga bermanfaat dan wassalam.
Post a Comment