الهدف
بنهاية الدرس تشغّل Lighthouse وتقرأ النتائج، تصلح أشهر مشكلة أداء (الصور)، وتفهم كيف التخزين المؤقت عبر HTTP (HTTP caching) و React Query يقللون الـ API calls.
ليش هذا الحين؟
ترى app بطيء = خسارة. فيه دراسات تقول إن كل ثانية تتأخر فيها الصفحة تقلل الـ conversions بـ 7%. بس المشكلة الأكبر هي إن الناس يحاولون "يحسّنون" الأداء بدون قياس — يضيعون وقت في مكان ماكو فيه مشكلة أصلا. القاعدة: قس أولا، وبعدين حسّن.
الفكرة
أداء App = ثلاث أسئلة:
- كم وقت يحتاج المستخدم عشان يشوف شي مفيد؟ (LCP)
- كم وقت يستجيب الـ app لأول تفاعل؟ (INP)
- الصفحة تتحرك بشكل مفاجئ؟ (CLS)
Lighthouse هو tool مجاني في DevTools يعطيك score من 100 لكل هذي المقاييس.
أكبر 3 أسباب للبطء في الـ Solo Apps:
- صور كبيرة بدون تحسين — صورة 2MB تقتل الأداء. Next.js
<Image />يحلها تلقائيا. - Database queries بطيئة — query بدون فهرس (index) تمسح الجدول كله. الـ index يحسّن الوضع 100x.
- API calls وايد — component يطلب نفس البيانات كذا مرة. الـ Caching يحل هذا.
Caching = تحفظ نتيجة عملية عشان تستخدمها مرة ثانية.
ثلاث مستويات:
- Browser cache: المتصفح يحفظ ملفات CSS/JS/images محليا
- HTTP cache headers: السيرفر يقول للـ browser/شبكة توصيل المحتوى (CDN) "احفظ هذا لـ X وقت"
- React Query staleTime: ما يكرر نفس الـ API call لو البيانات "طازجة"