Lazy-loading menangguhkan muat turun sesuatu sehingga ia benar-benar diperlukan — biasanya apabila ia hampir untuk scroll masuk ke pandangan. Ini mengecilkan payload awal supaya bahagian halaman yang kelihatan dimuatkan lebih pantas.
Browser melakukannya secara asli dengan satu atribut:
Sentiasa kekalkan width/height supaya browser menempah ruang (mengelak layout shift). Jangan sekali-kali lazy-load imej LCP anda — ia melengahkan perkara yang sedang diukur.
Pecahkan UI yang berat atau jarang digunakan (modal, carta) ke dalam chunk berasingan yang dimuatkan atas permintaan:
// Daripada static import yang dihantar dalam bundle utama:
const Chart = React.lazy(() => import("./Chart")); // chunk berasingan, diambil apabila dirender
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
import() dinamik memberitahu bundler untuk mencipta fail berasingan yang dimuat turun hanya apabila <Chart> mula-mula dirender.
Lazy-loading ialah kemenangan termudah dan berdaya-tuas tertinggi untuk halaman yang berat: kurang untuk dimuat turun di awal bermaksud LCP lebih pantas dan kurang JS untuk dihurai. Penemu duga mahu melihat anda tidak lazy-load imej hero — kesilapan klasik yang menjejaskan metrik yang cuba anda bantu.
Pustaka soalan temu duga IT dengan jawapan terperinci — daripada Junior hingga Senior.
Derma