المدونة
مقالات عملية مرتبة حسب المجال والمستوى، اختر المجال المناسب واقرأ من مستوى مبتدئ إلى محترف.
Resource Hints: 4 سطور HTML بتقطع 280ms من زمن تحميل صفحتك
لو موقعك بيستخدم Google Fonts أو API على دومين تاني، أول زيارة بتدفع من 180 لـ 480 مللي ثانية ضايعة في DNS و TCP و TLS قبل أول بايت. 4 سطور HTML اسمها Resource Hints بتقطع المعادلة دي. مقال للمبتدئ بمثال مطعم الديليفري، تعريف من HTML Living Standard، كود قابل للنسخ على Chrome 130، أرقام مقاسة من Lighthouse 11 على 4G مصري، 4 trade-offs، ومتى مايستاهلش الجهد.
B-Tree Indexes في PostgreSQL للمبتدئ: نزّل query من 14 ثانية لـ 38 ميكرو ثانية بسطر واحد
لو SELECT بسيط على جدول 5 مليون صف بياخد 14 ثانية، PostgreSQL مش بطيء — هو بيقرأ الجدول كله سطر سطر. سطر CREATE INDEX واحد بينزّل الزمن لـ 38 ميكرو ثانية. مقال للمبتدئ بمثال أمين المكتبة، تعريف علمي من ورقة Bayer وMcCreight 1972، كود SQL شغّال على PostgreSQL 16، أرقام مقاسة على 5 مليون صف، 4 trade-offs حقيقية، ومتى Index بيكون مضيعة وقت.
Lazy Loading للمبتدئ: نزّل وقت تحميل صفحتك 60% بكلمة واحدة في HTML
لو موقعك بيحمّل 14 صورة في الصفحة الواحدة وأول زيارة بتاخد 4.8 ثانية على 4G، إنت بتحمّل صور المستخدم مش هيشوفها أصلاً. كلمة واحدة في HTML بتنزّل وقت التحميل من 4.8 ثانية لـ 1.9 ثانية، بدون مكتبة JavaScript. مقال للمبتدئ بمثال فندق الطوابق، تعريف علمي من HTML Living Standard، كود قابل للنسخ على Chrome 130، أرقام مقاسة من blog 100K زائر شهرياً، 4 trade-offs حقيقية، ومتى لا تستخدمه أصلاً.
WebP للمبتدئ: وفّر 60% من حجم صور موقعك في 5 دقائق
لو موقعك بيحمّل 12 صورة JPEG على الصفحة الواحدة، إنت بتدفع 4.8MB من الـ bandwidth في كل زيارة. تحويل نفس الصور لـ WebP بينزّل الحجم لـ 1.9MB من غير فقدان جودة محسوس. مقال للمبتدئ بمثال شنطة السفر، تعريف علمي من Google، خطوات تحويل بـ cwebp، إعداد NGINX يخدم WebP مع fallback لـ JPEG، أرقام مقاسة، 4 trade-offs، ومتى ما تستخدمش WebP أصلاً.
Service Worker للمبتدئ: خلّي موقعك يفتح بدون إنترنت في 40 سطر
لو الزائر فقد الإنترنت لحظة وشاف dinosaur Chrome، انت بتخسره فوراً. Service Worker بـ 40 سطر JavaScript بيخلّي موقعك يفتح بدون شبكة ويحمّل الزيارة الثانية في 180ms بدل 1.6 ثانية. مقال للمبتدئ بمثال محل البقالة، تعريف علمي من W3C، كود شغّال على Chrome 120+، أرقام مقاسة، 4 trade-offs حقيقية، ومتى لا تستخدمه أصلاً.
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، وحالات لا تستخدمها فيها.