Lazy Loading Gambar dengan Claude Code: Panduan Aman untuk Pemula

Lazy loading gambar bukan berarti menambahkan loading="lazy" ke semuaimg. Jika Claude Code ikut menunda gambar hero, Largest Contentful Paint, yaitu waktu saat konten utama terlihat, bisa memburuk. Jika semua thumbnail produk, galeri, dan artikel terkait dimuat di awal, pengguna mobile membayar bandwidth untuk gambar yang mungkin tidak pernah dilihat.

Panduan ini memberi pola aman untuk pemula: nativeloading="lazy", hero atau kandidat LCP tetap eager, decoding, fetchpriority, dimensi untuk mencegah CLS, responsivesrcset/sizes, IntersectionObserver untuk kasus lanjut, placeholder, jebakan SEO/UX, pengukuran, dan prompt Claude Code yang lebih aman. Dasarnya dicek dengan referensi MDN untukimg element, Intersection Observer API, web.dev tentangbrowser-level image lazy loading, Core Web Vitals, dan Chrome tentangLCP request discovery.

Untuk strategi yang lebih lengkap, baca jugaoptimasi gambar, skeleton loading, danoptimasi performa.

Aturan utama

Jangan lazy-load gambar yang langsung terlihat. Gunakan lazy untuk gambar di bawah viewport pertama, lalu pastikan semua gambar punya ruang stabil melaluiwidth danheight, atauaspect-ratio yang setara.

Lokasi gambar	loading	fetchpriority	decoding	Guardrail
Hero atau kandidat LCP	eager atau omit	Pertimbangkan high	sync atau async	Ditemukan dari HTML awal
Diagram tengah artikel	lazy	auto	async	Dimensi tetap ada
Grid produk setelah layar pertama	lazy	auto	async	Pakai srcset dan sizes
Carousel atau infinite scroll	Tergantung	auto	async	IntersectionObserver bila perlu

Kesalahan pemula adalah mengira “gambar besar berarti harus lazy”. Pertanyaan yang benar: apakah gambar itu diperlukan untuk tampilan bermakna pertama? Panduan LCP Chrome menekankan bahwa gambar LCP harus mudah ditemukan, diberi prioritas sesuai, dan tidak memakailoading=lazy.

HTML siap pakai

Gambar pertama adalah hero, jadi memakai eager dan prioritas tinggi. Gambar kedua berada lebih bawah, jadi memakai lazy native dan async decoding.

<img
  class="hero-image"
  src="/images/hero/product-dashboard-1200.webp"
  srcset="
    /images/hero/product-dashboard-640.webp 640w,
    /images/hero/product-dashboard-1200.webp 1200w
  "
  sizes="100vw"
  alt="Tampilan pertama dashboard produk"
  width="1200"
  height="675"
  loading="eager"
  fetchpriority="high"
  decoding="sync"
/>

<img
  class="article-image"
  src="/images/articles/setup-step-800.webp"
  srcset="
    /images/articles/setup-step-400.webp 400w,
    /images/articles/setup-step-800.webp 800w
  "
  sizes="(max-width: 720px) 100vw, 720px"
  alt="Screenshot langkah konfigurasi"
  width="800"
  height="450"
  loading="lazy"
  decoding="async"
/>

decoding="async" adalah hint untuk browser agar decoding gambar tidak terlalu menghambat rendering lain. Ini cocok untuk gambar artikel dan thumbnail. Untuk hero, ukursync danasync sebelum menetapkan standar.

Mencegah CLS dengan CSS

CLS berarti Cumulative Layout Shift. Bahasa sederhananya: seberapa jauh halaman melompat saat orang membaca atau menekan tombol. Jika gambar tidak punya tinggi cadangan, teks, iklan, form, dan CTA terdorong. Ini masalah UX dan konversi.

.image-frame {
  aspect-ratio: 16 / 9;
  background: #f3f4f6;
  overflow: hidden;
}

