الهدف
بعد هالدرس تقدر تقيس سرعة ظهور المحتوى (LCP)، سرعة الاستجابة (INP)، وثبات التخطيط (CLS) في production بـ PostHog، تطبّق image optimization و code splitting و font optimization، وتحصّل Lighthouse score 90+ على الأقل.
ليش هذا الحين؟
Rate limiting جاهز — التطبيق محمي. الحين نتأكد إنه سريع. ترى performance مو feature اختيارية — Google يستخدم Core Web Vitals في الـ ranking، والمستخدمين يتركون الـ page لو أخذت أكثر من 3 ثوان عشان تحمّل. كل 100ms أبطأ = conversions أقل. هالدرس يعطيك العادات اللي تخلي تطبيقك سريع من البداية.
الفكرة
Core Web Vitals:
| Metric | معناه | Target |
|---|---|---|
| LCP (Largest Contentful Paint) | متى تظهر أكبر صورة/نص | أقل من 2.5 ثانية |
| INP (Interaction to Next Paint) | كم تستغرق response على click | أقل من 200 مللي ثانية |
| CLS (Cumulative Layout Shift) | كم تتحرك العناصر بعد التحميل | أقل من 0.1 |
أكثر مصادر المشاكل اللي تتكرر:
| المشكلة | الأثر | الحل |
|---|---|---|
| صور كبيرة مو محسّنة | LCP بطيء | next/image |
| JavaScript كبير في bundle | INP بطيء | next/dynamic |
| Fonts تحمّل بعد الـ render | CLS و LCP | next/font |
| كل شي يحمّل مرة وحدة | كل شي بطيء | Code splitting |