Cara mengimplementasikan lazy loading untuk gambar di Blogger
Mengimplementasikan lazy loading untuk gambar di Blogger dapat membantu meningkatkan kecepatan loading halaman. Berikut adalah langkah-langkah untuk melakukannya:
1. Edit HTML Tema
- Masuk ke akun Blogger Anda.
- Pilih blog yang ingin Anda edit.
- Klik pada Tema di menu sebelah kiri.
- Klik pada tombol Edit HTML.
2. Tambahkan CSS untuk Lazy Loading
- Cari bagian
<head>dalam kode HTML. - Tambahkan kode CSS berikut untuk mendukung lazy loading:
css
<style>
img[data-src] {
display: none;
}
</style>
3. Modifikasi Tag Gambar
- Temukan tag
<img>dalam template Anda. Anda perlu mengganti atributsrcdengandata-src. Contoh:
Sebelumnya:
html
<img src="url-gambar.jpg" alt="Deskripsi Gambar">
Sesudah:
html
<img data-src="url-gambar.jpg" alt="Deskripsi Gambar" class="lazy">
4. Tambahkan JavaScript untuk Lazy Loading
- Di bawah bagian penutup
</body>, tambahkan kode JavaScript berikut:
html
<script>
document.addEventListener("DOMContentLoaded", function() {
const lazyImages = document.querySelectorAll("img.lazy");
const lazyLoad = (image) => {
image.src = image.getAttribute("data-src");
image.onload = () => {
image.removeAttribute("data-src");
image.classList.remove("lazy");
};
};
const options = {
root: null,
rootMargin: "0px",
threshold: 0.1
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
lazyLoad(entry.target);
observer.unobserve(entry.target);
}
});
}, options);
lazyImages.forEach(image => {
observer.observe(image);
});
});
</script>
5. Simpan Perubahan
- Setelah melakukan semua perubahan, klik pada Simpan untuk menyimpan template baru Anda.
6. Uji Coba
- Periksa blog Anda untuk memastikan gambar dimuat dengan benar saat menggulir ke bawah halaman.
Dengan mengikuti langkah-langkah di atas, Anda dapat menerapkan lazy loading untuk gambar di Blogger, yang dapat membantu meningkatkan kecepatan loading halaman dan pengalaman pengguna.
