Tingkatkan Performa Website dengan Lazy Loading Gambar (Teknik Lanjutan)

Lazy loading gambar adalah salah satu cara termudah untuk mempercepat waktu muat situs Anda, karena bentuk paling dasarnya hanya memerlukan satu baris kode. Namun, ada beberapa teknik tingkat lanjut yang bisa Anda gunakan untuk membuat efek lazy loading terlihat lebih profesional, lengkap dengan placeholder buram dan transisi yang mulus saat gambar asli muncul.

Dalam artikel ini, kita akan membahas semua yang perlu Anda ketahui tentang lazy loading, mulai dari dasar hingga cara membuat efek canggih tersebut.

---

Percepat Website-mu Seketika dengan Lazy Loading Gambar – Teknik Tingkat Lanjut

Lazy loading gambar adalah salah satu cara termudah untuk mempercepat waktu muat situs Anda, karena bentuk paling dasarnya hanya memerlukan satu baris kode. Namun, ada beberapa teknik tingkat lanjut yang bisa Anda gunakan untuk membuat efek lazy loading terlihat lebih profesional, lengkap dengan placeholder buram dan transisi yang mulus saat gambar asli muncul.

Dalam artikel ini, kita akan membahas semua yang perlu Anda ketahui tentang lazy loading, mulai dari dasar hingga cara membuat efek canggih tersebut.

Apa Itu Lazy Loading? 🤔

Lazy loading adalah teknik untuk menunda pemuatan sebuah aset (dalam hal ini, gambar) hingga aset tersebut benar-benar dibutuhkan. Untuk gambar, ini berarti browser tidak akan mengunduh gambar sampai pengguna menggulir halaman ke titik di mana gambar tersebut akan terlihat di layar.

Ini adalah cara yang hebat untuk mempercepat situs Anda karena Anda hanya mengunduh gambar yang benar-benar dilihat oleh pengguna. Teknik ini sangat berguna untuk situs dengan banyak gambar, karena dapat menghemat banyak bandwidth.

Mungkin jika Anda memiliki koneksi internet super cepat, Anda tidak terlalu merasakan dampaknya. Namun, bagi sebagian besar pengguna, lazy loading adalah sebuah terobosan. Ingat, gambar sering kali merupakan aset terbesar yang diunduh pengguna, jadi bahkan dengan koneksi cepat sekalipun, mengurangi jumlah unduhan di awal akan membuat perbedaan besar pada kecepatan muat situs.

Lazy Loading Dasar (Cara Super Cepat)

Seperti yang disebutkan sebelumnya, menerapkan lazy loading dasar sangatlah mudah. Anda hanya perlu menambahkan atribut loading="lazy" pada tag <img>. Browser akan secara otomatis menentukan kapan harus mengunduh gambar berdasarkan seberapa dekat gambar tersebut dari layar.

Kelemahan metode ini:

Kelemahan terbesarnya adalah pengguna akan melihat ruang kosong di tempat gambar seharusnya berada sampai gambar tersebut selesai diunduh. Pengalaman pengguna seperti ini tentu kurang ideal. Itulah mengapa sisa artikel ini akan menunjukkan cara mengatasinya dengan placeholder yang buram.

Lazy Loading Tingkat Lanjut (Praktik Terbaik) 🚀

Tujuan kita adalah menampilkan gambar placeholder beresolusi sangat rendah yang buram selagi gambar aslinya diunduh. Setelah selesai, gambar asli akan muncul dengan transisi yang mulus. Mari kita pecah menjadi beberapa langkah praktis.

Langkah 1: Membuat Gambar Placeholder Kualitas Rendah

Pertama, Anda perlu membuat versi gambar Anda dengan resolusi super rendah. Gambar ini akan berukuran sangat kecil (seringkali kurang dari 1kB), sehingga dapat dimuat secara instan.

Ada banyak cara untuk melakukannya, tetapi salah satu yang paling fleksibel adalah menggunakan ffmpeg (alat baris perintah gratis). Cukup jalankan perintah berikut di terminal pada folder yang berisi gambar Anda:

Penjelasan Perintah:

• -i namaGambar.jpg: Menentukan file input (gambar asli Anda).
• -vf scale=20:-1: Mengubah skala (scale) gambar menjadi lebar 20 piksel, dan tingginya (-1) akan disesuaikan secara otomatis untuk menjaga rasio aspek.
• namaGambar-placeholder.jpg: Nama file output untuk gambar placeholder Anda.

Sekarang Anda memiliki gambar versi mini yang akan kita gunakan sebagai placeholder.

Langkah 2: Menyiapkan Struktur HTML & CSS

Kita akan menggunakan <div> sebagai wadah yang menampilkan gambar placeholder sebagai latar belakang, dan <img> di dalamnya yang akan memuat gambar asli.

HTML

CSS Dasar

Pada tahap ini, <div> akan menampilkan gambar placeholder yang direntangkan dan terlihat buram secara alami karena resolusinya yang rendah. Gambar asli disembunyikan dengan opacity: 0.

Langkah 3: Menambahkan Animasi Pemuatan (Opsional tapi Keren! ✨)

Untuk memberikan indikasi visual yang lebih jelas bahwa sesuatu sedang dimuat, kita bisa menambahkan animasi denyut (pulse).

Tambahkan CSS ini

Sekarang, akan ada lapisan putih tipis yang berdenyut di atas placeholder buram Anda, memberikan umpan balik visual yang bagus kepada pengguna.

Langkah 4: Menggunakan JavaScript untuk Menampilkan Gambar Asli

Langkah terakhir adalah menggunakan sedikit JavaScript untuk mendeteksi kapan gambar asli selesai dimuat, lalu menampilkannya dengan mulus.

JavaScript: Letakkan kode ini sebelum tag penutup </body> Anda.

Penjelasan JavaScript:

1. Kita memilih semua div dengan kelas .container-blur.
2. Untuk setiap div, kita menemukan elemen <img> di dalamnya.
3. Fungsi loaded() menambahkan kelas .loaded ke div.
4. Pengecekan img.complete sangat penting: jika gambar sudah ada di cache browser, ia akan langsung ditampilkan tanpa perlu menunggu.
5. Jika belum, kita “mendengarkan” event bernama load yang akan aktif saat gambar selesai diunduh, lalu menjalankan fungsi loaded().

CSS Final: Terakhir, tambahkan beberapa aturan CSS untuk menangani kelas .loaded yang ditambahkan oleh JavaScript.

Dengan semua ini, Anda akan mendapatkan efek lazy loading canggih yang menampilkan placeholder buram dengan animasi, kemudian menampilkan gambar asli dengan transisi halus setelah selesai dimuat.

Kesimpulan

Lazy loading adalah teknik sederhana yang dapat secara dramatis meningkatkan pengalaman pengguna di situs Anda. Versi dasarnya hanya membutuhkan satu baris kode, tetapi dengan sedikit usaha tambahan menggunakan HTML, CSS, dan JavaScript, Anda dapat menciptakan pengalaman memuat yang jauh lebih elegan dan profesional.