Prioritas Gambar & Preload yang Tepat (2025)

“Gambar apa yang dilihat pertama kali” harus dikirim secepat dan seakurat mungkin—itulah fondasi LCP dan UX.

TL;DR

• Hanya 1 kandidat LCP per halaman; pasang fetchpriority="high" untuk gambar itu saja

• Gunakan <link rel="preload" as="image"> bila perlu (jangan berlebihan)

• Responsive: selaraskan imagesrcset/imagesizes dengan layout dan aspect-ratio

• Non‑LCP: loading="lazy" + decoding="async" agar INP tetap sehat

• CDN: rancang Vary: Accept agar distribusi AVIF/WebP tidak bentrok

• Tautan internal: Pengiriman Gambar berfokus INP 2025 — Menjaga performa terasa lewat koordinasi decode/priority/script, AVIF vs WebP vs JPEG XL 2025 — Perbandingan praktis berbasis pengukuran, Gambar Responsif era DPR tinggi & pemanfaatan image-set 2025

Alur keputusan (kasus)

1. Masuk hero/first view? → Ya: kandidat LCP
2. Menempati area besar di viewport? → Ya: pertimbangkan fetchpriority="high"
3. Perlu mencegah render‑blocking? → Kritis: pakai preload
4. Jenis gambar (art/foto)? → Sediakan imagesrcset + sizes, selaraskan dengan CSS
5. Kekhawatiran INP? → Tunda/prioritas rendah; tunda inisialisasi JS

Cuplikan implementasi

<!-- Kandidat LCP: kombinasikan fetchpriority dan preload secara wajar -->
<link
  rel="preload"
  as="image"
  href="/hero/landing.avif"
  imagesrcset="/hero/landing-800.avif 800w, /hero/landing-1200.avif 1200w, /hero/landing-1600.avif 1600w"
  imagesizes="(max-width: 768px) 92vw, 1200px"
  type="image/avif"
>
<img
  src="/hero/landing-1200.avif"
  srcset="/hero/landing-800.avif 800w, /hero/landing-1200.avif 1200w, /hero/landing-1600.avif 1600w"
  sizes="(max-width: 768px) 92vw, 1200px"
  width="1200" height="630"
  fetchpriority="high"
  decoding="async"
  alt="Gambar utama"
  style="aspect-ratio: 1200/630; object-fit: cover"
>

Jebakan umum dan penangkalnya

• Preload semua gambar → kontra‑produktif; batasi hanya pada kandidat LCP
• sizes tidak diisi → pemilihan gambar kebesaran → LCP memburuk; isi sesuai lebar render
• fetchpriority berlebihan → prioritas terpecah; prinsipnya satu gambar per halaman
• Hanya optimasi di CSS → penetapan layout terlambat; amankan dengan aspect-ratio

Desain distribusi untuk INP/LCP

• LCP: fetchpriority="high" + imagesrcset/imagesizes yang tepat
• Non‑LCP: loading="lazy"/decoding="async"; preload menjelang interaksi saja
• CDN: Vary: Accept + kunci cache yang tepat; cek prioritas HTTP/2

Daftar cek

• [ ] Satu kandidat LCP; preload minimum
• [ ] sizes sesuai lebar render; srcset bertingkat memadai
• [ ] aspect-ratio untuk CLS nol; object-fit untuk cropping
• [ ] Uji regresi LCP/INP setelah perubahan

FAQ

• Q: Mana yang “lebih kuat”: fetchpriority atau preload? A: Fungsinya beda—hint prioritas vs. pengambilan awal. Gabungkan hanya untuk kandidat LCP.

• Q: preload mematikan srcset? A: Sertakan imagesrcset/imagesizes juga pada elemen <link rel="preload">.

Ringkasan

Merancang “gambar mana, kapan, seberapa cepat” membuat LCP dan persepsi stabil. Mulailah dari identifikasi kandidat LCP dan tiga serangkai fetchpriority/preload/sizes.