Optimizing بالعربي
مقالات عملية مرتبة حسب المجال والمستوى، اختر المجال المناسب واقرأ من مستوى مبتدئ إلى محترف.
HTTP Cache Headers للمبتدئ: من 1.8 ثانية لـ 180ms في الزيارة الثانية
لو الزائر فتح موقعك مرتين في نفس اليوم وكل مرة بياخد 1.8 ثانية، انت بتدفع ضريبة شبكة من غير سبب. سطرين في الـ HTTP response headers بيخلّوا الزيارة الثانية تطلع في 180ms على نفس الكود. مقال للمبتدئ بمثال شنطة المدرسة، تعريف علمي من RFC 9111، إعداد NGINX و Express شغّال، أرقام مقاسة، 4 trade-offs حقيقية، ومتى ما تكاشّش أصلاً.
Database Indexes للمبتدئ: من 8 ثواني لـ 5 مللي ثانية بسطر SQL
لو SELECT بسيط على جدول مليون صف بياخد 8 ثواني، المشكلة مش في السيرفر. الـ Index بسطر SQL واحد بينزّل الزمن لـ 5ms، 1690x أسرع. شرح للمبتدئ بمثال القاموس، تعريف علمي للـ B-tree، كود PostgreSQL 16 شغّال مع EXPLAIN ANALYZE، أرقام مقاسة، 3 trade-offs حقيقية (مساحة، بطء الكتابة، صيانة)، 4 حالات Index بيشتغل فيها وحالات بيفشل، ومتى ما تستخدمش Index أصلاً.
WebP vs AVIF للمبتدئ: لماذا صورتك 240KB بدل 1.2MB بنفس الجودة
لو موقعك بيحمّل صور JPEG بحجم 1.2MB والصفحة بتاخد 6.4 ثانية على شبكة 4G، AVIF بيحوّل نفس الصورة لـ 240KB والصفحة لـ 1.8 ثانية بدون فقد جودة محسوس. مقال للمبتدئ بمثال شنطة السفر، تعريف علمي دقيق لـ WebP و AVIF، كود Sharp شغّال يحوّل الصور تلقائيًا، tag picture مع fallback صحيح، أرقام مقاسة على 30 صورة منتج، نسبة دعم المتصفحات 2026، trade-offs زمن الترميز، وحالات لا يصلح فيها AVIF أصلاً.
Resource Hints بالعربي: preconnect يوفّر 240ms قبل أول طلب API
لو موقعك بيستدعي API خارجي زي Stripe أو Google Fonts، أول طلب بيدفع ضريبة 240ms في DNS وTLS handshake. preconnect وdns-prefetch بسطرين HTML بيخلّوا المتصفح يدفع الضريبة دي مبكرًا فأول طلب فعلي يطلع تقريبًا فوريًا. مقال للمستوى المبتدئ بمثال جرس الشقة، تعريف علمي دقيق، كود HTML شغّال، أرقام مقاسة على Fast 3G، trade-offs، وحالات لا تستخدمها فيها.
Debouncing vs Throttling في JavaScript: 95% توفير في طلبات API
لو search box في موقعك بيرسل طلب لكل حرف، الزائر بيعمل 24 طلب لكلمة واحدة. Debouncing بـ 8 سطور JavaScript بينزّل ده لطلب واحد. مقال للمبتدئين بمثال جرس الباب، تعريف علمي دقيق، كود vanilla JS شغّال، أرقام مقاسة، الفرق الحقيقي بين debounce وthrottle، trade-offs، وحالات لا تستخدم أي منهما.
Lazy Loading للصور: حمّل 12 صورة بدل 200 وقدّم الصفحة في 1.8 ثانية بدل 6.4
لو صفحة منتجاتك بتحمّل 200 صورة في أول زيارة والزائر بيستنى 6 ثواني، إضافة loading="lazy" على تاج الصورة بتنزل الزمن لـ 1.8 ثانية بسطر واحد. مقال للمستوى المبتدئ بمثال مكتبة الكتب، تعريف علمي دقيق، كود HTML وJavaScript شغّال، أرقام مقاسة على شبكة 4G محاكاة، trade-offs واضحة، وحالات لا تستخدمه فيها.
HTTP Cache-Control بالعربي: خلّي المتصفح يحفظ ملفاتك ووفّر 87% من الطلبات
لو موقعك بيحمّل نفس logo.png و main.css في كل صفحة، Cache-Control بسطر واحد بيخلّي المتصفح يحتفظ بهم محلياً ويوفّر 87% من عدد الطلبات بدون لمس الكود. شرح للمبتدئين بمثال المكتبة العامة، تعريف علمي دقيق لـ max-age و immutable و ETag و الـ 304، إعداد NGINX شغّال، أرقام مقاسة على ملف حقيقي، trade-offs، وحالات لا تستخدمه فيها.
Database Index بالعربي: ليه استعلام بياخد 8 ثواني والثاني 12ms
لو نفس استعلام SELECT بياخد 8 ثواني على جدول مليونين صف، ومرة تانية بـ 12ms بعد سطر واحد، السبب غالبًا في غياب Index. شرح مبتدئ بمثال الكتاب، التعريف العلمي للـ B-tree، EXPLAIN ANALYZE حقيقي، وtrade-offs الكتابة.
Brotli في Nginx: ليه gzip لوحده بيخسّرك 25% بندويث في 2026
تفعيل Brotli في Nginx بيقلّل حجم الـ JS والـ CSS المنقول 20–25% فوق gzip بدون تغيير كود. شرح مع مثال للمبتدئين، تعريف علمي، nginx.conf قابل للنسخ، أرقام قياس فعلية، trade-offs على CPU، ومتى لا يصلح الحل.