Ditulis oleh: Ditulis pada: 5/28/2019
Mengatasi Masalah Defer Offscreen Images Tanpa Jquery Atau Lazy Loading - Salah satu masalah yang mengurangi loading blog adalah berasal dari gambar. Defer offscreen images dan Serve images in next-gen formats menjadi masalah loading blog yang muncul dari gambar.
Sebenarnya untuk mengatasi masalah Defer offscreen images dan Serve images in next-gen formats ini sudah ada solusinya. Namun karena keduanya perlu penanganan khusus dalam menyimpan kode HTML untuk gambar, maka banyak blogger yang mengabaikannya dengan alasan "ribet".
Padahal untuk edit gambar untuk mengikuti kedua cara tadi cukup mudah, namun karena "malas" maka hal tersebut jadi "susah".
Solusi Pertama
Untuk masalah Defer offscreen images ini, kita bisa menggunakan cara dari https://varvy.com/pagespeed/defer-images.html dan untuk masalah Serve images in next-gen formats ini bisa menggunakan cara dari postingan berikut ini.
Jadi jika kedua trik tersebut digabungkan, berikut yang harus dilakukan:
Simpan Javascript berikut di atas </body>
<script>
//<![CDATA[
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
//]]>
</script>Dan untuk menampilkan gambar, gunakan seperti contoh berikut:
<picture>
<source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHXkXS41xxHeQrbp6kJrq1Vh0wuZXTpxi2KKNiRqpD8_yN2Cdp5doxuxv_oU0DT3Ke_ez36LWkb_7FrYyARISmAKM8sjGfDD9hWrJ-72CB9FQ85WiYT-TdVZF9cflV7Lf375AAug0pkxU/-rw/blogger-images2.png" type="image/webp"/>
<source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHXkXS41xxHeQrbp6kJrq1Vh0wuZXTpxi2KKNiRqpD8_yN2Cdp5doxuxv_oU0DT3Ke_ez36LWkb_7FrYyARISmAKM8sjGfDD9hWrJ-72CB9FQ85WiYT-TdVZF9cflV7Lf375AAug0pkxU/s1600/blogger-images2.png" type="image/png"/>
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHXkXS41xxHeQrbp6kJrq1Vh0wuZXTpxi2KKNiRqpD8_yN2Cdp5doxuxv_oU0DT3Ke_ez36LWkb_7FrYyARISmAKM8sjGfDD9hWrJ-72CB9FQ85WiYT-TdVZF9cflV7Lf375AAug0pkxU/s1600/blogger-images2.png" alt="Alt Text!" width="1000" height="600"/>
</picture>Solusi Kedua
Untuk masalah Defer offscreen images ini, saya juga mencoba membuat Javascript sendiri dan berhasil. Dan untuk masalah Serve images in next-gen formats ini juga menggunakan cara yang sama seperti cara pertama, hanya ada sedikit perbedaan yaitu gambar ditambah dengan tag <div class="lazyloadimg"><!-- dan --></div>
Berikut kode Javascript-nya, simpan di atas kode </body>
<script>
//<![CDATA[
function init() {
var x = document.querySelectorAll(".lazyloadimg");
var i;
for (i = 0; i < x.length; i++) {
x[i].innerHTML = x[i].innerHTML.replace('<!--','').replace('-->','');
}
}
window.onload = init;
//]]>
</script>Dan untuk menampilkan setiap gambar, gunakan seperti contoh berikut:
<div class="lazyloadimg"><!--
<picture>
<source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHXkXS41xxHeQrbp6kJrq1Vh0wuZXTpxi2KKNiRqpD8_yN2Cdp5doxuxv_oU0DT3Ke_ez36LWkb_7FrYyARISmAKM8sjGfDD9hWrJ-72CB9FQ85WiYT-TdVZF9cflV7Lf375AAug0pkxU/-rw/blogger-images2.png" type="image/webp"/>
<source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHXkXS41xxHeQrbp6kJrq1Vh0wuZXTpxi2KKNiRqpD8_yN2Cdp5doxuxv_oU0DT3Ke_ez36LWkb_7FrYyARISmAKM8sjGfDD9hWrJ-72CB9FQ85WiYT-TdVZF9cflV7Lf375AAug0pkxU/s1600/blogger-images2.png" type="image/png"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHXkXS41xxHeQrbp6kJrq1Vh0wuZXTpxi2KKNiRqpD8_yN2Cdp5doxuxv_oU0DT3Ke_ez36LWkb_7FrYyARISmAKM8sjGfDD9hWrJ-72CB9FQ85WiYT-TdVZF9cflV7Lf375AAug0pkxU/s1600/blogger-images2.png" alt="Alt Text!" width="1000" height="600"/>
</picture> --></div>Anda tinggal pilih, bisa pakai cara pertama atau cara kedua.
Dan untuk pengguna AMP HTML, kabar baik bahwa amp-img sudah menggunakan lazyload, jadi untuk masalah Defer offscreen images sudah teratasi. Yang perlu dilakukan adalah untuk mengatasi masalah Serve images in next-gen formats ini dengan mengikuti postingan berikut ini.
UPDATE:
Untuk cara kedua bisa juga digunakan untuk defer element lainnya seperti video Youtube dan lainnya. Penggunaannya sama, seperti berikut ini.
<div class="lazyloadimg"><!--
Element yang di-defer di sini --></div>Contoh untuk video Youtube:
<div class="lazyloadimg"><!--
<iframe width="560" height="315" src="https://www.youtube.com/embed/r27NsC2XzsA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> --></div>