Optimizing بالعربي
مقالات عملية مرتبة حسب المجال والمستوى، اختر المجال المناسب واقرأ من مستوى مبتدئ إلى محترف.
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 بدون جسم استجابة. النتيجة: نقل أقل وضغط أخف على السيرفر.
صفحة طويلة بطيئة؟ content-visibility ينزل الرندر من 232ms لـ 30ms
لو صفحة المنتجات أو المقالات الطويلة بتتقل قبل ما المستخدم يشوف آخرها، استخدم content-visibility لتأجيل رندر الأجزاء خارج الشاشة بدون إعادة بناء الواجهة.
CI بطيء؟ npm cache في GitHub Actions ينزل install لـ 55 ثانية
لو `npm ci` بياكل 4 دقائق من كل Pull Request، تفعيل cache في `actions/setup-node` يقلل وقت التثبيت المتكرر بدون لمس كود التطبيق.
CSV كبير بيكسر RAM؟ chunksize في pandas يحلها بهدوء
لو ملف CSV حجمه 8GB بيقع سكربت Python عندك، اقرأه بدفعات باستخدام pandas chunksize بدل ما تحمّله كله في الذاكرة.
Brotli مش gzip: قلّل JS من 420KB لـ 96KB بدون لمس الكود
لو ملفات JavaScript وCSS بتوصل كبيرة للمتصفح، pre-compression بـ Brotli وgzip ممكن يقلل النقل قبل ما تلمس الكود. هنا إعداد Nginx قابل للنسخ وقياس واضح قبل وبعد.
صور المنتج بطيئة؟ AVIF وsrcset ينزلوا LCP من 4.1s لـ 1.6s
شرح عملي لتقليل وزن صور المنتج وتحسين LCP باستخدام AVIF وWebP وsrcset وسكربت sharp، مع أرقام قبل وبعد وحالات لا يصلح فيها الحل.