√ Menunda Loading Gambar untuk Mempercepat Blog

Menunda Loading Gambar untuk Mempercepat Blog

2.4.23

Penundaan pemuatan gambar merupakan salah satu cara untuk mempercepat proses loading suatu website atau blog. Tak dipungkiri gambar merupakan salah satu faktor yang menyebabkan pemuatan atau loading website atau blog menjadi lebih lama.

Gambar yang terlalu besar dari segi ukuran maupun size akan berdampak pada semakin banyaknya paket data yang dikonsumsi oleh perangkat yang mengakses webiste atau blog kita.

Mempercepat blog dengan ekstensi gambar .webp

Salah satu cara untuk mengakali pemuatan gambar yang terlalu besar adalah dengan menggunakan gambar yang relatif berukuran kecil dan tentu saja juga didukung dengan format gambar/image yang dapat mengkompresi gambar/image secara signifikan.

Gambar berektensi .jpg, .jpeg maupun .png merupakan gambar yang umum digunakan di sosial media maupun website, akan tetapi gambar-gambar dengan ekstensi tersebut cenderung besar ukurannya dan memberatkan pemuatan website atau blog kita.

Menurut admin format atau ekstensi gambar .webp adalah yang paling cocok digunakan untuk website atau blog. Karena selain dikompresi secara signifikan sehingga ukurannya relatif kecil juga tentu saja dapat meringankan beban blog ketika dimuat.

Menunda pemuatan gambar dengan lazyload

Cara alternatif lainnya yang bisa digunakan adalah dengan menggunakan script lazyload. Script ini akan menunda pemuatan gambar/image sebelum laman tersebut discroll atau digulir oleh pengunjung.

Penerapannya sangat mudah untuk diwebsite maupun untuk di blog, carilah kode </body> kemudian letakkan kode atau script dibawah ini tepat diatasnya.

<script>
//<![CDATA[
// Lazy (setiap tag <img diisi class='lazy')
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>

Langkah berikutnya adalah menambahkan class lazy didalam setiap markup img. Kalian cari kode diwebsite atau blog kalian yang berawalan <img .Kalau bingung perhatikan contoh dibawah ini.

Tekan CTRL+F pada keyboard ketika kalian berada diarea edit html kemudian cari tag <img , akan ada lumayan banyak tag tersebut kemudian tambahkan class='lazy' sehingga nampak seperti kode dibawah 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'/>

Ingat tambahkan class='lazy' disetiap tag <img seperti contoh diatas supaya semua gambar ditunda pemuatannya ketika website atau blog kita diakses oleh pengunjung yang secara tidak langsung dapat mempercepat loading website atau blog kita.

Demikian bagaimana cara menunda loading atau pemuatan gambar/image untuk mempercepat blog kita. Semoga bermanfaat.