المدونة
مقالات عملية مرتبة حسب المجال والمستوى، اختر المجال المناسب واقرأ من مستوى مبتدئ إلى محترف.
Cache-Control و ETag للمبتدئ: امنع 73% من طلبات السيرفر بهيدر واحد
لو السيرفر بتاعك بيرجّع نفس اللوجو ونفس ملف الـ CSS لكل زائر آلاف المرات في اليوم، انت بتدفع تكلفة شغل مالوش لازمة. هيدر Cache-Control واحد بيخلّي المتصفح يحتفظ بالملف عنده فينزّل الطلبات الفعلية على السيرفر بنسبة توصل 73%. مقال للمبتدئ بمثال المكتبة، شرح علمي للفرق بين Cache-Control و ETag، إعدادات NGINX و Express قابلة للنسخ، أرقام مقاسة، 4 trade-offs، ومتى الكاش بيكون قرار غلط.
Debouncing وThrottling للمبتدئ: من 8400 طلب لـ 12 في الدقيقة
لو شريط البحث في موقعك بيرسل request لكل حرف، انت بتدفع تكلفة 700× اللي محتاجها. سطور JavaScript بـ debounce بينزّلوا الطلبات من 8400 لـ 12 في الدقيقة. مقال للمبتدئ بمثال البقّال، فرق debounce vs throttle، كود شغّال على JS الخالص، أرقام مقاسة من e-commerce عربي، 4 trade-offs خفية، ومتى debounce مضيعة وقت.
B-tree Indexes في PostgreSQL للمبتدئ: من 4.2 ثانية لـ 5 مللي ثانية بسطر واحد
لو SELECT بسيط على جدول مليونين صف بياخد 4 ثوانٍ، الـ DB مش بطيئة — انت بتقرا كل صف من الأول. CREATE INDEX في سطر واحد بينزّل الـ query لـ 5ms. مقال للمبتدئ بمثال دليل التليفونات، شرح علمي للـ B-tree من توثيق PostgreSQL 16، EXPLAIN ANALYZE قبل وبعد، 4 trade-offs خفية في الـ INSERT والمساحة، ومتى الـ Index بيكون مضيعة وقت أصلاً.
Brotli vs Gzip للمبتدئ: نزّل حجم JavaScript 24% بسطرين NGINX
لو موقعك بياخد 2.8 ثانية قبل ما الصفحة تظهر، السيرفر مش بطيء — انت بترسل 482KB من Gzip بدل 365KB من Brotli. شرح للمبتدئ بمثال شركة الشحن، تفعيل Brotli في NGINX بسطرين، أرقام مقاسة على bundle 1.2MB، 4 trade-offs خفية، ومتى Brotli بيكون اختيار غلط.
Font Subsetting للمبتدئ: نزّل الخط العربي من 480KB لـ 62KB بأمر واحد
لو موقعك العربي بياخد ثانيتين قبل ما النص يظهر، الـ Cairo Regular ملفه 480KB. pyftsubset في أمر واحد بياخد الأحرف اللي بتستخدمها فعلاً، بينزّل الحجم لـ 62KB، و FCP من 2.8 ثانية لـ 0.9 ثانية على شبكة 4G. شرح للمبتدئ بمثال المكتبة، أوامر قابلة للنسخ، أرقام مقاسة من e-commerce عربي، 4 trade-offs، ومتى Subsetting بيكون مضيعة وقت.
N+1 Query للمبتدئ: ليه dashboard بياخد 8 ثواني والحل في سطر ORM
لو فتحت dashboard بسيط فيه 50 صف ولاحظت إنه بياخد 8 ثواني، الـ DB مش بطيئة — أنت بترسل 51 query بدل query واحد. مقال للمبتدئ بمثال النادل والمطبخ، شرح علمي لـ Eager Loading من توثيق Django و Rails، كود قابل للنسخ في 4 ORMs، أرقام مقاسة على PostgreSQL 16 (1,840ms → 38ms، تحسّن 48×)، 4 trade-offs خفية، ومتى prefetch بيكون كارثة بدل ما يحسّن.
content-visibility: auto للمبتدئ — خاصية CSS واحدة تنزّل زمن الرسم من 1.2 ثانية لـ 90ms
سطرين CSS بدون JavaScript وبدون مكتبة بيخلوا صفحة فيها 600 كارت ترسم في 90ms بدل 1,180ms. شرح content-visibility: auto للمبتدئ مع مثال الفندق، تعريف علمي من web.dev و W3C، أرقام مقاسة على Chrome 131، 4 trade-offs خفية، ومتى الخاصية بتكون كارثة بدل ما تحسّن.
صور AVIF للمبتدئ: نزّل حجم صور موقعك 75% بدون فقد جودة
دليل عملي للمبتدئ لاستبدال JPEG و PNG بـ AVIF على موقعك. مع مثال محل البقالة للتقريب، شرح علمي للـ AV1 codec من Alliance for Open Media، أمر cavif واحد يحوّل 200 صورة في 4 دقائق، أرقام مقاسة على متجر إلكتروني عربي (LCP من 4.2 ثانية لـ 1.1 ثانية، فاتورة CDN -68%)، 4 trade-offs حقيقية، ومتى AVIF بيكون اختيار غلط.
Service Workers للمبتدئ: خلّي موقعك يفتح في 80ms حتى لو الإنترنت قطع
لو موقعك بياخد 3.4 ثانية يفتح على 4G ضعيف، Service Worker بـ 32 سطر JavaScript بيخلّي الزيارة الثانية تفتح في 80 مللي ثانية حتى من غير إنترنت. مقال للمبتدئ بمثال صيدلية الحي للتقريب، تعريف علمي من W3C، كود شغّال على Chrome 130، أرقام مقاسة من موقع e-commerce بـ 24 ألف زائر شهرياً (Lighthouse 47 → 96)، 4 trade-offs حقيقية، ومتى Service Worker بيكون مضيعة وقت.