Home » Tip Trick Blog » Mengatasi Masalah Defer Offscreen Images Tanpa Jquery Atau Lazy Loading
9:46:00 PM
0 comments

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. Mengatasi Masalah Defer Offscreen Images Tanpa Jquery Atau Lazy Loading
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

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/AVvXsEiR8AoH3AO1PwQZ3spUHvhoKW9x4l_gRTh2mXHHZoW7zjb6EwjY9kqZdFG-n-MfZbtrhv_hAkMW-RWAEGxtevtOl9ThyphenhyphenGwB4DyJUIFyg8cMKpCxydz-8Xt11iergshfH8G8tGeX782ue8I/-rw/blogger-images2.png" type="image/webp"/>

  <source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR8AoH3AO1PwQZ3spUHvhoKW9x4l_gRTh2mXHHZoW7zjb6EwjY9kqZdFG-n-MfZbtrhv_hAkMW-RWAEGxtevtOl9ThyphenhyphenGwB4DyJUIFyg8cMKpCxydz-8Xt11iergshfH8G8tGeX782ue8I/s1600/blogger-images2.png" type="image/png"/>

  <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR8AoH3AO1PwQZ3spUHvhoKW9x4l_gRTh2mXHHZoW7zjb6EwjY9kqZdFG-n-MfZbtrhv_hAkMW-RWAEGxtevtOl9ThyphenhyphenGwB4DyJUIFyg8cMKpCxydz-8Xt11iergshfH8G8tGeX782ue8I/s1600/blogger-images2.png" alt="Alt Text!" width="1000" height="600"/>

</picture>

DEMO | Pagespeed Insights

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/AVvXsEiR8AoH3AO1PwQZ3spUHvhoKW9x4l_gRTh2mXHHZoW7zjb6EwjY9kqZdFG-n-MfZbtrhv_hAkMW-RWAEGxtevtOl9ThyphenhyphenGwB4DyJUIFyg8cMKpCxydz-8Xt11iergshfH8G8tGeX782ue8I/-rw/blogger-images2.png" type="image/webp"/>

  <source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR8AoH3AO1PwQZ3spUHvhoKW9x4l_gRTh2mXHHZoW7zjb6EwjY9kqZdFG-n-MfZbtrhv_hAkMW-RWAEGxtevtOl9ThyphenhyphenGwB4DyJUIFyg8cMKpCxydz-8Xt11iergshfH8G8tGeX782ue8I/s1600/blogger-images2.png" type="image/png"/>

  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR8AoH3AO1PwQZ3spUHvhoKW9x4l_gRTh2mXHHZoW7zjb6EwjY9kqZdFG-n-MfZbtrhv_hAkMW-RWAEGxtevtOl9ThyphenhyphenGwB4DyJUIFyg8cMKpCxydz-8Xt11iergshfH8G8tGeX782ue8I/s1600/blogger-images2.png" alt="Alt Text!" width="1000" height="600"/>

</picture> --></div>

DEMO | Pagespeed Insights
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
Labels:
Share: