Menerapkan LazyLoad pada gambar blog.

Lazyload Script

Postingan terkait:

Gambar ideal postingan

Lolos audit Pagespeed insight

Daftar isi:

1. Intro
2. Memasang Lazyload
3. Custom HTML
4. CSS Custom
5. Demo Lazyload

Intro

Apa itu LazyLoad ?

LazyLoad secara istilah berarti malas memuat, dan memang itulah maksud sebenarnya dari teknik pemuatan ini.

Namun dalam proses pemuatan suatu halaman penjelasan singkatnya begini :

Pada waktu halaman blog atau website pertama kali terbuka dibrowser, terlihat pada layar perangkat adalah bagian atas halaman terlebih dahulu

Maka halaman yang tampil itulah yang seluruh kontennya harus dimuat (Loaded). Sedangkan bagian halaman yang belum di scroll dan belum terlihat disitulah LazyLoad bekerja.

LazyLoad bertugas HANYA memuat konten halaman yang tampil dilayar saja. Sedangkan sisa halaman yang belum terlihat, tidak akan dimuat sebelum halaman tersebut discroll.

Ilustrasi Lazyload

Apa bedanya halaman tanpa LazyLoad ?

Halaman yang dimuat tanpa LazyLoad akan memaksa browser untuk segera memuat seluruh konten yang ada pada halaman tersebut meskipun halaman belum discroll untuk dilihat.

Hal itu berarti pengunjung halaman harus mengorbankan data demi konten yang belum dilihatnya. Selain itu juga pada perangkat yang digunakan akan memakan memori berlebih untuk menyimpan konten yang belum tentu dilihat oleh pengguna tersebut dibandingkan dengan membuka halaman dengan LazyLoad.

Dampaknya pada halaman adalah, jika dibuka pada jaringan yang lambat, maka halaman juga akan lambat terbuka karena browser masih sibuk mengunduh seluruh konten halaman itu meskipun kontennya disematkan dibagian bawah halaman.

Dampak terburuknya adalah, jika halaman lambat dimuat maka kemungkinannya pengunjung akan meninggalkan halaman tersebut sebelum tuntas. Maka rugilah si pembuat konten halaman tersebut.

Untuk bisa mngaplikasikan metode ini pada halaman blog / situs, simak penjelasannya dibawah ini.

Memasang LazyLoad - Blogger

Script LazyLoad

LazyLoad bisa diaplikasikan menggunakan script untuk mengkonfigurasikan elemen HTML khususnya tag <img>

Agar dicatat bahwa browser versi terbaru saat ini juga sudah support Lazyload, sehingga langkah ini bisa dilewati dahulu untuk mencoba Lazyload tanpa script

Dan apabila tanpa script ternyata Lazyload sudah berfungsi berarti browser yang digunakan sudah versi terbaru yang support Lazyload.

Lanjut ke Penambahan atribut Lazyload pada tag <img>

<script>
//<![CDATA[ var lazyimages = document.querySelectorAll('img[data-src]');
if ('IntersectionObserver' in window && !('loading' in HTMLImageElement.prototype)) {
var imageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var image = entry.target;
image.src = image.dataset.src;
image.removeAttribute('data-src');
imageObserver.unobserve(image);
}
});
}, {rootMargin:'500px 0px'});

lazyimages.forEach(function(image) {
imageObserver.observe(image);
});
}
else {
for (var i = 0; i < lazyimages.length; i++) {
lazyimages[i].src = lazyimages[i].dataset.src;
lazyimages[i].removeAttribute('data-src');
}
}
//]]>
</script>

Penambahan atribut pada Tag img

Contoh :

<img loading="lazy" src="/image.jpg" width="800" height="450" alt="beach"/>

Tambahkan atribut loading='lazy' pada setiap elemen image di halaman blog untuk mendukung kinerja script diatas.
Selanjutnya custom untuk CSS image berikut ini.

Custom CSS image

Contoh :

<style>

/* -- CSS custom Lazyload -- */
img[data-src] {background-color:rgba(0,0,0,.1)}

/* -- Atau gabungkan dengan CSS yang sudah ada -contoh: -- */
img{max-width: 100%;
margin: 0 auto;
display: block;
}

/* -- menjadi seperti ini -contoh: -- */
img[data-src] {background-color:rgba(0,0,0,.1);
max-width: 100%;
margin: 0 auto;
display: block;
}

</style>

Paste kode CSS diatas ke template HTML blog bersama dengan CSS yang sudah ada.
Atau gabungkan CSS img menjadi satu line seperti diatas.

Demo Gambar Lazyload

sumber : Free Images In PxHere

sumber : Free Images In PxHere

sumber : Free Images In PxHere