Lazy-loading (tembel yükleme), bir şeyin indirilmesini gerçekten gerekli olana kadar erteler — genellikle görünüme kaydırılmak üzereyken. Bu, başlangıç yükünü küçültür, böylece sayfanın görünür kısmı daha hızlı yüklenir.
Tarayıcı bunu tek bir öznitelikle yerel olarak yapar:
Tarayıcının yer ayırması (layout shift'i önlemek) için width/height'ı her zaman koruyun. LCP görselinizi asla lazy-load etmeyin — ölçülen şeyi geciktirir.
Ağır veya nadiren kullanılan UI'yi (modal'lar, grafikler) talep üzerine yüklenen ayrı bir parçaya (chunk) bölün:
// Ana bundle'da gelen statik bir import yerine:
const Chart = React.lazy(() => import("./Chart")); // ayrı parça, render edilince getirilir
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
Dinamik import(), bundler'a yalnızca <Chart> ilk render edildiğinde indirilen ayrı bir dosya oluşturmasını söyler.
Lazy-loading, ağır bir sayfa için en basit, en yüksek kaldıraçlı kazançtır: baştan indirilecek daha az şey, daha hızlı LCP ve ayrıştırılacak daha az JS demektir. Görüşmeciler, hero görselini lazy-load etmediğinizi görmek ister — yardım etmeye çalıştığınız metriği bozan klasik bir hata.
Junior'dan Senior'a detaylı cevaplarla bir BT mülakat soruları kütüphanesi.
Bağış Yap