Optimizing بالعربي
مقالات عملية مرتبة حسب المجال والمستوى، اختر المجال المناسب واقرأ من مستوى مبتدئ إلى محترف.
خطوط الويب: امنع CLS بقيمة 0.24 وحمّل الخط في 80ms بدل 480ms
لو الصفحة بتقفز وتعيد ترتيب نفسها لما الخط العربي يخلّص تحميل، CLS بيوصل 0.24 وLCP بيتأخر نصف ثانية. ضبط font-display مع subsetting وpreload يحل المشكلة بدون لمس التصميم — مع أرقام مقاسة وtrade-offs واضحة.
N+1 Query Problem: ليه ORM بياخد 1001 طلب SQL بدل اتنين
لو endpoint بيرجع قائمة 1000 طلبية بياخد 8 ثواني والـ DB CPU مرتفع، المشكلة غالبًا مش في الـ index ولا السيرفر. المشكلة إن الـ ORM بيعمل 1001 طلب SQL بدل اتنين. مقال للمستوى المتوسط بمثال للمبتدئ، تعريف علمي، كود Python/SQLAlchemy وDjango شغّال، أرقام قياس فعلية، حلول joinedload وselectinload وDataLoader، trade-offs، وحالات ما تستخدمهوش فيها.
Brotli vs gzip: وفّر 21% من حجم JavaScript قبل ما يوصل المتصفح
لو bundle الـ JavaScript بتاعك بيوصل للزائر 348KB مضغوط بـ gzip، Brotli بيوصّله لـ 251KB بنفس الكود وبدون لمس الـ build. شرح للمستوى المتوسط مع أرقام مقاسة على ملف حقيقي، إعداد NGINX، ضبط Cloudflare، trade-offs واضحة، وحالات لا تستخدم Brotli فيها.
Memory Leak في Node.js: ازاي تكشفها بـ Heap Snapshot قبل ما السيرفر يقع
لو سيرفر Node.js عندك بيكبر من 240MB لـ 2.8GB في 4 أيام لحد ما بيقع OOM، Heap Snapshot في Chrome DevTools بيوريك بالظبط الـ object اللي بيتراكم. مثال للمستوى المتوسط بكود حقيقي وأرقام قبل وبعد الإصلاح.
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 بدل إرسال نفس الصورة الكبيرة لكل الشاشات.