Lazy-loading किसी चीज को download करना तब तक टाल देता है जब तक उसकी वास्तव में जरूरत न हो — आमतौर पर जब वह view में scroll होने वाली हो। यह initial payload को छोटा कर देता है ताकि page का दृश्य हिस्सा तेजी से load हो।
browser इसे एक attribute के साथ नेटिवली करता है:
हमेशा width/height रखें ताकि browser space आरक्षित कर ले (layout shift से बचाता है)। अपनी LCP image को कभी lazy-load न करें — यह उसी चीज में देरी करता है जो मापी जा रही है।
भारी या शायद ही कभी उपयोग होने वाली UI (modals, charts) को एक अलग chunk में split करें जो माँग पर load हो:
// 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 बनाने के लिए कहता है जो केवल तभी download होती है जब <Chart> पहली बार render होता है।
Lazy-loading एक भारी page के लिए सबसे सरल, सबसे अधिक लाभ देने वाली जीत है: पहले से कम download करने का मतलब है तेज LCP और parse करने के लिए कम JS। Interviewers यह देखना चाहते हैं कि आप hero image को lazy-load न करें — एक क्लासिक गलती जो उसी metric को नुकसान पहुँचाती है जिसकी आप मदद करने की कोशिश कर रहे हैं।
विस्तृत उत्तरों के साथ IT इंटरव्यू प्रश्नों की एक लाइब्रेरी — जूनियर से सीनियर तक।
दान करें