Membuat Preload Gambar Pada Blogger

Membuat Preload Gambar Pada Blogger

Salah satu faktor yang mempengaruhi kecepatan dari sebuah blog adalah gambar yang ada. Hal yang mempengaruhi seperti ukuran dan kapan gambar itu akan dimuat. Disini KOOI akan memberikan tips cara Membuat Preload Gambar Pada Blogger dimana gambar akan ditunda pemuatannya sebelum scroll halaman.

Preload image atau penundaan memuat gambar yang akan kita bahas dimana gambar tidak akan tampil sampai pengunjung melakukan scroll pada halaman. Penundaan pemuatan gambar tersebut terbukti sangat efektif.

Konsep dari cara preload ini sama dengan lazyload yang biasa sudah digunakan. Hanya saja, pada kali ini gambar hanya akan ditampilkan ketika terjadi scroll pada halaman saja.

Cara Membuat Preload Gambar Pada Blogger

Pertama, buka Dashboard Blogger, lalu pilih menu Themes. Selanjutnya, pilih opsi untuk Edit HTML pada theme yang saat ini aktif. Tambahkan kode ini sebelum </body>

<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/[email protected]/lazyarlinas.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Untuk menerapkannya, silahkan cari semua kode <img pada theme kamu. edit dan tambahkan class lazy pada setiap tag img dan juga ubah src menjadi data-src.Contohnya seperti ini :

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

Menjadi seperti ini :

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

Kamu juga bisa menambahkan kode src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' pada setiap tag img yang kamu temukan. Untuk yang menggunakan expr sebagai memanggil URL gambar, kamu bisa mengubahnya seperti contoh ini :

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

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

Lalu bagaimana jika tag img tersebut sudah memiliki class ? kamu bisa tambahkan class seperti contoh berikut ini : 

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

Menjadi seperti ini :

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

Selanjutnya kamu bisa menyimpan hasil perubahan tersebut dan melihat hasilnya. Kamu bisa mengecek hasil perubahannya pada GTMetrix atau Pingdom Tool atau Google Pagespeed.

Sekian artikel cara Membuat Preload Gambar Pada Blogger dari KOOI. Semoga bermanfaat dan membantu. Terima kasih.