الجزء الخامس من سلسلة مقالات الأداء، وهو مقال نتحدث فيه بشكل أكثر تفصيلا حول قياس الأداء الخاص بالموقع لتقييمه وتحديد كيفية الأداء الخاص بنا مقارنة بالمنافسين، أو مقارنة الأداء بين الإصدارات المختلفة من الموقع بعد كل release…، باختصار سنتحدث عن ال Measuring performance.

1. ‫الرحيم‬ ‫الرحمن‬ ‫الله‬ ‫بسم‬
‫منه‬ ‫كان‬ ‫من‬ ُ‫د‬‫ويزي‬ ،
ً ‫ّا‬‫جي‬‫ن‬ ‫ناداه‬ ‫من‬ ‫ُجيب‬‫ي‬‫و‬ ،
ً ‫خفيا‬ ‫دعاه‬ ‫من‬ ‫ُحب‬‫ي‬ ،‫العالمين‬ ّ
‫رب‬ ‫لله‬ ‫حمد‬‫ل‬‫ا‬
.‫العالمين‬ ّ
‫رب‬ ‫لله‬ ‫حمد‬‫ل‬‫ا‬ ،
ً ‫ّا‬‫رضي‬ ‫الوعد‬ ‫صادق‬ ‫كان‬ ‫من‬ ‫ويهدي‬ ،
ً ‫ّا‬‫وفي‬ ‫له‬ ‫كان‬ ‫من‬ ‫يكرم‬‫و‬ ،
ً ‫ّا‬‫ي‬ِ‫حي‬
Web performance - 5
‫في‬
‫الرابع‬ ‫جزء‬‫ل‬‫ا‬
‫بالأداء؛‬ ‫خاصة‬‫ل‬‫ا‬ ‫المقالات‬ ‫سلسلة‬ ‫من‬
‫مقدار‬ ‫قياس‬ ‫وأساليب‬ ‫طرق‬ ‫عن‬ ‫حدثنا‬‫ت‬
‫النظر‬ ‫في‬ ‫المطور‬ ‫تساعد‬ ‫أن‬ ‫يمكن‬ ‫التي‬ ‫الأساليب‬ ‫لبعض‬ ‫وتطرقنا‬ ،‫المستخدمين‬ ‫لدى‬ ‫الرضى‬
‫والآن‬ ،…‫المستخدمين‬ ‫لدى‬ ‫السخط‬ ‫مشاكل‬ ‫حل‬ ‫في‬ ‫واقعيا‬ ‫اعتباره‬ ‫يمكن‬ ‫تقييم‬ ‫لبناء‬ ‫للنتائج‬
‫الأداء‬ ‫كيفية‬ ‫حديد‬‫ت‬‫و‬ ‫لتقييمه‬ ‫بالموقع‬ ‫خاص‬‫ل‬‫ا‬ ‫الأداء‬ ‫قياس‬ ‫وهي‬ ،‫أخرى‬ ‫جزئية‬ ‫إلى‬ ‫سننتقل‬
‫كل‬ ‫بعد‬ ‫الموقع‬ ‫من‬ ‫ختلفة‬‫م‬‫ال‬ ‫الإصدارات‬ ‫بين‬ ‫الأداء‬ ‫مقارنة‬ ‫أو‬ ،‫بالمنافسين‬ ‫مقارنة‬ ‫بنا‬ ‫خاص‬‫ل‬‫ا‬
release
،…
‫باختصار‬
‫سنتحدث‬
‫عن‬
‫ال‬
Measuring performance
.
‫عند‬
‫كتابة‬
‫أي‬
‫شيفرة‬
‫جية‬‫م‬‫بر‬
‫تتعلق‬
،‫بالويب‬
‫فاعلم‬
‫أن‬
‫هناك‬
‫عدد‬
‫كبير‬
‫من‬
‫ال‬
Web Apis
‫الموقع‬ ‫طبيعة‬ ‫مع‬ ‫يتناسب‬ ‫وبما‬ ‫بك‬ ‫خاص‬‫ل‬‫ا‬ ‫الأداء‬ ‫لقياس‬ ‫يقة‬‫طر‬ ‫بناء‬ ‫من‬ ‫لتتمكن‬ ‫لك‬ ‫المتاحة‬
‫خاص‬‫ل‬‫ا‬
،‫بك‬
‫فمثلا‬
‫يمكنك‬
‫استخدام‬
‫ال‬
Navigation Timing Api
‫لقياس‬
‫الأداء‬
‫المتعلق‬
‫بال‬
client side
،
‫ويشمل‬
‫هذا‬
unload prev page
‫والوقت‬
‫المستغرق‬
‫لل‬
domain
lookup
‫حو‬‫ن‬‫و‬
،‫ذلك‬
‫وهناك‬
‫العديد‬
‫من‬
‫الأدوات‬
‫ختلفة‬‫م‬‫ال‬
‫التي‬
‫يمكنك‬
‫استخدامها‬
‫لمساعدتك‬
‫في‬
:‫إلى‬ ‫الأدوات‬ ‫هذه‬ ‫تصنيف‬ ‫ويمكن‬ ،‫بك‬ ‫خاص‬‫ل‬‫ا‬ ‫للموقع‬ ‫الأداء‬ ‫مستوى‬ ‫حسين‬‫ت‬

