الهدف
بعد هالدرس تقدر تقيس 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.5s |
| INP (Interaction to Next Paint) | كم تستغرق response على click | < 200ms |
| CLS (Cumulative Layout Shift) | كم تتحرك العناصر بعد التحميل | < 0.1 |
أكثر مصادر المشاكل اللي تتكرر:
| المشكلة | الأثر | الحل |
|---|---|---|
| صور كبيرة مو محسّنة | LCP بطيء | next/image |
| JavaScript كبير في bundle | INP بطيء | next/dynamic |
| Fonts تحمّل بعد الـ render | CLS و LCP | next/font |
| كل شي يحمّل مرة وحدة | كل شي بطيء | Code splitting |