Optimizing بالعربي
مقالات عملية مرتبة حسب المجال والمستوى، اختر المجال المناسب واقرأ من مستوى مبتدئ إلى محترف.
content-visibility: auto للمبتدئ — خاصية CSS واحدة تنزّل زمن الرسم من 1.2 ثانية لـ 90ms
سطرين CSS بدون JavaScript وبدون مكتبة بيخلوا صفحة فيها 600 كارت ترسم في 90ms بدل 1,180ms. شرح content-visibility: auto للمبتدئ مع مثال الفندق، تعريف علمي من web.dev و W3C، أرقام مقاسة على Chrome 131، 4 trade-offs خفية، ومتى الخاصية بتكون كارثة بدل ما تحسّن.
صور AVIF للمبتدئ: نزّل حجم صور موقعك 75% بدون فقد جودة
دليل عملي للمبتدئ لاستبدال JPEG و PNG بـ AVIF على موقعك. مع مثال محل البقالة للتقريب، شرح علمي للـ AV1 codec من Alliance for Open Media، أمر cavif واحد يحوّل 200 صورة في 4 دقائق، أرقام مقاسة على متجر إلكتروني عربي (LCP من 4.2 ثانية لـ 1.1 ثانية، فاتورة CDN -68%)، 4 trade-offs حقيقية، ومتى AVIF بيكون اختيار غلط.
Service Workers للمبتدئ: خلّي موقعك يفتح في 80ms حتى لو الإنترنت قطع
لو موقعك بياخد 3.4 ثانية يفتح على 4G ضعيف، Service Worker بـ 32 سطر JavaScript بيخلّي الزيارة الثانية تفتح في 80 مللي ثانية حتى من غير إنترنت. مقال للمبتدئ بمثال صيدلية الحي للتقريب، تعريف علمي من W3C، كود شغّال على Chrome 130، أرقام مقاسة من موقع e-commerce بـ 24 ألف زائر شهرياً (Lighthouse 47 → 96)، 4 trade-offs حقيقية، ومتى Service Worker بيكون مضيعة وقت.
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 حقيقية، ومتى ما تكاشّش أصلاً.