2. 1
.
‫ال‬ ‫مثل‬ ‫حسينها‬‫ت‬ ‫يمكن‬ ‫التي‬ ‫الأماكن‬ ‫إلى‬ ‫والإشارة‬ ‫الأداء‬ ‫لقياس‬ ‫تستخدم‬ ‫أدوات‬
PageSpeed Insights
.
2
.
‫أدوات‬
‫تقوم‬
‫بالتغيير‬
‫على‬
‫الشيفرة‬
‫جية‬‫م‬‫البر‬
‫نفسها‬
‫لتحسين‬
‫الأداء‬
‫مثل‬
‫عمل‬
bundle
‫لل‬
code file
‫لتصبح‬
‫صغيرة‬
‫جم‬‫ح‬‫ال‬
‫وحذف‬
‫المسافات‬
‫لتقليل‬
‫جم‬‫ح‬
…‫الملف‬
،‫الإلكتروني؟‬ ‫للموقع‬ ‫للأداء‬ ‫الزمني‬ ‫خطط‬‫م‬‫ال‬ ‫مع‬ ‫التعامل‬ ‫يمكننا‬ ‫كيف‬ ،‫المهم‬ ‫جزء‬‫ل‬‫ا‬ ‫يأتي‬ ‫والآن‬
‫جواب‬‫ل‬‫وا‬
‫هو‬
‫من‬
‫خلال‬
‫ال‬
Performance Entry Api
،
‫من‬
‫خلال‬
‫هذه‬
‫ال‬
API
‫فإننا‬
‫الموقع‬ ‫لفحص‬ ‫المفيدة‬ ‫الزمنية‬ ‫خططات‬‫م‬‫ال‬ ‫من‬ ‫العديد‬ ‫مع‬ ‫نتعامل‬ ‫وأن‬ ‫نصل‬ ‫أن‬ ‫يمكن‬
‫لل‬ ‫المستغرق‬ ‫الوقت‬ ‫على‬ ‫حصول‬‫ل‬‫ا‬ ‫أردنا‬ ‫لو‬ ،‫مثلا‬ ،‫بسهولة‬ ‫بذلك‬ ‫القيام‬ ‫ويمكن‬ ،‫الإلكتروني‬
navigation
‫فبكل‬
‫بساطة‬
‫كل‬
‫ما‬
‫عليها‬
‫فعله‬
‫هو‬
‫كتابة‬
‫هذا‬
:‫السطر‬
‫بال‬ ‫المتعلق‬ ‫وهو‬ ‫طباعته‬ ‫المطلوب‬ ‫الزمني‬ ‫خطط‬‫م‬‫ال‬ ‫نوع‬ ‫حديد‬‫ت‬‫ب‬ ‫قمنا‬ ،‫السابق‬ ‫السطر‬ ‫خلال‬ ‫من‬
navigation
،
‫ومن‬
‫ثم‬
‫قمنا‬
‫جلب‬‫ب‬
‫جميع‬
‫خططات‬‫م‬‫ال‬
‫خاصة‬‫ل‬‫ا‬
‫به‬
،‫وطباعتها‬
‫والآن‬
‫شاهد‬
‫النتائج‬
:‫بها‬ ‫خاصة‬‫ل‬‫ا‬

