Optimizing بالعربي
مقالات عملية مرتبة حسب المجال والمستوى، اختر المجال المناسب واقرأ من مستوى مبتدئ إلى محترف.
async و defer للمبتدئ: ليه سكربت واحد بيوقف ظهور صفحتك 2.6 ثانية
لو صفحتك بتفضل بيضا ثوانٍ قبل ما تظهر، غالبًا وسم script واحد في الـ head هو السبب. المقال يشرح للمبتدئ ليه جافاسكريبت بيوقف الرسم بمثال المطعم، ثم علميًا، مع كود قابل للنسخ، الفرق بين async و defer، أرقام قبل وبعد (2.6s ← 0.9s)، trade-offs، ومتى لا تستخدمه، مع مصادر رسمية.
الإدخال الدفعي: أدخِل 100 ألف صف في ثوانٍ بدل دقائق
إدخال 100 ألف صف صفًا بصف بياخد دقايق لأن كل صف رحلة كاملة للسيرفر. اجمعهم في دفعات وامسح أغلب الزمن. شرح للمبتدئ بمثال بسيط، كود SQL وPython شغّال، أرقام تقديرية، trade-offs، ومتى لا تستخدمه، مع مصادر رسمية.
الـ Index في قواعد البيانات: سرّع استعلامك 500 مرة بسطر واحد
لو البحث عن مستخدم بالإيميل بياخد نص ثانية على مليون صف، المشكلة مش في السيرفر. سطر CREATE INDEX واحد بينزّل الزمن من 480 لـ 0.9 مللي ثانية. شرح للمبتدئ بمثال بسيط ثم علميًا، مع كود وقياس وtrade-offs.
ضغط صور الويب: ليه صفحتك بطيئة وإزاي تنزّلها لثانية بصيغ WebP وAVIF
صفحتك بطيئة بسبب الصور؟ حوّل JPEG وPNG لـ WebP وAVIF، واستخدم وسم picture والتحميل الكسول، وانزل بحجم الصفحة من 5.8 ميجا لـ 720 كيلوبايت وزمن التحميل من 6 ثواني لثانية. دليل للمبتدئ بأمثلة وأوامر جاهزة وأرقام ومصادر.
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 بيكون مضيعة وقت.