Cara Optimasi Lazy Load Gambar Website Tanpa JS

Performa website sering kali runtuh bukan karena kode backend yang berat atau query database yang lambat, tetapi karena hal yang terlihat “sepele” yaitu gambar. File gambar beresolusi besar, screenshot tutorial, ilustrasi produk, hingga banner hero bisa membuat ukuran halaman membengkak drastis. Ketika semua gambar dimuat bersamaan saat halaman pertama kali dibuka, browser dipaksa mengunduh banyak resource sekaligus. Hasilnya? Loading terasa lambat, terutama di jaringan kampus, koneksi seluler, atau perangkat kelas menengah.

Di sinilah teknik lazy load berperan. Konsepnya sederhana yaitu tunda pemuatan gambar sampai benar-benar dibutuhkan. Kabar baiknya, optimasi ini bisa dilakukan tanpa JavaScript tambahan. Cukup memanfaatkan fitur native HTML modern, kamu sudah bisa memangkas beban awal halaman secara signifikan. Artikel ini akan membahas secara teknis dan menyeluruh bagaimana cara mengoptimasi lazy load gambar untuk berbagai jenis website mulai dari HTML statis, WordPress, CMS seperti Blogger atau Joomla, hingga custom framework.

Apa Itu Lazy Load Gambar?

Lazy load gambar adalah teknik optimasi yang menunda proses pemuatan (loading) gambar hingga elemen tersebut mendekati area viewport pengguna. Secara default, browser akan mengunduh seluruh gambar yang terdapat dalam HTML, bahkan yang posisinya jauh di bawah halaman. Ini membuat initial page load menjadi berat karena semua resource diminta sekaligus.

Dengan lazy load, hanya gambar yang terlihat di layar yang dimuat terlebih dahulu. Gambar lainnya baru diunduh ketika pengguna melakukan scroll dan mendekati posisi gambar tersebut. Konsep ini seperti membuka bab dalam buku satu per satu, bukan langsung membuka semua halaman sekaligus.

Secara teknis, implementasi modern menggunakan atribut HTML berikut:

<img src="gambar.jpg" alt="Contoh Gambar" loading="lazy">

Atribut loading="lazy" memberi sinyal ke browser untuk menunda proses fetch gambar tersebut. Fitur ini sudah didukung mayoritas browser modern berbasis Chromium dan engine terbaru lainnya.

Keuntungan pendekatan native ini adalah:

• Tidak membutuhkan JavaScript tambahan.
• Tidak perlu event listener scroll.
• Tidak memanipulasi DOM.
• Lebih stabil dan minim konflik.

Implementasi Lazy Load pada HTML Statis

Untuk website berbasis HTML statis, implementasi lazy load adalah yang paling sederhana. Tidak ada sistem template dinamis, tidak ada engine CMS, sehingga kontrol penuh ada di dalam file HTML.

Langkah dasarnya sangat langsung:

1. Buka file HTML yang berisi gambar.
2. Tambahkan atribut loading="lazy" pada setiap tag <img>.
3. Pastikan tetap menyertakan atribut width dan height.

Contoh implementasi yang direkomendasikan:

<img 
  src="diagram-arsitektur.jpg" 
  alt="Diagram Arsitektur Sistem"
  loading="lazy"
  width="800"
  height="450">

Mengapa width dan height penting? Karena tanpa dimensi tetap, browser tidak dapat mengalokasikan ruang sebelum gambar dimuat. Ini bisa menyebabkan layout shift atau pergeseran elemen saat gambar muncul.

Beberapa best practice tambahan:

• Jangan gunakan lazy load untuk gambar hero di atas fold.
• Gunakan loading="eager" untuk elemen utama.
• Uji melalui DevTools → Network → filter Img.

Pada HTML statis, testing sangat mudah dilakukan. Cukup buka halaman, aktifkan Network tab, lalu refresh halaman. Jika gambar di bawah tidak langsung muncul dalam daftar request, berarti lazy load bekerja dengan benar.