.image-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  .image-frame > img {
    transition: opacity 180ms ease-out;
  }
}

Jika CMS tahu ukuran asli gambar, simpan dan kirim ke template. Untuk gambar eksternal yang ukurannya tidak pasti, pakai container stabil denganaspect-ratio, lalu sesuaikan gambar denganobject-fit.

Komponen React kecil

Saat meminta Claude Code mengubah React, taruh aturan di komponen. Gambar prioritas menjadi eager, gambar konten menjadi lazy, dan semua dimensi wajib ada.

type SmartImageProps = {
  src: string;
  srcSet?: string;
  sizes?: string;
  alt: string;
  width: number;
  height: number;
  priority?: boolean;
  className?: string;
};

export function SmartImage({
  src,
  srcSet,
  sizes,
  alt,
  width,
  height,
  priority = false,
  className,
}: SmartImageProps) {
  const loading = priority ? "eager" : "lazy";
  const fetchPriority = priority ? "high" : "auto";
  const decoding = priority ? "sync" : "async";

  return (
    <span
      className={`image-frame ${className ?? ""}`}
      style={{ aspectRatio: `${width} / ${height}` }}
    >
      <img
        src={src}
        srcSet={srcSet}
        sizes={sizes}
        alt={alt}
        width={width}
        height={height}
        loading={loading}
        fetchPriority={fetchPriority}
        decoding={decoding}
      />
    </span>
  );
}

Komponen ini sengaja sederhana. Ia tidak menyembunyikan gambar penting di balik JavaScript dan bisa diadaptasi ke Next.js, Astro, atau komponen CMS.

Use case produk nyata

Use case pertama adalah grid ecommerce. Beberapa produk awal mungkin terlihat di layar pertama, jadi jangan semua dibuat lazy. Rekomendasi, ulasan, riwayat, dan item di layar kedua lebih cocok. Contoh gagal: memberifetchpriority="high" ke semua thumbnail. Browser kehilangan sinyal mana yang benar-benar penting.

Use case kedua adalah artikel tutorial atau media. Gambar cover sering menjadi kandidat LCP, jadi tetap eager. Screenshot langkah, diagram setelah code block, dan kartu artikel terkait bisa lazy. Contoh gagal: memakai placeholder blur sebagai background tetapi mengosongkanalt gambar asli. Kalau gambar punya makna, SEO dan screen reader butuh teks.

Use case ketiga adalah dashboard SaaS. Avatar, logo pelanggan, thumbnail laporan, dan screenshot audit bisa muncul dalam daftar panjang. Lazy loading untuk baris offscreen membantu, tetapi jangan menunda grafik utama, ilustrasi onboarding, atau gambar dekat CTA. Untuk mengukur CTA dan revenue event, hubungkan denganimplementasi analytics.

Use case keempat adalah galeri atau carousel horizontal. Lazy native sering cukup, tetapi IntersectionObserver berguna saat ada scroll container khusus, slide tersembunyi, atau jarak preload yang ingin dikontrol.

Kapan memakai IntersectionObserver

Mulai dari lazy native. Pakai IntersectionObserver jika perlu memuat 300px sebelum terlihat, menggantidata-src, menghapus class placeholder, atau mengamati container scroll tertentu.

<img
  class="js-lazy-image"
  src="/images/placeholders/report-thumb.svg"
  data-src="/images/reports/report-2026.webp"
  data-srcset="/images/reports/report-2026.webp 1x"
  alt="Thumbnail laporan bulanan"
  width="640"
  height="360"
/>

const lazyImages = document.querySelectorAll("img[data-src]");

function loadImage(img) {
  img.src = img.dataset.src;

  if (img.dataset.srcset) {
    img.srcset = img.dataset.srcset;
  }

  img.removeAttribute("data-src");
  img.removeAttribute("data-srcset");
}

