المدونة
مقالات عملية مرتبة حسب المجال والمستوى، اختر المجال المناسب واقرأ من مستوى مبتدئ إلى محترف.
Event Loop في Node.js للمتوسط: ليه السيرفر بيتجمد و CPU لسه 30%
لو السيرفر بيرد 4 ثواني على endpoint بسيط و CPU بيقول 30%، Node.js مش بطيء — فيه عملية واحدة بتقفل event loop. مقال للمتوسط بمثال المخبز للمبتدئ، تعريف علمي من توثيق Node.js الرسمي و libuv، كود قياس delay بـ perf_hooks وحل بـ Worker Threads على Node.js 22، أرقام مقاسة على endpoint توقيع PDF (P95 من 4,180ms لـ 92ms)، 4 trade-offs، ومتى Worker Threads بتزود تعقيد بدون فايدة.
تحسين INP للمحترف: من 480ms إلى 95ms بـ scheduler.yield
INP بقى Core Web Vital أساسي من مارس 2024 وبيقيس أسوأ تأخير في تفاعلات الزائر مع صفحتك. لو P95 INP فوق 200ms، Google بيصنّف الصفحة Poor وبيأثر مباشرة على ترتيب البحث. هنا حل بـ scheduler.yield و isInputPending نزّل P95 من 480ms لـ 95ms على نفس الكود تقريبًا، بأرقام مقاسة من إنتاج على Pixel 6a/Chrome 130.
BRIN Indexes في PostgreSQL للمحترف: index لجدول 200 مليون صف في 1.2MB بدل 14GB
على جدول events فيه 200 مليون صف، B-tree index على created_at بياكل 14GB. BRIN Index بياخد 1.2MB ويرد على query آخر 24 ساعة في 38 مللي ثانية بدل 4.2 ثانية. شرح للمحترف بمثال السجل المالي للمبتدئ، تعريف علمي من توثيق PostgreSQL 16، كود قابل للنسخ، أرقام مقاسة على NVMe SSD، 4 trade-offs، ومتى لا تستخدمه.
N+1 Query للمتوسط: ليه dashboard بسيط بيعمل 1,200 استعلام في كل request
لو dashboard المنتجات بيرد في 6 ثواني وفاتورة DB قفزت 3x من غير ما traffic يزيد، الاحتمال الأكبر إن الـ ORM بيعمل 1,247 استعلام على كل request بدل واحد. مقال للمتوسط بمثال البيتزا للمبتدئ، تعريف علمي من توثيق Django و Hibernate، كود Prisma 5.18 شغّال على PostgreSQL 16 يقيس الفرق بين 4,200ms و 38ms، طريقة كشف المشكلة بـ pg_stat_statements، 3 trade-offs خفية في eager loading، ومتى include بيكلّف أكتر ما بيوفّر.
WebP للمبتدئ: وفّر 60% من حجم صور موقعك في 5 دقائق
لو موقعك بيحمّل 12 صورة JPEG على الصفحة الواحدة، إنت بتدفع 4.8MB من الـ bandwidth في كل زيارة. تحويل نفس الصور لـ WebP بينزّل الحجم لـ 1.9MB من غير فقدان جودة محسوس. مقال للمبتدئ بمثال شنطة السفر، تعريف علمي من Google، خطوات تحويل بـ cwebp، إعداد NGINX يخدم WebP مع fallback لـ JPEG، أرقام مقاسة، 4 trade-offs، ومتى ما تستخدمش WebP أصلاً.
Materialized Views في PostgreSQL للمتوسط: حوّل تقرير 4 دقائق لاستعلام 30 مللي ثانية
لو dashboard المبيعات بيحسب JOIN على 18 مليون صف كل ما المدير يفتح الصفحة، إنت بتدفع 4 دقائق انتظار + ضغط على الـ DB في كل زيارة. Materialized View بيحفظ نتيجة الاستعلام على القرص، فالـ dashboard بيرد في 30 مللي ثانية بدل 240 ثانية. مقال للمتوسط بمثال محل العصير للمبتدئ، تعريف علمي من توثيق PostgreSQL، كود قابل للنسخ على PostgreSQL 16، REFRESH CONCURRENTLY بدون قفل، أرقام مقاسة من إنتاج، 4 trade-offs حقيقية، ومتى لا تستخدمه أصلاً.
Brotli vs Gzip للمتوسط: وفّر 21% من حجم JavaScript بسطرين NGINX
لو سيرفرك لسه شغّال على Gzip ومقتنع إنه أفضل ضغط ممكن، بتدفع 21% bandwidth زيادة من غير سبب. Brotli على نفس الـ JS bundle بينزّل الحجم من 142KB لـ 112KB بسطرين في NGINX. مقال للمستوى المتوسط بمثال شنطة السفر للمبتدئ، تعريف علمي من RFC 7932، إعداد NGINX 1.25 شغّال، أرقام مقاسة من Cloudflare على 100 ألف موقع، 4 trade-offs حقيقية، ومتى لا تستخدم Brotli أصلاً.
Brotli Compression للمتوسط: نزّل حجم JavaScript bundle 24% بسطر NGINX
لو NGINX بتاعك لسه شغّال gzip بس، JavaScript bundle بحجم 1.1MB بيتحوّل لزائر مصري على 4G في 1.42 ثانية. Brotli بسطر تكوين بيخلّيه ينزل في 1.08 ثانية ويوفّر 110GB bandwidth شهريًا. مقال للمتوسط بمثال شنط السفر للمبتدئ، تعريف علمي من RFC 7932، إعداد NGINX 1.25 شغّال مع ngx_brotli، أرقام مقاسة على bundle React 2.8MB من زوار الخليج، 4 trade-offs حقيقية، ومتى Gzip لسه أنسب.
Service Worker للمبتدئ: خلّي موقعك يفتح بدون إنترنت في 40 سطر
لو الزائر فقد الإنترنت لحظة وشاف dinosaur Chrome، انت بتخسره فوراً. Service Worker بـ 40 سطر JavaScript بيخلّي موقعك يفتح بدون شبكة ويحمّل الزيارة الثانية في 180ms بدل 1.6 ثانية. مقال للمبتدئ بمثال محل البقالة، تعريف علمي من W3C، كود شغّال على Chrome 120+، أرقام مقاسة، 4 trade-offs حقيقية، ومتى لا تستخدمه أصلاً.