Lazy Loading Gambar Blogger: Jangan Tunda Hero Artikel

Ilustrasi AI tentang keputusan pemuatan gambar utama dan gambar pendukung; bukan hasil benchmark atau tangkapan produk nyata.

Lazy loading berguna ketika artikel Blogger memuat beberapa gambar pendukung yang baru terlihat setelah pembaca menggulir halaman. Namun, menambahkan loading="lazy" ke semua gambar bukan langkah yang tepat. Gambar utama yang langsung tampak saat halaman dibuka—dan berpotensi menjadi elemen Largest Contentful Paint (LCP)—sebaiknya tidak ditunda. Tutorial ini membantu Anda memilih atribut per gambar, memeriksa HTML yang benar-benar tersimpan, dan menguji hasilnya tanpa menyunting tema.

Tentukan peran gambar sebelum mengubah atribut

Buka satu draf yang memiliki gambar utama dan setidaknya satu gambar pendukung. Jangan mulai dari asumsi bahwa urutan gambar di editor selalu sama dengan posisi akhirnya. Header, iklan, ringkasan, atau susunan tema dapat mengubah bagian yang terlihat pada layar pertama.

Kelompokkan gambar menjadi dua:

• Gambar awal: tampil tanpa menggulir pada ukuran layar yang sedang diuji. Gambar ini dimuat secara normal; atribut loading="eager" boleh ditulis secara eksplisit, tetapi perilakunya sama dengan nilai bawaan.
• Gambar di bawah layar awal: baru dibutuhkan setelah pembaca bergerak ke bagian berikutnya. Ini kandidat untuk loading="lazy".

Dokumentasi web.dev tentang lazy loading tingkat browser mengingatkan agar gambar yang mungkin berada di viewport awal, terutama gambar LCP, tidak diberi lazy loading. Nilai lazy memberi petunjuk kepada browser untuk menunda pengambilan gambar sampai mendekati viewport; jarak tepatnya ditentukan browser, bukan penulis artikel.

Masukkan gambar lewat editor Blogger lebih dahulu

Unggah gambar dengan tombol Sisipkan gambar seperti biasa. Menurut Bantuan Blogger, gambar yang diunggah dapat dikompresi dan dioptimalkan untuk web. Karena Blogger dapat membentuk ulang URL dan markup, gunakan alamat yang dihasilkan editor, bukan URL sementara atau berkas lokal.

Atur caption, ukuran tampilan, dan perataan sebelum berpindah ke Tampilan HTML. Jika gambar utama juga dipakai oleh data terstruktur artikel, Anda dapat membaca panduan memeriksa penulis, tanggal, dan gambar pada schema Article Blogger. Atribut loading tidak menggantikan pemeriksaan relevansi gambar, alt text, atau metadata.

Tambahkan loading pada elemen img yang tepat

Di Tampilan HTML, cari elemen <img> berdasarkan teks alternatif atau nama berkas. Jangan menghapus atribut yang dibuat Blogger jika Anda belum memahami fungsinya. Contoh berikut hanya memperlihatkan bagian penting dan memakai URL placeholder:

<!-- Gambar utama yang terlihat saat halaman dibuka -->
<img
  src="URL-GAMBAR-UTAMA"
  alt="Dashboard editorial portal berita pada layar laptop"
  width="1200"
  height="675"
  loading="eager">

<!-- Gambar pendukung yang berada jauh di bawah -->
<img
  src="URL-GAMBAR-PENDUKUNG"
  alt="Contoh susunan label untuk tiga kanal berita"
  width="1200"
  height="675"
  loading="lazy">

Ganti kedua URL dan alt text dengan data gambar Anda. Nilai width dan height harus mengikuti rasio intrinsik berkas, bukan sekadar lebar kolom artikel. Browser menggunakan kedua angka itu untuk menyediakan ruang sebelum gambar selesai dimuat. CSS responsif dapat tetap mengecilkan gambar di layar sempit.

Jangan mencampur loading="lazy" dengan URL asli yang dipindahkan ke data-src kecuali tema memang mempunyai skrip yang teruji untuk pola tersebut. Google menjelaskan bahwa gambar yang relevan perlu muncul melalui URL pada atribut src atau srcset di HTML yang dirender; implementasi juga tidak boleh menunggu tindakan klik atau gulir agar konten dapat ditemukan. Rujuk panduan lazy-loaded content Google Search Central.

