المدونة
مقالات عملية مرتبة حسب المجال والمستوى، اختر المجال المناسب واقرأ من مستوى مبتدئ إلى محترف.
Web Workers في JavaScript: شغّل الحسابات الثقيلة بدون ما الواجهة تتعلّق
لو الواجهة بتتجمّد ثانية أو اتنين كل ما المستخدم يضغط زر، المشكلة مش الكود بطيء، المشكلة إنه شغّال على نفس thread رسم الواجهة. Web Workers بينقلوا الحسابات لـ thread موازي والواجهة تفضل مستجيبة. شرح للمستوى المتوسط بمثال المطبخ، كود JavaScript شغّال، أرقام INP قبل وبعد، وحالات لا تنفع فيها.
SQLite WAL: قلّل انتظار الكتابة من 420ms لـ 70ms
لو تطبيقك بيستخدم SQLite وفيه قراءات كثيرة مع كتابة متقطعة، تفعيل WAL مع checkpoint مضبوط يقلل انتظار الكتابة بدون نقل قاعدة البيانات لسيرفر كامل.
PgBouncer: قلّل اتصالات PostgreSQL من 600 لـ 80
لو كل instance في تطبيقك فاتح pool مستقل على PostgreSQL، PgBouncer transaction pooling يقلل عدد الاتصالات الفعلية ويخفف ضغط الذاكرة بدون تغيير كبير في الكود.
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 بدل ما يدفع كل مستخدم تكلفة لا يحتاجها.
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 بدون جسم استجابة. النتيجة: نقل أقل وضغط أخف على السيرفر.