Pengiriman Gambar berfokus INP 2025 — Menjaga performa terasa lewat koordinasi decode/priority/script

Pendahuluan

Meningkatkan LCP itu penting, tetapi pada 2024–2025 banyak tim melupakan INP (Interaction to Next Paint). Dekode gambar berat atau inisialisasi di main thread tepat di sekitar interaksi pertama bisa menunda respons. Saat “ledakan lazy‑load”, dekode gambar, dan inisialisasi skrip menumpuk setelah sentuh/gulir pertama, frame drop dan input terasa lambat.

Panduan ini menempatkan “hapus overserving dari layout” sebagai dasar, lalu mengatur praktik yang melindungi INP di decode/priority/lazy dan koordinasi skrip. Kami tunjukkan pembagian peran antara gambar hero dan di bawah lipatan, cara memakai Next.js (App Router) serta API browser, dan cara memverifikasi via RUM.

TL;DR

• Hentikan overserving lebih dulu (rancang sizes/srcset dari layout)
• Gunakan priority/fetchPriority="high" hanya untuk kandidat LCP; yang bukan LCP gunakan decoding="async" + lazy
• Hindari balapan muat/dekode/inisialisasi di sekitar input pertama (koordinasi waktu)
• Placeholder tidak boleh menyebabkan CLS (LQIP/BlurHash)

Detail sizes/srcset: Desain gambar responsif 2025 — Panduan praktis srcset/sizes dan Workflow pengubahan ukuran 2025 — Pangkas 30–70% bytes dengan berpikir mundur dari layout.

Mengapa gambar bisa memperburuk INP (model mental)

Browser berjalan “fetch → decode → layout/paint”. INP mengukur jeda dari input ke paint berikutnya. Jika dekode berat atau relayout berjalan tepat sebelum/sesudah penanganan input, INP memburuk.

• Ledakan lazy‑load setelah input memenuhi main thread dengan decode/layout
• Gambar oversize butuh waktu decode lebih lama (overserving merugikan LCP dan INP)
• Inisialisasi skrip (parallax, filter, Canvas) berbenturan dengan dekode

Solusi tiga serangkai: “ukuran tepat”, “prioritas selektif”, “pemisahan waktu (koordinasi)”.

Pola implementasi Next.js (App Router)

<Image
  src="/hero-1536.avif"
  alt="Hero produk"
  fill
  sizes="(max-width: 768px) 100vw, 768px"
  priority
  fetchPriority="high"
  decoding="sync"
/>

<Image
  src="/gallery-640.webp"
  alt="Galeri"
  width={640}
  height={360}
  sizes="(max-width: 768px) 100vw, 768px"
  loading="lazy"
  decoding="async"
/>

Catatan:

• Hanya kandidat LCP yang memakai sync/priority/high; lainnya tetap lazy/async
• sizes yang benar memungkinkan pemilihan sumber optimal (hindari overserving)

Lazy yang granular dan koordinasi skrip

• Hindari dekode/inisialisasi berat dalam jendela 300–500 ms sekitar input
• IntersectionObserver: preload sedikit sebelum terlihat, hindari tabrakan tepat sesudah input
• Inisialisasi panjang (Canvas/filter) lewat idle/scheduler

let lastInput = 0;
['pointerdown','keydown','wheel','touchstart'].forEach((t) => {
  addEventListener(t, () => (lastInput = performance.now()), { passive: true });
});

export function scheduleAfterInput(task: () => void) {
  const dt = performance.now() - lastInput;
  if (dt < 300) setTimeout(task, 300 - dt);
  else requestIdleCallback(() => task());
}

Placeholder dan CLS

Tentukan width/height atau aspect‑ratio, gunakan LQIP/BlurHash. Lihat Desain placeholder LQIP/SQIP/BlurHash — Panduan praktis 2025.

Pengukuran

• RUM (web‑vitals) untuk INP
• Long Task sesudah input
• Lighthouse Timespan untuk skenario interaksi

Ringkasan

Lindungi INP dengan “stop overserving”, “beri prioritas dengan benar”, dan “jauhkan pekerjaan berat dari jendela input”. Tambahkan koordinasi waktu pada upaya LCP, pantau dengan RUM, dan larang priority di luar hero lewat lint/CI.