يؤجّل التحميل الكسول (Lazy-loading) تنزيل شيء ما حتى تُحتاج إليه فعلًا — عادةً عندما يوشك على الدخول إلى نطاق الرؤية عند التمرير. هذا يقلّص الحمولة الأولية بحيث يُحمَّل الجزء المرئي من الصفحة أسرع.
يفعل المتصفح ذلك أصلًا بخاصية واحدة:
أبقِ دائمًا على width/height بحيث يحجز المتصفح المساحة (يتجنّب إزاحة التخطيط). لا تحمّل صورة LCP بشكل كسول أبدًا — فذلك يؤخّر الشيء نفسه الذي يُقاس.
قسّم الواجهة الثقيلة أو نادرة الاستخدام (النوافذ المنبثقة، الرسوم البيانية) إلى حزمة منفصلة (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>
يخبر import() الديناميكي أداة الحزم (bundler) بإنشاء ملف منفصل لا يُنزَّل إلا عند أول عرض لـ <Chart>.
التحميل الكسول هو أبسط مكسب وأعلاه رافعةً لصفحة ثقيلة: فأقل تنزيل مسبقًا يعني LCP أسرع وقدرًا أقل من JS للتحليل. يريد القائمون على المقابلات أن يروك لا تحمّل صورة البطل بشكل كسول — وهو خطأ كلاسيكي يضرّ بالمقياس الذي تحاول مساعدته.
مكتبة من أسئلة مقابلات تقنية المعلومات مع إجابات مفصّلة — من المبتدئ إلى المتقدم.
تبرع