Lazy-loading کسی چیز کے download کو اس وقت تک ملتوی کر دیتا ہے جب تک اس کی واقعی ضرورت نہ ہو — عموماً جب وہ view میں scroll ہونے والی ہو۔ اس سے ابتدائی payload سکڑ جاتا ہے تاکہ page کا نظر آنے والا حصہ زیادہ تیزی سے load ہو۔
browser یہ صرف ایک attribute کے ساتھ خود کر لیتا ہے:
ہمیشہ width/height رکھیں تاکہ browser جگہ محفوظ رکھے (layout shift سے بچتا ہے)۔ اپنی LCP image کو کبھی lazy-load نہ کریں — یہ اُسی چیز میں تاخیر کرتا ہے جسے ناپا جا رہا ہے۔
بھاری یا کم استعمال ہونے والی UI (modals، charts) کو ایک الگ chunk میں تقسیم کریں جو طلب پر 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 انٹرویو سوالات کی ایک لائبریری — جونیئر سے سینئر تک۔
عطیہ دیں