Lazy-loading एखादी गोष्ट प्रत्यक्ष गरज पडेपर्यंत — सहसा ती view मध्ये scroll होणार असते तेव्हा — download करणे पुढे ढकलते. यामुळे initial payload लहान होतो त्यामुळे page चा दृश्यमान भाग जलद load होतो.
browser हे एका attribute ने native रीत्या करते:
width/height नेहमी ठेवा जेणेकरून browser जागा राखून ठेवते (layout shift टाळते). तुमची LCP image कधीही lazy-load करू नका — ते मोजल्या जाणाऱ्या गोष्टीलाच विलंबित करते.
भारी किंवा क्वचित वापरले जाणारे UI (modals, charts) मागणीनुसार load होणाऱ्या वेगळ्या chunk मध्ये विभागा:
// Instead of a static import that ships in the main bundle:
const Chart = React.lazy(() => import("./Chart")); // separate chunk, fetched when rendered
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
dynamic import() bundler ला एक वेगळी file तयार करण्यास सांगते जी फक्त <Chart> प्रथम render होते तेव्हाच download होते.
भारी page साठी lazy-loading हा सर्वात सोपा, सर्वाधिक फायदा देणारा उपाय आहे: आधी कमी download म्हणजे जलद LCP आणि parse करायला कमी JS. मुलाखतकारांना पहायचे असते की तुम्ही hero image lazy-load करत नाही — जी तुम्ही सुधारण्याचा प्रयत्न करत असलेल्या metric ला हानी पोहोचवणारी एक classic चूक आहे.
सविस्तर उत्तरांसह IT मुलाखत प्रश्नांचे ग्रंथालय — Junior पासून Senior पर्यंत.
देणगी द्या