Bagaimana cara menerapkan lazy loading pada gambar dan iframe tanpa merusak SEO?
Cara teraman untuk menerapkan lazy loading adalah menggunakan atribut HTML bawaan `loading="lazy"`. Ini memastikan browser menangani penundaan pemuatan, sementara mesin pencari (seperti Googlebot) tetap dapat melihat URL sumber gambar dan mengindeksnya dengan benar. Hindari penggunaan JavaScript kompleks yang menyembunyikan konten dari crawler.
Lazy loading adalah teknik performa yang menunda pemuatan sumber daya non-kritis (seperti gambar dan iframe) sampai benar-benar dibutuhkan, biasanya saat pengguna menggulir halaman ke area tersebut. Ini secara dramatis meningkatkan kecepatan muat awal halaman dan mengurangi penggunaan data. Untuk SEO, kekhawatirannya adalah apakah mesin pencari dapat menemukan dan mengindeks konten 'lazy' tersebut. Dulu, lazy loading berbasis JavaScript sering menyembunyikan URL dari bot. Sekarang, praktik terbaiknya adalah menggunakan 'native lazy loading' dengan menambahkan atribut `loading="lazy"` pada tag `<img>` dan `<iframe>`. Cara ini didukung oleh semua browser modern dan sepenuhnya ramah SEO, karena Googlebot tetap bisa melihat atribut `src`. Jika Anda harus menggunakan library JavaScript untuk mendukung browser lama, pastikan library tersebut mengikuti pedoman Google dengan menggunakan Intersection Observer API dan menyediakan fallback `<noscript>`. Yang terpenting, jangan pernah menerapkan lazy load pada gambar yang berada di area 'above the fold' (terlihat langsung saat halaman dimuat), seperti logo atau gambar hero, karena ini akan memperburuk skor Largest Contentful Paint (LCP) Anda.
Panduan Langkah demi Langkah
Identifikasi Konten di Bawah Lipatan (Below-Fold)
Tentukan gambar dan iframe mana yang tidak terlihat saat halaman pertama kali dimuat.
Tambahkan Atribut Loading
Masukkan `loading="lazy"` ke dalam tag HTML pada semua gambar dan iframe di bawah lipatan yang telah diidentifikasi.
Kecualikan Media Utama (Hero)
Pastikan gambar hero utama dan konten apa pun di bagian atas halaman TIDAK menggunakan lazy loading.
Tambahkan Dimensi Gambar
Selalu sertakan atribut width dan height untuk mencegah pergeseran tata letak (layout shift) saat gambar dimuat perlahan.
Uji Pengindeksan
Gunakan GSC URL Inspection tool untuk memverifikasi bahwa Google tetap dapat 'melihat' gambar yang Anda beri lazy load.
Pro Tips
- Gabungkan lazy loading dengan atribut 'decoding="async"' untuk performa yang lebih baik lagi.
- Gunakan placeholder gambar kualitas rendah (LQIP) atau blok warna solid untuk meningkatkan pengalaman pengguna selama proses muat.
- Uji lazy loading secara khusus di perangkat mobile, karena batas 'fold' di sana jauh lebih pendek.
- Pastikan lazy loading tidak mengganggu stylesheet 'Print' Anda.
Bagaimana pSeoMatic Membantu
Mesin audit pSeoMatic memeriksa ketepatan implementasi lazy loading di seluruh situs Anda. Kami menyoroti 'gambar LCP' yang salah diterapkan lazy loading (yang memperlambat metrik paint Anda) dan mengidentifikasi atribut lazy-load yang hilang pada media berat di bawah lipatan, memastikan situs Anda tetap cepat sekaligus terindeks sepenuhnya.
Coba pSeoMatic gratisPertanyaan Terkait
Dapatkah Google mengindeks gambar dengan lazy loading?
Ya, Googlebot dapat mengindeks gambar yang menggunakan atribut native `loading="lazy"` atau metode JS yang ramah SEO.
Apakah lazy loading membantu skor PageSpeed?
Sangat membantu. Teknik ini mengurangi bobot awal halaman dan meningkatkan Time to Interactive (TTI).
Haruskah saya menerapkan lazy load pada logo?
Tidak, logo biasanya berada di atas lipatan dan harus segera dimuat agar brand langsung terlihat.
Panduan Terkait
Siap untuk mempraktikkan ini?
pSeoMatic menghasilkan ribuan halaman yang dioptimalkan untuk SEO dari data Anda.