if ("IntersectionObserver" in window) {
  const observer = new IntersectionObserver((entries, currentObserver) => {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) return;

      loadImage(entry.target);
      currentObserver.unobserve(entry.target);
    });
  }, {
    rootMargin: "300px 0px",
    threshold: 0.01,
  });

  lazyImages.forEach((image) => observer.observe(image));
} else {
  lazyImages.forEach(loadImage);
}

Dimensi tetap harus ada. Gambar dengandata-src bisa tidak pernah dimuat jika JavaScript gagal, jadi jangan gunakan pola ini untuk gambar utama produk, hero, atau gambar penting untuk SEO.

Pengukuran

Core Web Vitals melacak LCP, INP, dan CLS. Batas baik yang umum adalah LCP 2,5 detik atau kurang, INP 200 ms atau kurang, dan CLS 0,1 atau kurang. Pada lazy loading gambar, LCP dan CLS paling mudah berubah.

npm install web-vitals

import { onCLS, onINP, onLCP } from "web-vitals";

onLCP((metric) => {
  const lastEntry = metric.entries.at(-1);
  console.log("LCP", metric.value, lastEntry?.element);
});

onCLS((metric) => {
  console.log("CLS", metric.value, metric.entries);
});

onINP((metric) => {
  console.log("INP", metric.value, metric.entries);
});

Di Chrome DevTools, cek apakah elemen LCP adalah hero yang benar, apakah request gambar ditemukan cepat dari HTML, dan apakah gambar menyebabkan layout shift. Setelah publish, bandingkan PageSpeed Insights, Search Console, dan analytics sendiri.

Prompt aman untuk Claude Code

Claude Code bisa mengganti banyak file dengan cepat. Berikan scope, rules, dan verification dulu.

{
  "goal": "Menambahkan lazy loading gambar yang aman",
  "scope": [
    "Hanya ubah gambar body artikel dan daftar produk",
    "Jangan lazy-load gambar first viewport atau kandidat LCP"
  ],
  "rules": [
    "Pertahankan alt, width, dan height di setiap img",
    "Gunakan loading=\"lazy\" dan decoding=\"async\" di bawah fold",
    "Gunakan loading=\"eager\" atau omit loading untuk hero",
    "Gunakan fetchpriority=\"high\" maksimal pada satu kandidat LCP"
  ],
  "verification": [
    "Periksa MDX dan code fences",
    "Cek LCP dan CLS di DevTools",
    "Pastikan di mobile gambar, teks, dan CTA tidak overlap"
  ]
}

Minta Claude Code melaporkan gambar mana yang tidak dibuat lazy dan alasannya. Optimasi yang baik sering berisi perubahan yang sengaja tidak dilakukan.

Checklist kegagalan

• Hero, gambar utama produk, atau gambar CTA atas dibuat lazy.
• width danheight hilang.
• Semua gambar diberifetchpriority="high".
• Variansrcset punya rasio berbeda tanpa art direction.
• Background CSS dianggap bisa memakai atributloading.
• Diagram bermakna diberialt kosong.
• Gambar penting bergantung penuh pada JavaScript.
• Placeholder lebih dominan daripada konten asli.

CTA dan catatan verifikasi

Lazy loading gambar bukan sekadar skor. Ia memengaruhi kedalaman baca, visibilitas CTA, browsing produk, dan aksi pertama di aplikasi. Untuk kerja pribadi, mulai daricheatsheet Claude Code gratis. Untuk prompt dan template review yang bisa dipakai ulang, bukahalaman produk. Untuk tim yang ingin menyatukan performance, SEO, analytics, dan monetisasi, gunakantraining dan konsultasi Claude Code.

Dalam refresh ini, sumber resmi di atas dicek ulang dan contoh dibangun dengan aturan praktis: tentukan dulu gambar mana yang tidak boleh lazy. Di workflow Masa, pola stabilnya adalah hero eager, screenshot bawah lazy, semua gambar punya dimensi,srcset untuk mobile, dan prompt Claude Code yang sejak awal memuat failure modes serta tugas pengukuran.