ما هو Lazy Loading؟
التحميل الكسول هو تقنية تؤجل تحميل الصور أو العناصر حتى يصبح ظهورها ضروريًا على الشاشة، مما يقلل من:
- حجم الصفحة المبدئية
- عدد الطلبات عند التحميل الأول
- استهلاك البيانات للزوار
ما هو Code Splitting؟
تقسيم الكود هو عملية تقسيم ملفات JavaScript الكبيرة إلى ملفات أصغر يتم تحميلها عند الحاجة فقط، مما يؤدي إلى:
- تسريع التحميل الأولي
- تحسين التفاعلية
- تقليل وقت الانتظار
كيف تطبقها؟
- في HTML/JS:
- استخدم خاصية
loading="lazy"للصور وiframe
- استخدم خاصية
- في React أو Next.js:
- استخدم
React.lazy()وdynamic import()لتقسيم الكود
- استخدم
- استخدم أدوات Bundling مثل Webpack أو Vite لتفعيلها تلقائيًا
نصائح إضافية
- اختبر Lazy Loading في الأجهزة البطيئة.
- راقب الأداء باستخدام Lighthouse.
- لا تستخدم Lazy Loading للعناصر الحرجة (مثل الشعار أو البانر الرئيسي).
الخلاصة
دمج Lazy Loading وCode Splitting يعزز الأداء ويجعل موقعك أسرع وأكثر كفاءة.
ابدأ باستخدامها تدريجيًا وراقب النتائج.