منتج 1
وصف قابل للتكيف
19.99 يورو
الأداء
تقليل الحركة، التكبير، القدرة على التكيف
احترام تفضيلات الحركة
مثال سيء
رسوم متحركة افتراضية
بطاقة متحركة
تتحرك هذه الرسوم المتحركة باستمرار
مثال جيد
رسوم متحركة محترمة
بطاقة محترمة
رسوم متحركة خفيفة عند التمرير فقط
الشرح: يمكن للمستخدمين تكوين نظامهم لتقليل الرسوم المتحركة. يجب احترام هذا التفضيل لتجنب الغثيان والتشتت.
دعم التكبير وحجم الخط الكبير
مثال سيء
واجهة ثابتة
منتج 1
وصف قصير
19.99 يورو
منتج 2
وصف قصير
24.99 يورو
مثال جيد
📏 حجم النص: 100%
واجهة قابلة للتكيف
منتج 2
وصف قابل للتكيف
24.99 يورو
الشرح: يجب أن تظل الواجهة عملية وقابلة للقراءة حتى 200٪ تكبير. يجب أن تتكيف النصوص مع تفضيلات حجم الخط للمستخدم.
التصميم القابل للتكيف والاستجابة
مثال سيء
واجهة سطح المكتب الثابتة
الشعار
اتصل بنا
تفاصيل الاتصال الخاصة بنا
123 شارع السلام
75001 باريس
+33 1 23 45 67 89
مثال جيد
واجهة قابلة للتكيف
الشعار
اتصل بنا
الشرح: يجب أن تعمل الواجهة على جميع الأجهزة والتوجهات، مع عناصر تحكم بحجم مناسب للمس.
التحميل البطيء: تحميل الموارد المرئية فقط
مثال سيء
❌ تحميل كل شيء دفعة واحدة (التحميل الفوري)
مثال ملموس: موقع تجارة إلكترونية مع 50 منتجًا يحمل جميع الصور على الفور، حتى تلك الموجودة في أسفل الصفحة التي قد لا يراها المستخدم أبدًا.
📚 المصطلح التقني: التحميل الفوري = تحميل فوري لجميع الموارد
- 📥 المشكلة 1: 50 صورة × 200 كيلوبايت = 10 ميجابايت يتم تنزيلها على الفور
- ⏱️ المشكلة 2: وقت انتظار 8-15 ثانية قبل رؤية الصفحة
- 📱 المشكلة 3: استهلاك غير ضروري لبيانات الهاتف المحمول
- 🔋 المشكلة 4: إجهاد المعالج واستنزاف البطارية
📄 HTML (20 كيلوبايت)
🎨 CSS (50 كيلوبايت)
⚙️ JavaScript (200 كيلوبايت)
🖼️ صورة 1 مرئية (200 كيلوبايت)
🖼️ صورة 2 مرئية (200 كيلوبايت)
🖼️ صورة 3 في أسفل الصفحة (200 كيلوبايت)
🖼️ صورة 4 في أسفل الصفحة (200 كيلوبايت)
🖼️ صورة 5 في أسفل الصفحة (200 كيلوبايت)
⏱️ وقت التحميل الإجمالي: 8 ثوانٍ
📊 البيانات المستهلكة: 1.27 ميجابايت (بما في ذلك 600 كيلوبايت غير ضرورية)
مثال جيد
✅ التحميل التدريجي (التحميل البطيء + التخزين المؤقت)
مثال ملموس: نفس موقع التجارة الإلكترونية يحمل أولاً المحتوى المرئي، ثم الصور اللاحقة فقط عندما يقوم المستخدم بالتمرير.
📚 المصطلحات التقنية: التحميل البطيء = تحميل مؤجل • ذاكرة التخزين المؤقت HTTP = ذاكرة مؤقتة للمتصفح
اختبر التحسينات:
📄 HTML (20 كيلوبايت) - تم التحميل
🎨 CSS (50 كيلوبايت) - تم التحميل
⚙️ JavaScript (200 كيلوبايت) - تم التحميل
🖼️ صورة 1 مرئية (200 كيلوبايت) - تم التحميل
🖼️ صورة 2 مرئية (200 كيلوبايت) - تم التحميل
🖼️ صورة 3 (يتم تحميلها عند التمرير)
🖼️ صورة 4 (يتم تحميلها عند التمرير)
🖼️ صورة تم رؤيتها بالفعل (مخزنة مؤقتًا، 0 كيلوبايت)
⏱️ وقت التحميل الأولي: ثانيتان
📊 البيانات المحفوظة: 600 كيلوبايت (47٪)
💡 التأثير على إمكانية الوصول:
السرعة (FCP)
أسرع First Contentful Paint = الصفحة مرئية على الفور
بيانات الهاتف المحمول
ضروري للمستخدمين الذين لديهم خطة بيانات محدودة أو شبكة بطيئة (3G)
البطارية
نقل أقل للشبكة = توفير كبير في الطاقة
الأجهزة القديمة
موارد أقل للمعالجة = يعمل على الأجهزة القديمة
الشرح: التحميل البطيء (التحميل المؤجل) يسمح بتحميل الصور والموارد فقط عندما يحتاجها المستخدم، بدلاً من تنزيل كل شيء دفعة واحدة عند تحميل الصفحة.