الهدف
بعد هالدرس تعرف كيف تقيس أداء تطبيقك على جهاز حقيقي بـ Chrome DevTools، تحدد أكبر 3 مشاكل أداء في مشروعك، وتحلها.
ليش هذا الحين؟
Mobile CPU أبطأ 3-5× من desktop. 50ms تأخير ما تحسها على laptop تصير 250ms على تلفون متوسط. مستخدم يحس التطبيق بطيء = يحذفه. هالدرس يعطيك الأدوات عشان تقيس وتحل، مو تخمّن.
الفكرة
Mobile Performance Constraints:
- CPU أبطأ — خاصة على أجهزة mid-range (أكثر شي منتشر في السوق)
- RAM محدود — تطبيقك يتنافس مع تطبيقات ثانية
- تكلفة البيانات — bundle ثقيل = انتظار طويل
- Battery — كود مكثف يخلّص البطارية بسرعة
الأهداف:
- Cold start: الـ app يعرض أول شاشة في ≤2 ثانية
- Bundle: ≤200KB JavaScript (gzipped) للـ initial load
- FPS: 60fps أثناء scroll
3 مصادر أداء ضعيف في Capacitor apps:
- JavaScript bundle كبير (كل الكود ينحمّل دفعة وحدة)
- صور ثقيلة (JPEG 2MB لصورة 300px عرض)
- Re-renders زايدة (component يسوي render من جديد بدون سبب)