Pendekatan ini cocok untuk landing page sederhana, portofolio developer, atau dokumentasi teknis berbasis HTML murni.

Implementasi Lazy Load di WordPress (Tanpa Plugin Tambahan)

WordPress modern sebenarnya sudah mendukung lazy load secara default sejak versi 5.5. Secara otomatis, WordPress menambahkan atribut loading="lazy" pada gambar yang dihasilkan oleh editor Gutenberg maupun Classic Editor.

Namun, tetap penting melakukan verifikasi. Cara mengeceknya:

1. Buka salah satu halaman website.
2. Klik kanan → Inspect Element.
3. Cari tag <img> pada konten.
4. Pastikan terdapat atribut loading="lazy".

Jika atribut tidak muncul, kemungkinan tema melakukan override atau menggunakan custom rendering. Dalam kasus seperti ini, kamu bisa memastikan fungsi default WordPress aktif atau menambahkan filter berikut pada functions.php:

add_filter( 'wp_lazy_loading_enabled', '__return_true' );

Hal yang perlu diperhatikan di WordPress:

• Jangan gunakan plugin lazy load tambahan jika sudah aktif native.
• Pastikan featured image utama tidak dilazy-load.
• Periksa kompatibilitas dengan page builder seperti Elementor atau WPBakery.

WordPress memiliki sistem hook dan filter yang fleksibel, tetapi kadang terlalu banyak plugin justru memperlambat performa. Mengandalkan fitur native jauh lebih efisien dibanding memasang plugin tambahan hanya untuk lazy load.

Implementasi pada CMS Lain (Blogger, Drupal, Joomla)

Pada CMS selain WordPress, pendekatan implementasinya sedikit berbeda karena bergantung pada sistem templating masing-masing.

Blogger

Di Blogger, kamu perlu masuk ke:
Tema → Edit HTML

Cari tag <img> yang dihasilkan template, lalu tambahkan:

loading="lazy"

Jika template dinamis menggunakan ekspresi seperti:

<img expr:src='data:post.firstImageUrl'/>

Modifikasi menjadi:

<img expr:src='data:post.firstImageUrl' loading='lazy'/>

Drupal & Joomla

Pada CMS seperti Drupal dan Joomla:

1. Periksa apakah versi terbaru sudah mendukung lazy load native.
2. Pastikan template tidak menonaktifkan atribut tersebut.
3. Jika perlu, tambahkan override pada template file.

Sebagian CMS modern sudah menerapkan lazy load otomatis, tetapi tidak semuanya konsisten pada semua komponen.

Kunci utama implementasi pada CMS adalah:

• Hindari penggunaan modul lazy load berbasis JavaScript jika native sudah tersedia.
• Lakukan pengecekan manual melalui Inspect Element.
• Uji performa melalui Lighthouse atau PageSpeed Insights.

Pendekatan native selalu lebih stabil karena tidak menambah script eksternal.

Implementasi pada Custom Framework / Web App

Pada custom framework seperti Laravel, Next.js (SSR), atau Express berbasis server-side rendering, kontrol terhadap output HTML sepenuhnya ada di tangan developer.

Implementasinya cukup langsung:

<img src="/images/chart.png" alt="Data Visualization" loading="lazy" width="700" height="400">

Namun ada beberapa hal teknis yang perlu diperhatikan:

1. Server-Side Rendering (SSR)
   Pastikan HTML final yang dikirim ke client sudah mengandung atribut loading="lazy".
2. Single Page Application (SPA)
   Jika menggunakan React atau Vue tanpa SSR, pastikan komponen <img> tetap menghasilkan atribut tersebut saat render.
3. Dynamic Content
   Untuk gambar yang di-load melalui API, tetap gunakan atribut native pada elemen yang dirender.

