Kecepatan loading blog merupakan salah satu aspek penting yang perlu diperhatikan ketika mengelola website atau blog. Artikel yang memiliki banyak gambar berukuran besar dapat membutuhkan lebih banyak waktu dan data untuk dimuat, terutama ketika seluruh gambar langsung diproses saat halaman pertama kali dibuka.
Salah satu teknik yang dapat digunakan untuk mengurangi beban pemuatan awal adalah lazy load gambar. Teknik ini membuat gambar yang berada jauh dari area tampilan tidak langsung dimuat. Gambar kemudian diproses ketika mulai mendekati area yang akan dilihat oleh pengunjung.
Pada tutorial ini, kita akan membahas cara memasang lazy load gambar di Blogger menggunakan JavaScript dan CSS. Metode ini dapat membantu mengoptimalkan cara gambar dimuat pada artikel yang memiliki banyak konten visual.
Apa Itu Lazy Load Gambar?
Lazy load adalah teknik pemuatan sumber daya secara bertahap sesuai kebutuhan. Pada gambar, metode ini memungkinkan browser menunda pemuatan gambar yang belum diperlukan oleh pengunjung.
Sebagai contoh, sebuah artikel memiliki 20 gambar dan pengunjung baru membaca bagian awal artikel. Dengan mekanisme lazy load, gambar yang berada jauh di bawah halaman dapat ditunda pemuatannya sampai pengunjung menggulir mendekati lokasi gambar tersebut.
Pendekatan ini dapat mengurangi jumlah sumber daya yang perlu diproses pada tahap awal halaman, terutama pada artikel dengan banyak gambar.
Bagaimana Cara Kerja Lazy Load dengan JavaScript?
Script pada tutorial ini menggunakan IntersectionObserver, yaitu API browser yang dapat digunakan untuk mendeteksi ketika sebuah elemen mulai masuk atau mendekati area pandang.
Alur kerjanya secara sederhana adalah sebagai berikut:
- JavaScript mencari gambar yang memiliki class lazyload.
- URL gambar asli disimpan pada atribut data-src.
- Browser tidak langsung menggunakan URL tersebut sebagai sumber gambar utama.
- IntersectionObserver memantau posisi gambar.
- Ketika gambar mendekati area pandang, URL pada data-src dipindahkan ke atribut src.
- Gambar kemudian mulai dimuat oleh browser.
- Class lazyload diganti menjadi lazyloaded untuk menjalankan efek transisi.
Dengan mekanisme tersebut, gambar tidak perlu langsung dimuat semuanya ketika halaman pertama kali dibuka.
Manfaat Lazy Load Gambar di Blogger
Penerapan lazy load dapat memberikan manfaat terutama pada artikel yang memiliki banyak gambar. Beberapa manfaat yang dapat diperoleh antara lain:
- Mengurangi beban pemuatan awal halaman karena gambar yang belum diperlukan dapat ditunda.
- Menghemat penggunaan data untuk pengunjung yang tidak menggulir sampai bagian bawah artikel.
- Membantu meningkatkan pengalaman pengguna pada halaman dengan banyak gambar.
- Mengoptimalkan pemuatan konten visual agar dilakukan secara bertahap.
- Mengurangi pekerjaan browser pada tahap awal ketika halaman memiliki banyak gambar.
- Cocok untuk artikel panjang seperti tutorial, dokumentasi, galeri, dan review produk.
Namun, lazy load bukan jaminan bahwa sebuah blog akan langsung menjadi cepat. Performa halaman juga dipengaruhi oleh ukuran gambar, jumlah script, iklan, widget, video, CSS, server, jaringan, dan berbagai elemen lainnya.
Contoh Penerapan Lazy Load pada Artikel Blogger
Bayangkan Anda memiliki artikel tutorial yang berisi 15 gambar dokumentasi. Jika semua gambar dimuat sekaligus saat halaman dibuka, browser harus memproses seluruh sumber gambar tersebut meskipun sebagian besar belum terlihat oleh pengunjung.
Dengan lazy load, gambar yang berada jauh di bawah halaman dapat ditunda. Ketika pembaca menggulir halaman dan gambar mulai mendekati area tampilan, script akan mengaktifkan proses pemuatannya.
Teknik ini sangat berguna untuk artikel yang memiliki banyak dokumentasi visual tanpa harus menghilangkan gambar yang sebenarnya penting bagi pembaca.
Kode Lazy Load Gambar Blogger Siap Pakai
Berikut kode lengkap yang dapat digunakan. Kode terdiri dari CSS untuk efek transisi dan JavaScript untuk mendeteksi posisi gambar.
1. Kode CSS untuk Efek Transisi
CSS berikut bersifat opsional. Fungsinya memberikan transisi opacity ketika gambar selesai diproses sehingga perubahan tampilan terasa lebih halus.
<style>
img.lazyload {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
img.lazyloaded {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
</style>
2. Kode JavaScript Lazy Load
JavaScript berikut bertugas mencari gambar dengan class lazyload, kemudian memuat gambar ketika elemen tersebut masuk atau mendekati area pandang.
<script>
document.addEventListener("DOMContentLoaded", function() {
var elemenGambar = [].slice.call(
document.querySelectorAll("img.lazyload")
);
if ("IntersectionObserver" in window) {
var pengamatGambar = new IntersectionObserver(function(entri, pengamat) {
entri.forEach(function(item) {
if (item.isIntersecting) {
var gambarAsli = item.target;
gambarAsli.src = gambarAsli.dataset.src;
gambarAsli.classList.remove("lazyload");
gambarAsli.classList.add("lazyloaded");
pengamat.unobserve(gambarAsli);
}
});
});
elemenGambar.forEach(function(gambar) {
pengamatGambar.observe(gambar);
});
}
});
</script>
Cara Memasang Script Lazy Load di Blogger
Untuk menerapkan script secara umum pada blog, Anda dapat memasukkannya melalui gadget HTML/JavaScript pada menu Tata Letak Blogger.
Langkah 1: Buka Dashboard Blogger
Masuk ke dashboard Blogger dan pilih blog yang ingin dioptimalkan. Sebelum melakukan perubahan, sebaiknya simpan atau backup template jika Anda akan melakukan pengeditan lebih lanjut.
Langkah 2: Masuk ke Menu Tata Letak
Pilih menu Tata Letak atau Layout pada dashboard Blogger.
Langkah 3: Tambahkan Gadget HTML/JavaScript
Cari area widget yang tersedia, kemudian klik Tambahkan Gadget. Pilih gadget HTML/JavaScript.
Langkah 4: Masukkan CSS dan JavaScript
Biarkan kolom judul kosong, kemudian tempelkan kode CSS dan JavaScript pada bagian konten gadget.
Setelah kode selesai dimasukkan, klik Simpan.
Cara Menggunakan Lazy Load pada Gambar Artikel
Memasang JavaScript saja belum cukup. Gambar yang ingin diproses oleh script harus memiliki struktur HTML yang sesuai.
Gambar perlu menggunakan class lazyload dan menyimpan URL gambar asli pada atribut data-src.
Contoh format gambar yang digunakan adalah:
<img
class="lazyload"
data-src="TAUTAN_GAMBAR_ASLI_ANDA"
src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
alt="Deskripsi gambar"
>
Perhatikan bahwa URL gambar utama berada pada atribut data-src, bukan langsung pada atribut src.
Penjelasan Struktur Kode Gambar Lazy Load
Class lazyload
Class lazyload digunakan sebagai penanda agar JavaScript mengetahui gambar mana yang harus diproses.
class="lazyload"
Atribut data-src
Atribut data-src digunakan untuk menyimpan URL gambar asli.
data-src="TAUTAN_GAMBAR_ASLI"
Atribut src
Pada contoh ini, atribut src menggunakan gambar placeholder berukuran sangat kecil. Tujuannya agar URL gambar sebenarnya tidak langsung digunakan sebelum script mengaktifkannya.
src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
Atribut alt
Atribut alt tetap perlu digunakan untuk memberikan deskripsi mengenai isi gambar.
alt="Deskripsi gambar"
Gunakan deskripsi yang sesuai dengan isi gambar dan hindari memasukkan kata kunci secara berlebihan.
Cara Menerapkan Lazy Load pada Gambar Blogger
Jika Anda menggunakan gambar dari editor Blogger, buka artikel dan pilih Tampilan HTML. Cari kode gambar yang ingin diubah.
Struktur gambar normal biasanya memiliki URL langsung pada atribut src. Anda perlu memindahkan URL gambar tersebut ke data-src dan menambahkan class lazyload.
Contoh sebelum menggunakan lazy load:
<img
src="https://contoh.com/gambar.jpg"
alt="Contoh gambar"
>
Setelah disesuaikan:
<img
class="lazyload"
data-src="https://contoh.com/gambar.jpg"
src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
alt="Contoh gambar"
>
Ulangi langkah tersebut untuk gambar lain yang ingin ditunda pemuatannya.
Cara Menguji Lazy Load Gambar di Blogger
Setelah kode dipasang dan gambar sudah menggunakan struktur yang benar, lakukan pengujian menggunakan halaman yang telah diterbitkan atau fitur Pratinjau Blogger.
Buka artikel kemudian jangan langsung menggulir sampai bagian paling bawah. Periksa apakah gambar yang berada jauh dari area tampilan belum dimuat seperti gambar yang berada di area awal halaman.
Selanjutnya, gulir halaman secara perlahan. Ketika gambar mendekati area pandang, gambar seharusnya mulai dimuat dan kemudian tampil pada halaman.
Untuk pengujian yang lebih mendalam, Anda dapat membuka Developer Tools browser dan melihat aktivitas Network untuk mengamati kapan sumber gambar mulai diminta oleh browser.
Kesalahan Umum Saat Memasang Lazy Load
1. Gambar Tidak Muncul
Jika gambar tidak muncul sama sekali, periksa kembali atribut data-src. Pastikan URL gambar asli benar dan dapat diakses.
2. Lupa Menambahkan Class lazyload
JavaScript pada tutorial ini hanya mencari elemen gambar yang memiliki class lazyload. Jika class tersebut tidak ada, script tidak akan memproses gambar tersebut.
3. URL Gambar Masih Berada di src
Jika URL gambar asli tetap berada pada atribut src, browser dapat langsung memuat gambar tersebut sehingga mekanisme penundaan tidak berjalan sesuai tujuan.
4. JavaScript Tidak Terpasang Lengkap
Pastikan seluruh kode JavaScript disalin, termasuk tag pembuka <script> dan tag penutup </script>.
5. Template Menggunakan Script Optimasi Lain
Template Blogger tertentu mungkin sudah menggunakan sistem lazy load bawaan atau script optimasi gambar lainnya. Jika dua sistem bekerja pada elemen yang sama, kemungkinan terjadi konflik.
Jika template sudah memiliki lazy load bawaan, sebaiknya jangan memasang sistem kedua sebelum memastikan keduanya dapat bekerja dengan baik.
Apakah Lazy Load Gambar Bagus untuk SEO?
Lazy load dapat membantu mengoptimalkan cara gambar dimuat dan berpotensi memperbaiki aspek performa tertentu pada halaman. Namun, lazy load bukan jaminan peningkatan ranking Google.
SEO sebuah halaman dipengaruhi oleh banyak faktor. Selain performa, kualitas konten, relevansi dengan kebutuhan pencarian, struktur halaman, pengalaman pengguna, internal linking, dan berbagai faktor lainnya juga perlu diperhatikan.
Gunakan lazy load sebagai bagian dari strategi optimasi performa, bukan sebagai satu-satunya teknik SEO.
Tips Optimasi Gambar Blogger agar Lebih Efisien
Selain menggunakan lazy load, Anda dapat mengoptimalkan gambar dengan beberapa cara berikut:
- Kompres gambar sebelum diunggah agar ukuran file tidak terlalu besar.
- Gunakan dimensi gambar yang sesuai dengan kebutuhan tampilan artikel.
- Gunakan format gambar yang efisien jika didukung oleh kebutuhan website Anda.
- Tambahkan alt text deskriptif pada gambar.
- Hindari penggunaan terlalu banyak gambar berukuran besar dalam satu halaman.
- Uji performa halaman setelah melakukan perubahan.
- Pastikan gambar penting di bagian awal halaman tidak tertunda secara berlebihan.
Perhatikan Gambar Utama atau Hero Image
Tidak semua gambar sebaiknya diperlakukan sama. Gambar utama yang langsung terlihat ketika halaman pertama kali dibuka memiliki posisi berbeda dibandingkan gambar yang berada jauh di bawah artikel.
Jika gambar utama merupakan elemen penting yang langsung terlihat oleh pengunjung, menundanya secara berlebihan dapat membuat gambar tersebut terlambat tampil.
Karena itu, lazy load sebaiknya lebih difokuskan pada gambar yang berada di luar area tampilan awal halaman.
Kesimpulan
Lazy load gambar di Blogger merupakan teknik yang dapat digunakan untuk menunda pemuatan gambar sampai gambar tersebut mendekati area pandang pengunjung. Dengan kombinasi HTML, CSS, JavaScript, dan IntersectionObserver, gambar dapat dimuat secara bertahap sesuai kebutuhan.
Teknik ini sangat berguna untuk artikel yang memiliki banyak gambar, seperti tutorial, dokumentasi, galeri, portofolio, review produk, dan artikel panjang lainnya.
Namun, lazy load bukan satu-satunya solusi untuk meningkatkan performa blog. Tetap optimalkan ukuran gambar, jumlah elemen halaman, script pihak ketiga, struktur template, dan berbagai sumber daya lain yang dapat memengaruhi loading.
Setelah menerapkan kode, lakukan pengujian pada desktop dan smartphone untuk memastikan gambar tetap muncul dengan benar serta tidak mengganggu pengalaman membaca pengunjung.
FAQ Lazy Load Gambar di Blogger
Apa itu lazy load gambar di Blogger?
Lazy load gambar adalah teknik yang menunda pemuatan gambar sampai gambar tersebut mendekati atau masuk ke area pandang pengunjung.
Apakah lazy load bisa mempercepat loading Blogger?
Lazy load dapat membantu mengurangi beban pemuatan awal pada halaman yang memiliki banyak gambar. Namun, hasilnya bergantung pada jumlah gambar, ukuran file, struktur halaman, dan sumber daya lain yang digunakan blog.
Apakah semua gambar Blogger harus menggunakan lazy load?
Tidak selalu. Gambar yang langsung terlihat pada bagian awal halaman perlu dipertimbangkan agar tidak mengalami keterlambatan tampil. Lazy load lebih cocok digunakan untuk gambar yang berada di luar area tampilan awal.
Apakah lazy load gambar membantu SEO?
Lazy load dapat menjadi bagian dari optimasi performa halaman, tetapi bukan jaminan peningkatan ranking di mesin pencari. SEO dipengaruhi oleh banyak faktor lain, termasuk kualitas konten, relevansi, struktur halaman, dan pengalaman pengguna.
Mengapa gambar tidak muncul setelah menggunakan lazy load?
Periksa class lazyload, atribut data-src, URL gambar, serta kode JavaScript. Pastikan URL gambar asli berada pada data-src dan bukan hanya pada atribut src.
Apakah Blogger sudah memiliki lazy load bawaan?
Implementasi dan perilaku pemuatan gambar dapat berbeda berdasarkan platform, template, serta struktur halaman yang digunakan. Jika template Anda sudah memiliki sistem lazy load, hindari memasang script kedua pada elemen yang sama sebelum melakukan pengujian untuk mencegah konflik.