3. ‫ال‬ ،‫المثال‬ ‫سبيل‬ ‫على‬ ‫ولنأخذ‬ ،‫جدا‬ ‫المفيدة‬ ‫القيم‬ ‫من‬ ‫العديد‬ ‫هناك‬ ،‫الصورة‬ ‫في‬ ‫تشاهد‬ ‫ما‬‫ك‬
duration
،
‫وهو‬
‫يمثل‬
‫الفرق‬
‫الزمني‬
‫بين‬
‫ال‬
loadEventEnd
‫وال‬
startTime
،
‫ويمكننا‬
‫حساب‬
‫ال‬
request time
‫من‬
‫خلال‬
‫حساب‬
‫الفرق‬
‫الزمني‬
‫بين‬
‫ال‬
responseStart
‫وال‬
requestStart
،
‫ما‬‫ك‬
‫يمكننا‬
‫حساب‬
‫ال‬
DOMContentLoaded
‫من‬
‫خلال‬
‫حساب‬
‫الفرق‬
domContentLoadedEventEnd
‫وال‬
domContentLoadedEventStart
‫لا‬-
‫تنسى‬
‫أن‬
‫حافظ‬‫ت‬
‫على‬
‫وقت‬
‫زمني‬
‫أقل‬
‫من‬
50
‫جزء‬
‫من‬
‫إلى‬...-‫الثانية‬
،‫آخره‬
‫ما‬‫ك‬
‫يمكنك‬
‫جلب‬
‫جميع‬
‫ال‬
performanceEntry
‫والتحقق‬
‫منها‬
‫يقة‬‫بطر‬
‫بسيطة‬
‫وذلك‬
‫من‬
‫خلال‬
‫استخدام‬
getEntries
،
‫شاهد‬
:‫المثال‬

4. ،‫والآن‬
‫قد‬
،‫تتسائل‬
‫ماذا‬
‫عن‬
‫ال‬
user time
،‫؟‬
‫وكيف‬
‫يمكنني‬
‫إضافة‬
‫نقاط‬
‫معينة‬
‫لل‬
performance time line
‫حتى‬
‫أتمكن‬
‫من‬
‫حص‬‫ف‬
‫الأداء‬
‫خاص‬‫ل‬‫ا‬
‫ببعض‬
‫ال‬
methods
،‫؟‬
‫إليها؟‬ ‫الوصول‬ ‫يمكن‬ ‫وكيف‬
‫جواب‬‫ل‬‫وا‬
‫أيضا‬
،‫سهل‬
‫وهذه‬
‫العملية‬
‫متوفرة‬
‫من‬
‫خلال‬
‫ال‬
User Timing Api
،
‫فهي‬
‫توفر‬
‫لك‬
‫إمكانية‬
‫إضافة‬
‫واسترجاع‬
‫وحذف‬
timestamp
‫على‬
‫خطط‬‫م‬‫ال‬
‫الزمني‬
‫خاص‬‫ل‬‫ا‬
‫بك‬
‫على‬
‫الموقع‬
،‫الإلكتروني‬
‫ولدينا‬
‫نوعين‬
‫من‬
‫ال‬
event type
‫التي‬
‫يمكن‬
‫استخدامها‬
‫لهذا‬
‫الغرض‬
:‫وهما‬
1
.
mark
:
‫وهو‬
‫ال‬
timestamp
‫ضمن‬
‫خطط‬‫م‬‫ال‬
‫الزمني‬
،‫للمتصفح‬
‫ولديها‬
‫أربعة‬
property
:‫وهي‬
a
.
entryType
‫والقيمة‬
‫خاصة‬‫ل‬‫ا‬
‫بها‬
‫هي‬
mark
b
.
name
:
‫والقيمة‬
‫خاصة‬‫ل‬‫ا‬
‫بها‬
‫هي‬
‫ما‬
‫كتبته‬
‫أثناء‬
‫جتها‬‫م‬‫بر‬
c
.
startTime
:
‫ال‬
timestamp
‫لل‬
mark
‫عندما‬
‫تم‬
‫استدعائها‬
d
.
‫ال‬
duration
:
‫وقيمتها‬
0
،
‫لأن‬
‫ال‬
mark
‫يمثل‬
‫ال‬
timestamp
‫للنقطة‬
‫ضمن‬
…‫زمني‬ ‫خط‬
2
.
measure
:
‫هو‬
‫ال‬
timestamp
‫بين‬
‫نقطتين‬
‫من‬
‫ال‬
mark
،
‫ولديها‬
‫أربعة‬
property
:‫وهي‬

