Optimizing بالعربي
مقالات عملية مرتبة حسب المجال والمستوى، اختر المجال المناسب واقرأ من مستوى مبتدئ إلى محترف.
HTTP/3 و QUIC للمتوسط: ليه موقعك بياخد 800ms على 4G وإزاي توصّله لـ 240ms
لو LCP بياخد 3.4 ثانية على شبكة موبايل رغم CDN و HTTP/2، المشكلة مش في الكود — هي في TCP نفسه. HTTP/3 على QUIC بيشيل round-trips من أول طلب، وبينزّل TTFB من 820ms لـ 240ms. مقال للمتوسط بمثال طلبية الكافيه، شرح من RFC 9000، إعداد NGINX 1.25 شغّال، 4 trade-offs خفية، ومتى HTTP/3 يبقى مضيعة وقت.
INP و scheduler.yield للمتوسط: نزّل زمن الكليك من 320ms لـ 80ms
لو زرار dashboard بياخد 320ms قبل ما يستجيب، الموقع مش بطيء — هو شغّال long task بيقفل main thread. scheduler.yield في Chrome 129 بتنزّل INP لـ 80ms بدون Web Worker، وبتحفظ ترتيبك في Search لأن INP بقى رسمي في Core Web Vitals من مارس 2024.
Virtual Scrolling في React للمتوسط: اعرض 100 ألف صف بدون ما يتجمد المتصفح
لو جدول React بيتجمّد لما البيانات تعدّي 5,000 صف، المشكلة مش في React — هي إنك بترسم 100 ألف DOM node والمتصفح بيموت. Virtual Scrolling بـ 12 سطر ومكتبة react-window 6KB بيرسم 18 صف فقط على الشاشة والباقي وهمي. مقال للمتوسط بمثال السينما للمبتدئ، شرح علمي للـ DOM rendering pipeline، كود JSX شغّال على React 19 و react-window 1.8، أرقام مقاسة على Chrome 131 (Initial render من 4.18 ثانية لـ 38ms، FPS من 4 لـ 60، RAM من 1.2GB لـ 38MB)، 4 trade-offs حقيقية بما فيهم Ctrl+F و a11y، ومتى Virtual Scrolling بيكون كارثة بدل ما يحسّن.
Table Partitioning في PostgreSQL للمتوسط: من 4.2 ثانية لـ 12ms على جدول 80 مليون صف
لو جدول الطلبات في PostgreSQL وصل 80 مليون صف وأي SELECT آخر 30 يوم بياخد 4.2 ثانية، الـ DB مش ضعيفة — هي بتفحص الجدول كله. Declarative Partitioning في PostgreSQL 16 بيقسّم الجدول لـ partitions شهرية بحيث الـ query يضرب 2.6 مليون صف بدل 80 مليون، ويرجع في 12 مللي ثانية. مقال للمتوسط بمثال أرشيف الفواتير للمبتدئ، تعريف علمي من توثيق PostgreSQL 16، كود SQL قابل للنسخ، أرقام مقاسة من إنتاج e-commerce، 4 trade-offs، ومتى Partitioning بيكون كارثة بدل ما يحسّن.
Read Replicas في PostgreSQL للمتوسط: وزّع 80% من القراءات بدون تعديل سطر كود
لو سيرفر PostgreSQL الإنتاج بيرفع CPU لـ 92% الساعة 8 الصبح ومعظم الطلبات SELECT بسيطة، الـ DB مش ضعيفة — هي بتخدم القراءة والكتابة من نفس الـ instance. Read Replica واحد بيستقبل 80% من القراءات بدون لمس كود التطبيق، وبيخفّض P95 latency من 480ms لـ 38ms. مقال للمتوسط بمثال المكتبة العامة للمبتدئ، شرح علمي للـ Streaming Replication من توثيق PostgreSQL 16، إعداد primary + standby قابل للنسخ، توجيه القراءات بـ pgpool-II، أرقام مقاسة من API بـ 12K طلب/دقيقة، 4 trade-offs حقيقية، ومتى Read Replica بتكون مضيعة وقت.
Service Worker Caching للمتوسط: خلّي موقعك يفتح في 0.4 ثانية للزائر العائد
لو الزائر اللي بيرجع لموقعك بيستنّى 2.8 ثانية كأنه أول زيارة، Service Worker بـ 40 سطر JavaScript بينزّل الزمن لـ 0.4 ثانية ويخلّي الموقع يفتح حتى من غير إنترنت. مقال للمتوسط بمثال أمين المخزن للمبتدئ، تعريف علمي من Service Worker API spec، 3 استراتيجيات caching بكود شغّال على Workbox 7، أرقام مقاسة من e-commerce عربي بـ 84,000 زائر شهريًا (P75 من 2.8s لـ 0.4s، bounce rate -38%، فاتورة CDN -54%)، 4 trade-offs خفية، ومتى Service Worker بيكون كارثة بدل ما يفيد.
PgBouncer للمتوسط: شغّل 5,000 اتصال متزامن على Postgres بـ 512MB ذاكرة
لو Postgres بيرفض اتصالات جديدة عند 100 مستخدم ويرمي "too many clients already"، السيرفر مش ضعيف — Postgres بيشغّل process منفصل لكل اتصال. PgBouncer بـ 12 سطر config بيخلّيك تشغّل 5,000 client متزامن بنفس السيرفر. مقال للمتوسط بمثال شبابيك البنك للمبتدئ، شرح علمي للـ pooling modes الثلاثة، ملف pgbouncer.ini شغّال، أرقام مقاسة من API FastAPI (الـ throughput من 2,400 لـ 14,800 طلب/دقيقة)، 4 trade-offs حقيقية، ومتى لا تستخدمه أصلاً.
PgBouncer للمتوسط: من 800 اتصال على PostgreSQL لـ 25 بدون تعديل سطر كود
لو السيرفر بيرمي FATAL: too many connections وانت لسه عند 800 user، PostgreSQL مش بطيء. PgBouncer في 12 سطر إعداد بيختصر 800 اتصال لـ 25، بدون تعديل تطبيقك. مثال شباك البنك للمبتدئ، شرح transaction pooling، أرقام إنتاج (RAM 5.6GB → 280MB، توفير 410$ شهريًا)، 4 trade-offs، ومتى لا تستخدمه.
Redis Pipelining للمتوسط: 1000 عملية من 240ms لـ 8ms بسطر واحد
لو سكربتك بيعمل 1000 SET على Redis في 240 مللي ثانية، Redis مش بطيء — انت بتدفع تذكرة شبكة لكل عملية. Pipelining في redis-py بـ 3 سطور بينزّل الزمن لـ 8 مللي ثانية على نفس Redis. مقال للمتوسط بمثال طلبات الديليفري للمبتدئ، تعريف علمي من توثيق Redis، كود Python شغّال على redis-py 5.0 و Redis 7.4، أرقام مقاسة على AWS r6g.large، 4 trade-offs خفية، ومتى Pipelining بيكسرلك المنطق بدل ما يحسّنه.