Dalam konteks web app modern, lazy load native sangat membantu mengurangi blocking time di main thread. Tanpa tambahan library Intersection Observer, bundle size tetap kecil.

Pengaruh Lazy Load terhadap SEO

Lazy load tanpa JavaScript relatif aman untuk SEO selama implementasinya benar. Googlebot modern sudah berbasis Chromium, sehingga memahami atribut loading="lazy" secara native.

Beberapa poin penting terkait SEO:

1. Google Tetap Mengindeks Gambar
   Selama atribut src digunakan (bukan data-src tanpa fallback), gambar tetap bisa di-crawl.
2. Meningkatkan Kecepatan Halaman
   Kecepatan adalah ranking factor. Lazy load membantu mempercepat initial load.
3. Mengoptimalkan Crawl Budget
   Halaman yang ringan lebih efisien untuk diindeks, terutama pada website besar.

Namun perlu diingat:

• Jangan lazy load gambar utama artikel.
• Gunakan alt text yang deskriptif.
• Pastikan gambar tidak diblokir robots.txt.

SEO bukan hanya tentang keyword, tetapi juga pengalaman pengguna. Jika halaman terasa cepat dan responsif, kemungkinan bounce rate menurun. Sinyal ini bisa berdampak positif terhadap performa organik.

Dampak Lazy Load terhadap Core Web Vitals

Lazy load berpengaruh langsung pada beberapa metrik penting dalam Core Web Vitals.

Largest Contentful Paint (LCP)

Jika terlalu banyak gambar dimuat di awal, LCP bisa memburuk. Dengan lazy load, resource non-prioritas tidak mengganggu elemen utama.

Namun pastikan gambar terbesar di atas fold tidak dilazy-load.

Cumulative Layout Shift (CLS)

CLS sering terjadi ketika gambar tidak memiliki dimensi tetap. Solusinya:

• Selalu tambahkan width dan height.
• Gunakan rasio aspek konsisten.

Dengan ruang yang sudah dialokasikan, layout tidak akan “meloncat” saat gambar muncul.

Interaction to Next Paint (INP)

Semakin sedikit JavaScript, semakin ringan beban main thread. Lazy load tanpa JS mengurangi eksekusi script tambahan, sehingga interaksi terasa lebih responsif.

Untuk perangkat dengan RAM terbatas atau CPU kelas menengah, perbedaan ini bisa sangat terasa.

Perbandingan Lazy Load JS vs Tanpa JS

Aspek	Lazy Load JavaScript	Lazy Load Tanpa JS
Implementasi	Perlu library	Cukup atribut HTML
Beban CPU	Lebih tinggi	Lebih ringan
Risiko konflik	Bisa bentrok script	Minim konflik
Maintenance	Perlu update library	Stabil
SEO	Bergantung konfigurasi	Lebih aman native

Pendekatan tanpa JS lebih simpel dan mengikuti standar web modern. Untuk mayoritas website informatif, pendekatan ini sudah lebih dari cukup.

Kesimpulan

pada pembahasan kita di atas dapat kita simpulkan bahwa Optimasi lazy load gambar tanpa JavaScript adalah langkah strategis untuk meningkatkan performa website secara efisien dan modern. Dengan memanfaatkan atribut loading="lazy", pemuatan gambar menjadi lebih terkendali tanpa menambah kompleksitas sistem. Tidak ada library tambahan, tidak ada script berat, dan tidak ada risiko konflik antar plugin atau framework.

Pendekatan ini sangat cocok untuk berbagai jenis website mulai dari HTML statis, WordPress, CMS seperti Blogger dan Joomla, hingga custom web application. Selama implementasinya memperhatikan dimensi gambar dan prioritas elemen utama, hasilnya bisa signifikan terhadap kecepatan dan stabilitas halaman.

Artikel ini merupakan bagian seri artikel Programming dari KantinIT.com dan jika ada ide topik yang mau kami bahas silahkan komen di bawah ya..