Lazy-loading ले कुनै कुरा वास्तवमै आवश्यक नहुञ्जेल — सामान्यतया यो view मा scroll हुन लाग्दा — download गर्न ढिलो गर्छ। यसले सुरुको payload घटाउँछ ताकि page को देखिने भाग छिटो load होस्।
Browser ले एउटै attribute सँग यो natively गर्छ:
Browser ले ठाउँ आरक्षित गर्न सधैं width/height राख्नुहोस् (layout shift जोगाउँछ)। आफ्नो LCP image कहिल्यै lazy-load नगर्नुहोस् — यसले मापन भइरहेको कुरालाई नै ढिलो गर्छ।
भारी वा विरलै प्रयोग हुने UI (modal, chart) लाई on demand 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 हुन्छ।
Lazy-loading भारी page का लागि सबैभन्दा सरल, उच्च-लाभको जीत हो: अगाडि कम download गर्नुको अर्थ छिटो LCP र parse गर्न कम JS। Interviewer हरू तपाईंले hero image lazy-load नगरेको देख्न चाहन्छन् — जुन तपाईंले सुधार्न खोजेको metric लाई नै बिगार्ने classic गल्ती हो।
विस्तृत उत्तरसहित IT अन्तर्वार्ता प्रश्नहरूको पुस्तकालय — जुनियरदेखि सिनियरसम्म।
दान गर्नुहोस्