Jangan memperlakukan lazy sebagai tombol percepat

Atribut lazy menunda sumber daya yang belum diperlukan. Ia tidak mengecilkan ukuran berkas, memperbaiki gambar buram, atau otomatis membuat halaman lulus Core Web Vitals. Jika gambar utama terlambat ditemukan, menundanya justru dapat menambah keterlambatan pemuatan. Panduan optimasi LCP web.dev menyarankan agar sumber gambar LCP dapat ditemukan dari HTML awal dan tidak diberi lazy loading.

Karena itu, lakukan perubahan kecil:

1. Biarkan gambar utama dimuat normal.
2. Tambahkan loading="lazy" hanya pada gambar pendukung yang jelas berada di bawah layar awal.
3. Pertahankan src, alt text, serta dimensi.
4. Simpan draf, lalu periksa HTML dan pratinjau lagi.

Bila artikel hanya mempunyai satu gambar utama, tidak ada kewajiban menambahkan lazy loading. Begitu pula jika gambar kedua sudah tampak di layar awal pada ponsel; posisi aktual lebih penting daripada nomor urut gambar.

Periksa hasil di desktop dan ponsel

Setelah menyimpan draf, muat ulang editor dan buka Tampilan HTML. Pastikan nilai loading masih berada pada elemen yang dimaksud. Langkah ini menangkap kasus ketika editor menormalkan markup atau ketika atribut ditempel pada gambar yang salah.

Lanjutkan dengan Pratinjau:

1. Periksa gambar utama pada tampilan desktop dan ponsel. Pastikan tidak ada ruang kosong yang salah, pemotongan, atau rasio yang berubah.
2. Gulir ke gambar pendukung dan pastikan gambar muncul tanpa memerlukan klik.
3. Buka DevTools, pilih tab Network, saring jenis Img, lalu muat ulang halaman. Bandingkan waktu permintaan gambar awal dan gambar pendukung.
4. Pada panel Elements, pastikan HTML hasil render masih mempunyai src, alt text, dimensi, dan atribut loading yang diharapkan.

Network hanya memberi bukti untuk perangkat, viewport, cache, dan kondisi jaringan saat itu. Jangan mengubah satu rekaman lokal menjadi klaim bahwa halaman pasti lebih cepat bagi semua pembaca. Untuk evaluasi yang lebih luas, bedakan data lab dan data lapangan serta uji URL yang sama sebelum dan sesudah perubahan.

Hubungkan keputusan dengan kualitas gambar

Lazy loading hanyalah satu bagian dari pengelolaan gambar. Google Search Central menyarankan penggunaan elemen HTML <img>, URL fallback pada src, format yang didukung, gambar berkualitas, serta nama berkas dan alt text yang deskriptif. Baca praktik terbaik SEO gambar Google untuk konteks penemuan gambar. Jangan mengulang keyword di alt text atau memakai logo generik sebagai pengganti ilustrasi yang benar-benar mewakili artikel.

Sebelum menerapkan pola ini ke banyak postingan, gunakan satu draf sebagai contoh. Periksa juga hasilnya pada pengujian template Blogger portal berita, terutama tampilan ponsel dan stabilitas ruang gambar. Setelah bukti sesuai, catat aturan editorial sederhana: gambar awal dimuat normal, sedangkan gambar pendukung di bawah layar awal dapat memakai lazy loading.

Checklist singkat sebelum draf dianggap selesai

• Posisi gambar dinilai pada pratinjau, bukan hanya dari urutan editor.
• Gambar utama atau kandidat LCP tidak memakai loading="lazy".
• Gambar pendukung tetap memiliki src, alt text, width, dan height.
• HTML yang tersimpan diperiksa kembali setelah editor dimuat ulang.
• Pratinjau desktop dan ponsel menampilkan semua gambar tanpa interaksi tambahan.
• Hasil Network dicatat sebagai bukti lokal, bukan jaminan skor atau ranking.

Dengan keputusan per gambar, lazy loading menjadi alat yang terukur. Anda menunda sumber daya yang belum diperlukan sambil menjaga gambar utama tetap mudah ditemukan browser dan segera tersedia bagi pembaca.