5. a
.
entryType
:
‫والقيمة‬
‫خاصة‬‫ل‬‫ا‬
‫بها‬
‫هي‬
measure
b
.
name
:
‫والقيمة‬
‫خاصة‬‫ل‬‫ا‬
‫بها‬
‫هي‬
‫ما‬
‫كتبته‬
‫أثناء‬
‫جة‬‫م‬‫البر‬
c
.
startTime
:
‫ال‬
timestamp
‫لل‬
measure
‫عندما‬
‫تم‬
‫استدعائها‬
d
.
‫ال‬
duration
:
‫بشكل‬
‫عام‬
‫تكون‬
‫قيمتها‬
‫الفرق‬
‫الزمني‬
‫بين‬
‫ال‬
mark end
‫وال‬
mark start
.
:‫ملاحظة‬
‫كر‬
‫تذ‬
‫أن‬
‫ال‬
measure
‫وقت‬
‫بين‬
‫نقطتين‬
mark
.
:‫التالية‬ ‫الأمثلة‬ ‫شاهد‬
‫في‬
‫هذه‬
‫الصورة‬
‫قمنا‬
‫بإضافة‬
mark
‫إلى‬
‫خطط‬‫م‬
،‫الزمني‬
‫أسميناه‬
calendar-start-mark
‫والآن‬
‫شاهد‬
‫نتيجة‬
،‫استرجاعها‬
‫ولاحظ‬
‫أن‬
‫ال‬
duration
‫قيمته‬
‫صفر‬
،‫دوما‬
‫ولاحظ‬
‫كيف‬
:‫الزمني‬ ‫خطط‬‫م‬‫ال‬ ‫ضمن‬ ‫نقطة‬ ‫بكل‬ ‫خاص‬‫ل‬‫ا‬ ‫للوقت‬ ‫النظر‬ ‫استطعت‬

6. ،‫والآن‬
‫لنشاهد‬
‫أهمية‬
‫ال‬
measure
‫لقياس‬
‫الأداء‬
‫بين‬
‫النقطتين‬
‫خاصة‬‫ل‬‫ا‬
‫بال‬
calendar
،
:‫الصورة‬ ‫شاهد‬ ،‫النقاط‬ ‫من‬ ‫شئت‬ ‫ما‬ ‫اختيار‬ ‫يمكنك‬ ،‫تأكيد‬ ‫وبكل‬
:‫بها‬ ‫خاصة‬‫ل‬‫ا‬ ‫النتيجة‬ ‫وهذه‬
‫لاحظ‬
‫هنا‬
‫أن‬
‫ال‬
duration
‫هو‬
‫الفرق‬
‫بين‬
‫الزمنين‬
‫خاص‬‫ل‬‫ا‬
‫بال‬
marks
…
…‫الله‬ ‫بإذن‬ ‫السادس‬ ‫جزء‬‫ل‬‫ا‬ ‫في‬ ‫يتبع‬ ،^^ ‫أخرى‬ ‫جزئية‬ ‫إلى‬ ‫الانتقال‬ ‫يمكننا‬ ،‫والآن‬