Optimizing بالعربي
مقالات عملية مرتبة حسب المجال والمستوى، اختر المجال المناسب واقرأ من مستوى مبتدئ إلى محترف.
تحميل خطوط الويب بدون وميض: اضبط font-display والتقليم
لو نص صفحتك يختفي أو يقفز وقت التحميل، المشكلة في طريقة تحميل الخط. اضبط font-display والتحميل المسبق والتقليم لتنزيل حجم الخط من 280KB لـ 68KB وتحسين LCP من 2.6s لـ 1.1s.
Brotli وGzip للمتوسط: قلّل حجم الاستجابة 77%
لو API بيرجع JSON حجمه 820KB لكل طلب، الضغط ممكن ينزله إلى 190KB مع Brotli أو 260KB مع Gzip. المقال يشرح الإعداد، القياس، والتكلفة الحقيقية على CPU.
List Virtualization للمتوسط: اعرض 10,000 صف بدون ما المتصفح يتجمّد
لو قائمة فيها آلاف الصفوف بتخلّي التمرير يتقطّع، المشكلة مش في حجم الداتا — انت بترسم 10,000 عنصر في الـ DOM مرة واحدة. الـ virtualization بيرسم اللي ظاهر بس (حوالي 20 صف) فيرجّع التمرير لـ 60fps. مقال للمتوسط بمثال نافذة القطار، شرح علمي لميزانية الإطار وLong Tasks، كود react-window شغّال، أرقام مقاسة، 4 trade-offs، ومتى متستخدمهوش، مع مصادر.
مشكلة N+1 Query للمتوسط: ليه صفحة المنتجات بتعمل 101 استعلام بدل واحد
صفحة بـ 100 منتج ممكن تعمل 101 استعلام بدل اثنين بسبب N+1 query. اكتشف المشكلة في دقيقة وحلّها بـ eager loading، وانزل بزمن التحميل من 1.4 ثانية لـ 47 مللي ثانية على PostgreSQL، بأمثلة Sequelize وPrisma وDjango ومصادر رسمية.
Worker Threads في Node.js للمتوسط: شغّل CPU-bound Tasks بدون ما تجمّد Event Loop
لو الـ Node.js process بيستقبل 1,200 طلب/ثانية بسلاسة، وأول ما يدخل طلب فيه parse PDF أو image resize الـ API كله يقف 3 ثواني، انت مش محتاج سيرفر أقوى. مقال للمتوسط بمثال المطبخ للمبتدئ، شرح علمي للـ Event Loop والـ V8 isolates من توثيق Node.js 22، كود قابل للنسخ في 12 سطر، أرقام مقاسة من خدمة image processing بـ 32K طلب/يوم (P95 من 2,840ms لـ 180ms، throughput من 420 لـ 1,160 req/sec)، 4 trade-offs خفية في الـ RAM والـ structured clone والـ startup time، ومتى Worker Threads بيكون اختيار غلط.
Critical CSS للمتوسط: نزّل First Paint من 2.8s لـ 0.6s
لو موقعك بياخد 2.8 ثانية قبل ما المستخدم يشوف أول pixel، الـ stylesheet هو اللي بيوقف الرسم. Critical CSS بيستخرج قواعد above-the-fold ويضمّنها inline، فينزّل First Contentful Paint لـ 0.6 ثانية. مقال للمتوسط بمثال المطعم للمبتدئ، شرح علمي للـ render-blocking من توثيق web.dev، كود Penthouse في 18 سطر شغّال على Node.js 20+، أرقام مقاسة من متجر عربي بـ 24K زيارة يومياً، 4 trade-offs خفية، ومتى Critical CSS بيكون مضيعة وقت.
useMemo و useCallback للمتوسط: متى React يبقى أبطأ بـ 3× بسبب الـ Memoization
لو حاطط useMemo على كل filter و map في تطبيق React بنية إنك بتسرّع، انت غالبًا بتدفع تكلفة المقارنة بدون مكسب. مقال للمتوسط بمثال الدفتر للمبتدئ، شرح علمي من توثيق React 19، كود قابل للنسخ، أرقام مقاسة من dashboard فيه 200 صف (0.08ms ← 0.14ms، أي 75% أبطأ مع useMemo)، 4 trade-offs خفية، ومتى useMemo يبقى قرار غلط نهائي.
Memory Leaks في Node.js: اكتشف وأصلح بـ Heap Snapshots في 3 خطوات
لو الـ Node.js process بتاعك بياكل RAM كل ساعة لحد ما يموت بـ OOM، الكود مش بيتسرّب — هو بيحتفظ بمرجع لكائن مفروض ينتهي. مقال للمتوسط بمثال صاحب البيت للمبتدئ، شرح علمي للـ V8 heap، 3 خطوات capture/diff/analyze بـ Chrome DevTools، حالة event listeners حقيقية، أرقام مقاسة (من 1.4GB لـ 180MB)، 4 trade-offs، ومتى Heap Snapshot يكون اختيار غلط.
تقسيم الكود للمتوسط: نزّل أول تحميل JavaScript لـ 210KB
أغلب المواقع بتبعت كل كود التطبيق دفعة واحدة، فالمستخدم بيستنى ثواني في شاشة فاضية. تقسيم الكود بيقسّم الـ JavaScript لأجزاء تتحمّل عند الطلب — مقال للمتوسط بمثال المطعم، كود React شغّال، أرقام مقاسة (1.83MB ← 210KB)، 4 trade-offs، ومتى متستخدمهوش.