Beberapa tahun lalu, saya pernah mengerjakan website katalog produk yang memiliki lebih dari 300 gambar di satu halaman. Tampilan halamannya memang cantik, tapi ketika saya cek performanya, PageSpeed Insights hanya memberi skor merah terang. LCP mencapai 6 detik, CLS berantakan, dan Core Web Vitals jauh dari standar.
Saat itu saya berpikir, “Apa semua gambar benar-benar harus dimuat sekaligus di awal?” Dari situlah saya mengenal konsep lazy loading gambar, sebuah teknik sederhana yang ternyata punya dampak besar pada performa website, terutama untuk skor LCP dan CLS.
Teknik ini mengubah total cara saya membangun dan mengoptimasi website. Dan melalui artikel ini, saya ingin berbagi penjelasan paling relevan, praktis, dan berdasarkan pengalaman nyata.
Mengapa Lazy Loading Sangat Penting untuk Kecepatan Website
Lazy loading gambar bukan lagi sekadar fitur tambahan. Sekarang, teknik ini menjadi standar untuk meningkatkan kecepatan website, terutama pada halaman yang memiliki banyak elemen visual.
Bayangkan seperti ini:
Saat kamu membuka sebuah halaman, browser hanya memuat gambar yang terlihat di layar. Gambar lain di bawah halaman tidak perlu dimuat dulu sebelum kamu menggulir. Jadi, waktu loading awal menjadi jauh lebih cepat.
Di sisi pengalaman pengguna, halaman terasa langsung “siap pakai”. Tidak ada yang lebih menyenangkan daripada website yang langsung menampilkan bagian terpenting dalam sekejap.
Di sinilah lazy loading memainkan peran penting dalam dua metrik besar: LCP dan CLS.
Bagaimana Lazy Loading Mempengaruhi LCP (Largest Contentful Paint)
LCP adalah waktu yang dibutuhkan elemen terbesar pada layar muncul secara utuh. Biasanya LCP berupa:
-
gambar hero di atas,
-
banner,
-
atau blok konten besar.
Pada banyak website, elemen LCP berupa gambar besar. Masalahnya, gambar sering jadi penyebab halaman lambat dimuat.
Saya pernah melihat gambar hero ukuran 500KB dipaksa dimuat di awal tanpa optimasi. Alhasil, LCP berantakan dan PageSpeed memberi nilai merah.
Lazy loading membantu mengurangi beban muat awal, tapi perlu di catat satu aturan emas yang saya pelajari dari pengalaman:
Jangan pernah melakukan lazy load pada elemen LCP.
Karena elemen yang berfungsi sebagai konten terbesar harus dimuat secepat mungkin, bukan ditunda.
Jadi strategi saya biasanya seperti ini:
Dengan cara ini, skor LCP melonjak tanpa mengganggu tampilan halaman.
Pengaruh Lazy Loading Terhadap CLS (Cumulative Layout Shift)
CLS menggambarkan seberapa banyak tata letak halaman bergeser ketika dimuat.
Pernahkah kamu mau mengklik tombol, lalu posisinya tiba-tiba geser karena gambar baru muncul? Nah, itu adalah contoh klasik CLS buruk.
Lazy loading bisa memperburuk CLS jika tidak digunakan dengan benar.
Saat pertama kali mengimplementasikan lazy loading secara sembarangan, saya melakukan kesalahan fatal:
Saya tidak menetapkan ukuran gambar.
Akibatnya, setiap gambar yang muncul ketika digulir membuat elemen lain bergeser. PageSpeed langsung memberi sinyal merah untuk CLS.
Dari pengalaman itu saya belajar, kunci utama untuk CLS stabil adalah:
-
Selalu tentukan width dan height gambar, atau
-
Gunakan aspect-ratio,
-
Pastikan ruang gambar sudah “dipersiapkan” sebelum diisi.
Sejak mengikuti aturan ini, CLS hampir selalu stabil di angka hijau.
Cara Kerja Lazy Loading Gambar Secara Sederhana
Lazy loading pada dasarnya menunda pemuatan gambar sampai gambar tersebut benar-benar diperlukan oleh pengguna. Ada beberapa cara untuk menerapkannya.
1. Lazy Loading native HTML
Browser modern mendukung atribut sederhana:
Ini adalah cara paling mudah dan aman.
2. Lazy Loading menggunakan Intersection Observer
Saya sering menggunakan Intersection Observer ketika halaman memiliki animasi atau efek saat gambar muncul.
3. Lazy Loading bawaan framework
Dalam Next.js, komponen <Image /> otomatis menerapkan lazy loading pada gambar non-prioritas.
Ini membuat optimasi jauh lebih mudah.
Teknik Tambahan yang Memperkuat Skor LCP & CLS
Lazy loading saja tidak cukup. Ada beberapa optimasi tambahan yang sangat membantu:
1. Gunakan format gambar modern (WebP atau AVIF)
File jauh lebih kecil, kualitas tetap tajam, dan LCP membaik.
2. Kompres gambar sebelum upload
Jangan pernah upload gambar langsung dari smartphone. Gunakan compressor seperti TinyPNG atau Squoosh.
3. Preload gambar hero
Saya biasanya menambahkan preload untuk gambar pertama agar tampil instan.
4. Gunakan responsive images
Dengan srcset, browser memilih ukuran yang paling sesuai layar.
5. Optimasi server dan caching
Cache yang bagus = distribusi gambar lebih cepat.
Studi Kasus: Skor LCP & CLS Naik Setelah Lazy Loading diterapkan
Saya pernah mengelola blog fotografi dengan ratusan gambar di setiap artikel. Kondisi awalnya:
-
LCP: 4,8 detik
-
CLS: 0,28
-
PageSpeed mobile merah
Setelah langkah-langkah berikut diterapkan:
-
lazy loading untuk semua gambar non-hero,
-
preload hero image,
-
optimasi ukuran gambar,
-
menambahkan aspect-ratio,
hasilnya berubah drastis:
-
LCP turun ke 1,7 detik
-
CLS stabil di 0,01
-
PageSpeed mobile hijau
Klien mengira saya melakukan perubahan besar. Padahal hanya teknik sederhana yang diterapkan dengan benar.
Kesalahan Umum dalam Lazy Loading Gambar
Banyak orang menerapkan lazy loading asal jadi. Berikut beberapa kesalahan yang saya sering temui:
-
melazy-load elemen LCP,
-
tidak memberikan ukuran gambar,
-
menggunakan script lazy load terlalu berat,
-
menggunakan placeholder yang membuat CLS naik,
-
lazy load pada ikon kecil atau logo.
Setiap detail kecil bisa memengaruhi pengalaman pengguna dan hasil skor Core Web Vitals.
Bagaimana Lazy Loading Membantu Core Web Vitals Secara Keseluruhan
Pada akhirnya, lazy loading tidak hanya meningkatkan LCP dan CLS. Teknik ini juga memengaruhi:
Website menjadi lebih ringan, cepat, dan efisien.
Lazy loading bukan sekadar teknik, tapi bagian dari filosofi membangun website modern: tampilkan hanya apa yang dibutuhkan pengguna, tepat saat mereka membutuhkannya.
Penutup Tanpa Formalitas
Lazy loading gambar memberi saya perspektif baru tentang bagaimana sebuah website seharusnya bekerja. Bukan sekadar memuat banyak hal sekaligus, tetapi memuatnya dengan cerdas dan terukur. Jika diterapkan dengan benar, teknik ini bisa mengubah website lambat menjadi website ringan yang disukai pengguna dan Google.
Komentar