You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
8.6 KiB
107 lines
8.6 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "a203e560e58ccc6ba68bffc40c7c8676",
|
|
"translation_date": "2025-10-22T14:29:45+00:00",
|
|
"source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
|
|
"language_code": "ar"
|
|
}
|
|
-->
|
|
# تحليل أداء موقع إلكتروني
|
|
|
|
## نظرة عامة على المهمة
|
|
|
|
تحليل الأداء هو مهارة أساسية لمطوري الويب الحديثين. في هذه المهمة، ستقوم بإجراء تدقيق شامل لأداء موقع إلكتروني حقيقي باستخدام أدوات المتصفح وخدمات الطرف الثالث لتحديد نقاط الاختناق واقتراح استراتيجيات تحسين.
|
|
|
|
مهمتك هي تقديم تقرير أداء مفصل يوضح فهمك لمبادئ أداء الويب وقدرتك على استخدام أدوات التحليل الاحترافية بفعالية.
|
|
|
|
## تعليمات المهمة
|
|
|
|
**اختر موقعًا إلكترونيًا** للتحليل - اختر أحد الخيارات التالية:
|
|
- موقع إلكتروني شهير تستخدمه بشكل متكرر (موقع إخباري، وسائل التواصل الاجتماعي، التجارة الإلكترونية)
|
|
- موقع مشروع مفتوح المصدر (صفحات GitHub، مواقع التوثيق)
|
|
- موقع إلكتروني لشركة محلية أو موقع شخصي
|
|
- مشروعك الخاص أو عملك الدراسي السابق
|
|
|
|
**قم بإجراء تحليل متعدد الأدوات** باستخدام ثلاثة طرق مختلفة على الأقل:
|
|
- **أدوات المتصفح DevTools** - استخدم علامة تبويب الأداء في Chrome/Edge للحصول على ملف تعريف تفصيلي
|
|
- **أدوات التدقيق عبر الإنترنت** - جرب Lighthouse، GTmetrix، أو WebPageTest
|
|
- **تحليل الشبكة** - افحص تحميل الموارد، أحجام الملفات، وأنماط الطلبات
|
|
|
|
**وثق نتائجك** في تقرير شامل يتضمن:
|
|
|
|
### تحليل مقاييس الأداء
|
|
- **قياسات وقت التحميل** من أدوات ومنظورات متعددة
|
|
- **درجات Core Web Vitals** (LCP، FID، CLS) وتأثيراتها
|
|
- **تفصيل الموارد** يوضح أي الأصول تساهم بشكل أكبر في وقت التحميل
|
|
- **تحليل شلال الشبكة** لتحديد الموارد المعيقة
|
|
|
|
### تحديد المشكلات
|
|
- **نقاط اختناق الأداء المحددة** مع بيانات داعمة
|
|
- **تحليل الأسباب الجذرية** يشرح سبب حدوث كل مشكلة
|
|
- **تقييم تأثير المستخدم** يصف كيف تؤثر المشكلات على المستخدمين الحقيقيين
|
|
- **تصنيف الأولويات** للمشكلات بناءً على شدتها وصعوبة حلها
|
|
|
|
### توصيات التحسين
|
|
- **تحسينات محددة وقابلة للتنفيذ** مع التأثير المتوقع
|
|
- **استراتيجيات التنفيذ** لكل تغيير موصى به
|
|
- **أفضل الممارسات الحديثة** التي يمكن تطبيقها (التحميل الكسول، الضغط، إلخ)
|
|
- **أدوات وتقنيات** لمراقبة الأداء المستمر
|
|
|
|
## متطلبات البحث
|
|
|
|
**لا تعتمد فقط على أدوات المتصفح** - قم بتوسيع تحليلك باستخدام:
|
|
|
|
**خدمات التدقيق من الطرف الثالث:**
|
|
- [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) - تدقيق شامل
|
|
- [GTmetrix](https://gtmetrix.com/) - رؤى الأداء والتحسين
|
|
- [WebPageTest](https://www.webpagetest.org/) - ظروف اختبار واقعية
|
|
- [Pingdom](https://tools.pingdom.com/) - مراقبة الأداء العالمية
|
|
|
|
**أدوات التحليل المتخصصة:**
|
|
- [Bundle Analyzer](https://bundlephobia.com/) - تحليل حجم حزم JavaScript
|
|
- [Image optimization tools](https://squoosh.app/) - فرص تحسين الأصول
|
|
- [Security headers analysis](https://securityheaders.com/) - تأثير الأداء الأمني
|
|
|
|
## تنسيق التسليم
|
|
|
|
قم بإنشاء تقرير احترافي (2-3 صفحات) يتضمن:
|
|
|
|
1. **ملخص تنفيذي** - نظرة عامة على النتائج والتوصيات الرئيسية
|
|
2. **المنهجية** - الأدوات المستخدمة ونهج الاختبار
|
|
3. **تقييم الأداء الحالي** - مقاييس وخطوط الأساس
|
|
4. **المشكلات المحددة** - تحليل تفصيلي للمشكلات مع بيانات داعمة
|
|
5. **التوصيات** - استراتيجيات تحسين مرتبة حسب الأولوية
|
|
6. **خارطة طريق التنفيذ** - خطة تحسين خطوة بخطوة
|
|
|
|
**قم بتضمين أدلة مرئية:**
|
|
- لقطات شاشة لأدوات الأداء والمقاييس
|
|
- رسوم بيانية أو مخططات تظهر بيانات الأداء
|
|
- مقارنات قبل/بعد حيثما أمكن
|
|
- مخططات شلال الشبكة وتفصيل الموارد
|
|
|
|
## معايير التقييم
|
|
|
|
| المعايير | ممتاز (90-100%) | مقبول (70-89%) | يحتاج إلى تحسين (50-69%) |
|
|
| -------- | ------------------- | ----------------- | -------------------------- |
|
|
| **عمق التحليل** | تحليل شامل باستخدام 4+ أدوات مع مقاييس تفصيلية، تحليل الأسباب الجذرية، وتقييم تأثير المستخدم | تحليل جيد باستخدام 3 أدوات مع مقاييس واضحة وتحديد أساسي للمشكلات | تحليل أساسي باستخدام أداتين مع عمق محدود وتحديد بسيط للمشكلات |
|
|
| **تنوع الأدوات** | استخدام أدوات المتصفح + 3+ خدمات طرف ثالث مع تحليل مقارن ورؤى من كل منها | استخدام أدوات المتصفح + 2 خدمات طرف ثالث مع بعض التحليل المقارن | استخدام أدوات المتصفح + خدمة طرف ثالث واحدة مع مقارنة محدودة |
|
|
| **تحديد المشكلات** | تحديد 5+ مشكلات أداء محددة مع تحليل الأسباب الجذرية وتأثير كمي | تحديد 3-4 مشكلات أداء مع تحليل جيد وبعض قياسات التأثير | تحديد 1-2 مشكلات أداء مع تحليل أساسي |
|
|
| **التوصيات** | تقديم توصيات محددة وقابلة للتنفيذ مع تفاصيل التنفيذ، التأثير المتوقع، وأفضل الممارسات الحديثة | تقديم توصيات جيدة مع بعض إرشادات التنفيذ والنتائج المتوقعة | تقديم توصيات أساسية مع تفاصيل تنفيذ محدودة |
|
|
| **العرض الاحترافي** | تقرير منظم جيدًا مع هيكل واضح، أدلة مرئية، ملخص تنفيذي، وتنسيق احترافي | تنظيم جيد مع بعض الأدلة المرئية وهيكل واضح | تنظيم أساسي مع أدلة مرئية محدودة |
|
|
|
|
## نتائج التعلم
|
|
|
|
من خلال إكمال هذه المهمة، ستثبت قدرتك على:
|
|
- **تطبيق** أدوات ومناهج تحليل الأداء الاحترافية
|
|
- **تحديد** نقاط اختناق الأداء باستخدام التحليل المستند إلى البيانات
|
|
- **تحليل** العلاقة بين جودة الكود وتجربة المستخدم
|
|
- **توصية** استراتيجيات تحسين محددة وقابلة للتنفيذ
|
|
- **التواصل** بالنتائج التقنية في تنسيق احترافي
|
|
|
|
تعزز هذه المهمة مفاهيم الأداء التي تم تعلمها في الدرس مع بناء مهارات عملية ستستخدمها طوال مسيرتك المهنية في تطوير الويب.
|
|
|
|
---
|
|
|
|
**إخلاء المسؤولية**:
|
|
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسير خاطئ ينشأ عن استخدام هذه الترجمة. |