Lazy-loading menunda pengunduhan sesuatu hingga benar-benar dibutuhkan — biasanya saat ia akan segera masuk ke viewport. Ini mengecilkan payload awal sehingga bagian halaman yang terlihat termuat lebih cepat.
Browser melakukannya secara native dengan satu atribut:
Selalu pertahankan width/height agar browser mencadangkan ruang (menghindari layout shift). Jangan pernah lazy-load gambar LCP-mu — itu menunda hal yang justru sedang diukur.
Pisahkan UI yang berat atau jarang dipakai (modal, chart) ke dalam chunk terpisah yang dimuat sesuai kebutuhan:
// Alih-alih static import yang ikut dalam main bundle:
const Chart = React.lazy(() => import("./Chart")); // chunk terpisah, di-fetch saat dirender
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
import() dinamis memberi tahu bundler untuk membuat file terpisah yang hanya diunduh ketika <Chart> pertama kali dirender.
Lazy-loading adalah kemenangan paling sederhana dengan leverage tertinggi untuk halaman yang berat: lebih sedikit yang harus diunduh di awal berarti LCP lebih cepat dan lebih sedikit JS untuk diparse. Pewawancara ingin melihatmu tidak melakukan lazy-load pada gambar hero — kesalahan klasik yang justru merugikan metrik yang ingin kamu bantu.
Perpustakaan pertanyaan wawancara IT dengan jawaban mendetail — dari Junior hingga Senior.
Donasi