Prioritas pengiriman gambar 2025 — fetchpriority, preload

Ringkasan

LCP memengaruhi SEO/UX. Gunakan fetchpriority, rel=preload, dan sumber tepat agar LCP < 2,5 dtk.

Aturan

• Satu gambar LCP; hindari perubahan ukuran terlambat.
• fetchpriority="high" untuk LCP; low untuk offscreen.
• preload harus cocok URL yang sama.

TL;DR

Stabilkan LCP dengan: fetchpriority pada gambar LCP, satu preload yang benar, srcset/sizes akurat, dimensi eksplisit, dan cache/CDN yang konsisten.

Aturan 1 — Prioritas LCP eksplisit

• Tambahkan fetchpriority="high" pada gambar LCP.
• Untuk gambar di atas lipatan dengan layout tetap: loading="eager", decoding="async".
• Selalu tentukan width/height untuk cegah CLS.

Aturan 2 — Satu preload yang tepat

• Gunakan <link rel="preload" as="image" imagesrcset="…" imagesizes="…">.
• Hindari banyak preload; HTTP/2/3 sudah multiplexed.
• Gunakan URL yang sama persis dengan <img>.

Aturan 3 — Ukuran responsif konsisten

• sizes harus mencerminkan CSS nyata; hindari distribusi berlebihan.
• Gunakan <picture> untuk art‑direction bila perlu.

Aturan 4 — Lazy‑load di luar layar

• loading="lazy" untuk gambar non‑kritis.
• Preload n+1 saat elemen hampir masuk viewport (IntersectionObserver).

Aturan 5 — Cache/CDN

• Fingerprint aset: Cache-Control: public, max-age=31536000, immutable.
• Perhatikan Vary/Accept jika negosiasi format di CDN.

Strategi per template

• Beranda: LCP tunggal, prioritas ketat, font swap.
• Artikel: sampul prioritas; galeri lazy.
• Listing: thumbnail lazy; preload progresif.

Pengukuran & debug

• Lab: Lighthouse/WebPageTest (LCP, CLS, TBT).
• Field: CrUX/GA4 p75 LCP.
• DevTools: kolom Priority, konsistensi preload, ukuran yang diminta.