Optimizing بالعربي
مقالات عملية مرتبة حسب المجال والمستوى، اختر المجال المناسب واقرأ من مستوى مبتدئ إلى محترف.
103 Early Hints: حمّل CSS قبل ما HTML يجهز
لو السيرفر بياخد 900ms يجهز HTML، 103 Early Hints يخلي المتصفح يبدأ تحميل CSS والخطوط قبل وصول الصفحة النهائية.
Responsive Images: قلّل صورة LCP من 1.2MB لـ 180KB
لو صورة الهيرو هي سبب بطء أول تحميل، استخدم AVIF وWebP مع picture/srcset بدل إرسال نفس الصورة الكبيرة لكل الشاشات.
Vite Bundle Split: نزّل JavaScript الأولي من 1.8MB لـ 620KB
لو أول تحميل في تطبيق Vite بطيء بسبب صفحة تقارير أو محرر غني، افصل الكود الثقيل بـ dynamic import وmanualChunks بدل ما يدفع كل مستخدم تكلفة لا يحتاجها.
Database Index بالعربي: ليه استعلام بياخد 8 ثواني والثاني 12ms
لو نفس استعلام SELECT بياخد 8 ثواني على جدول مليونين صف، ومرة تانية بـ 12ms بعد سطر واحد، السبب غالبًا في غياب Index. شرح مبتدئ بمثال الكتاب، التعريف العلمي للـ B-tree، EXPLAIN ANALYZE حقيقي، وtrade-offs الكتابة.
N+1 في GraphQL: DataLoader بيخفّض الاستعلامات من 1200 لـ 8
لو الـ GraphQL endpoint بيرمي 1200 SQL query لما تطلب قائمة 100 منتج بتفاصيل كاتيجوري ومؤلف، أنت بتدفع تكلفة N+1. DataLoader بيجمع الـ keys في batch واحد ويرجّع الردود في 8 استعلامات بدل 1200.
Redis Pipeline: انزل 1000 قراءة من 850ms لـ 95ms
لو API عندك بيقرأ مئات المفاتيح من Redis في request واحد، المشكلة غالبًا مش Redis. المشكلة إنك بتدفع زمن الشبكة 1000 مرة بدل مرة أو دفعات قليلة.
ETag للـ API: قلّل نقل JSON المتكرر من 8MB لـ 530KB
لو نفس شاشة المنتجات بتسحب نفس JSON كل دقيقة، ETag يخلي الطلبات المتكررة ترجع 304 بدون جسم استجابة. النتيجة: نقل أقل وضغط أخف على السيرفر.
صفحة طويلة بطيئة؟ content-visibility ينزل الرندر من 232ms لـ 30ms
لو صفحة المنتجات أو المقالات الطويلة بتتقل قبل ما المستخدم يشوف آخرها، استخدم content-visibility لتأجيل رندر الأجزاء خارج الشاشة بدون إعادة بناء الواجهة.
CI بطيء؟ npm cache في GitHub Actions ينزل install لـ 55 ثانية
لو `npm ci` بياكل 4 دقائق من كل Pull Request، تفعيل cache في `actions/setup-node` يقلل وقت التثبيت المتكرر بدون لمس كود التطبيق.