Banyak pemilik website menambahkan lazy loading gambar demi mempercepat waktu muat halaman. Niatnya baik, tapi eksekusi yang keliru justru bisa menjebak performa situs. Masalah paling umum terjadi saat gambar hero di bagian atas ikut ditunda pemuatannya. Padahal gambar itu biasanya jadi elemen yang paling menentukan skor loading.
Begitu gambar utama ditunda, waktu Largest Contentful Paint otomatis ikut molor. Skor Core Web Vitals pun turun ke kategori merah meski niat awalnya justru ingin mempercepat halaman. Banyak plugin caching atau tema website menerapkan lazy loading secara otomatis ke semua gambar tanpa pengecualian. Akibatnya, gambar yang seharusnya tampil instan malah menunggu giliran seperti gambar lain di bawahnya.
Artikel ini membahas lazy loading gambar secara teknis, termasuk penyesuaian arah kebijakan Google di 2026. Anda akan melihat kapan gambar sebaiknya ditunda dan kapan harus dimuat instan. Pembahasan ini juga menyentuh atribut teknis seperti fetchpriority dan dimensi gambar. Tujuannya, agar optimasi kecepatan tidak malah menciptakan masalah baru.
Kenapa Lazy Loading Gambar Bisa Jadi Bumerang untuk LCP
Gambar Hero yang Tidak Sengaja Ikut Ditunda
Largest Contentful Paint biasanya diwakili oleh gambar atau blok teks terbesar yang tampil di awal. Jika elemen ini kebetulan berupa gambar dan diberi atribut lazy, browser sengaja menunda pengambilannya. Penundaan ini bisa menambah waktu tunggu setengah detik hingga lebih dari satu detik. Dampaknya langsung terlihat di laporan PageSpeed Insights sebagai resource load delay.
Bahkan Situs Google Sendiri Pernah Terjebak
Kasus ini bukan cuma milik website kecil, developers.google.com pun pernah mengalaminya. CMS yang dipakai secara otomatis menerapkan lazy loading ke seluruh gambar tanpa terkecuali. Developer Advocate Google sempat mengingatkan bahwa gambar yang langsung terlihat nyaris pasti akan memperlambat LCP. Kejadian ini jadi pengingat bahwa otomatisasi tanpa pengecualian tetap berisiko.
Cara Kerja Lazy Loading di Balik Layar
Native Loading vs Intersection Observer
Browser modern sudah mendukung atribut loading lazy secara native tanpa perlu JavaScript tambahan. Cukup tulis loading lazy pada tag img, dan browser otomatis menunda gambar yang berada di luar layar. Sebelum dukungan native meluas, developer biasa memakai Intersection Observer untuk memantau posisi elemen. Cara lama ini masih relevan untuk kebutuhan khusus, misalnya gambar latar CSS atau efek transisi.
Kenapa Dukungan Browser Sekarang Sudah Cukup Luas
Dukungan native untuk atribut ini kini mencakup lebih dari sembilan puluh persen browser modern. Artinya, kebanyakan situs tidak lagi butuh library JavaScript tambahan untuk kebutuhan dasar. Library eksternal baru relevan jika butuh fitur lanjutan seperti efek blur atau placeholder animasi. Untuk kebutuhan standar, atribut native jauh lebih ringan dan mudah dirawat.
Perbandingan Native Loading dan Library JavaScript
| Metode | Kelebihan | Keterbatasan |
| Native loading lazy | Ringan, tanpa dependensi tambahan | Kontrol animasi terbatas |
| Intersection Observer | Bisa dikustomisasi penuh | Butuh kode tambahan dan maintenance |
| Library pihak ketiga | Fitur siap pakai seperti blur-up | Menambah ukuran file JavaScript |
Aturan Google 2026: Gambar Above-the-Fold Wajib Dikecualikan
Kenapa Pengecualian Ini Ditegaskan Ulang
Panduan resmi Google menyebut gambar yang kemungkinan besar terlihat saat halaman dimuat sebaiknya tidak diberi lazy loading. Penegasan ini muncul setelah banyak situs, termasuk milik Google sendiri, terjebak masalah serupa. Ambang LCP yang baik tetap 2,5 detik, tapi lazy loading yang keliru sering membuat situs gagal. Fokus 2026 bukan pada aturan baru, melainkan penegasan praktik yang sudah lama dianjurkan.
Tanda situs terlalu agresif menerapkan lazy loading gambar:
- Elemen LCP ditandai delayed di laporan PageSpeed Insights
- Gambar hero baru muncul setelah scroll pengguna dimulai
Fetchpriority: Sinyal Tambahan untuk Gambar Prioritas
Selain menghindari lazy loading pada gambar utama, Google juga merekomendasikan atribut fetchpriority high. Atribut ini memberi sinyal ke browser agar gambar tersebut diunduh lebih dulu dibanding elemen lain. Kombinasi loading lazy dengan fetchpriority high pada gambar yang sama justru tidak masuk akal. Keduanya punya tujuan berlawanan, sehingga sebaiknya dipilih salah satu sesuai posisi gambar.
Lazy Loading Gambar yang Benar Tanpa Merusak Core Web Vitals
Tetapkan Dimensi Gambar untuk Mencegah Layout Shift
Setiap tag gambar sebaiknya diberi atribut width dan height, apa pun status lazy loading-nya. Browser memakai rasio ini untuk menyiapkan ruang kosong sebelum gambar benar-benar dimuat. Tanpa dimensi yang jelas, elemen di sekitarnya ikut bergeser begitu gambar muncul. Pergeseran ini langsung tercatat sebagai skor Cumulative Layout Shift yang buruk.
Threshold dan Prioritas Gambar Sesuai Posisi
Idealnya, dua hingga empat gambar pertama di viewport dimuat tanpa atribut lazy sama sekali. Gambar setelah itu baru diberi loading lazy karena posisinya jelas berada di luar layar awal. Tim jasa web Surabaya biasanya mengatur ambang ini lewat audit manual, bukan sekadar pengaturan bawaan tema. Pendekatan ini memastikan setiap gambar dimuat sesuai kebutuhan sebenarnya, bukan pukul rata.
Tahapan audit lazy loading gambar yang disarankan:
- Identifikasi elemen LCP lewat PageSpeed Insights atau Search Console
- Hapus atribut lazy dari gambar yang termasuk area tersebut
- Tambahkan fetchpriority high khusus untuk gambar tersebut
- Terapkan loading lazy hanya untuk image di bawah viewport awal
Kecepatan Gambar sebagai Bagian dari Strategi Konten Jangka Panjang
Lazy loading gambar tetap jadi teknik optimasi yang bermanfaat jika diterapkan secara selektif. Masalah muncul bukan dari teknik itu sendiri, melainkan penerapan yang menyamaratakan semua gambar. Aturan Google 2026 menegaskan ulang bahwa gambar above-the-fold perlu perlakuan berbeda. Dengan audit yang tepat, kecepatan halaman dan pengalaman visual bisa berjalan beriringan.
Deus Code kerap membantu audit gambar semacam ini sebagai bagian dari layanan jasa web Surabaya untuk berbagai klien. Selain sisi teknis, tim kami juga menyelaraskan hasil optimasi dengan strategi jasa SEO Surabaya secara menyeluruh. Anda tidak perlu memahami setiap baris kode untuk mendapatkan situs yang cepat dan stabil. Cukup mulai dari diskusi kebutuhan, dan detail teknisnya bisa kami tangani.
Pertanyaan Umum Seputar Kecepatan Gambar
- Apakah lazy loading membuat gambar tidak terindeks Google?
Tidak, selama memakai atribut native, Google tetap bisa merender dan mengindeks gambar tersebut. - Apakah semua gambar carousel boleh dibuat lazy?
Sebaiknya tidak untuk slide pertama, karena biasanya langsung terlihat saat halaman dibuka. - Apakah optimasi gambar bagian dari layanan SEO Deus Code?
Ya, audit gambar dan kecepatan halaman biasanya masuk dalam paket jasa SEO Surabaya kami.
