Web performance - الجزء الخامس

بسم الله الرحمن الرحيم

الحمد لله ربّ العالمين، يُحب من دعاه خفياً، ويُجيب من ناداه نجيّاً، ويزيدُ من كان منه حيِيّاً، ويكرم من كان له وفيّاً، ويهدي من كان صادق الوعد رضيّاً، الحمد لله ربّ العالمين.

 

Web performance - 5

 

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

 

عند كتابة أي شيفرة برمجية تتعلق بالويب، فاعلم أن هناك عدد كبير من ال Web Apis المتاحة لك لتتمكن من بناء طريقة لقياس الأداء الخاص بك وبما يتناسب مع طبيعة الموقع الخاص بك، فمثلا يمكنك استخدام ال Navigation Timing Api لقياس الأداء المتعلق بال client side، ويشمل هذا unload prev page والوقت المستغرق لل domain lookup ونحو ذلك، وهناك العديد من الأدوات المختلفة التي يمكنك استخدامها لمساعدتك في تحسين مستوى الأداء للموقع الخاص بك، ويمكن تصنيف هذه الأدوات إلى:

  1. أدوات تستخدم لقياس الأداء والإشارة إلى الأماكن التي يمكن تحسينها مثل ال PageSpeed Insights.

  2. أدوات تقوم بالتغيير على الشيفرة البرمجية نفسها لتحسين الأداء مثل عمل bundle لل code file لتصبح صغيرة الحجم وحذف المسافات لتقليل حجم الملف…

 

والآن يأتي الجزء المهم، كيف يمكننا التعامل مع المخطط الزمني للأداء للموقع الإلكتروني؟، والجواب هو من خلال ال Performance Entry Api، من خلال هذه ال API فإننا يمكن أن نصل وأن نتعامل مع العديد من المخططات الزمنية المفيدة لفحص الموقع الإلكتروني، ويمكن القيام بذلك بسهولة، مثلا، لو أردنا الحصول على الوقت المستغرق لل navigation فبكل بساطة كل ما عليها فعله هو كتابة هذا السطر:

من خلال السطر السابق، قمنا بتحديد نوع المخطط الزمني المطلوب طباعته وهو المتعلق بال navigation، ومن ثم قمنا بجلب جميع المخططات الخاصة به وطباعتها، والآن شاهد النتائج الخاصة بها:

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

والآن، قد تتسائل، ماذا عن ال user time؟، وكيف يمكنني إضافة نقاط معينة لل performance time line حتى أتمكن من فحص الأداء الخاص ببعض ال methods؟، وكيف يمكن الوصول إليها؟

والجواب أيضا سهل، وهذه العملية متوفرة من خلال ال User Timing Api، فهي توفر لك إمكانية إضافة واسترجاع وحذف timestamp على المخطط الزمني الخاص بك على الموقع الإلكتروني، ولدينا نوعين من ال event type التي يمكن استخدامها لهذا الغرض وهما:

  1. mark: وهو ال timestamp ضمن المخطط الزمني للمتصفح، ولديها أربعة property وهي: 

    1. entryType والقيمة الخاصة بها هي mark

    2. name: والقيمة الخاصة بها هي ما كتبته أثناء برمجتها

    3. startTime: ال timestamp لل mark عندما تم استدعائها

    4. ال duration: وقيمتها 0، لأن ال mark يمثل ال timestamp للنقطة ضمن خط زمني…

  2. measure: هو ال timestamp بين نقطتين من ال mark، ولديها أربعة property وهي: 

    1. entryType: والقيمة الخاصة بها هي measure

    2. name: والقيمة الخاصة بها هي ما كتبته أثناء البرمجة

    3. startTime: ال timestamp لل measure عندما تم استدعائها

    4. ال duration: بشكل عام تكون قيمتها الفرق الزمني بين ال mark end وال mark start. ملاحظة: تذكر أن ال measure وقت بين نقطتين mark.

 

شاهد الأمثلة التالية:

في هذه الصورة قمنا بإضافة mark إلى مخطط الزمني، أسميناه calendar-start-mark

والآن شاهد نتيجة استرجاعها، ولاحظ أن ال duration قيمته صفر دوما، ولاحظ كيف استطعت النظر للوقت الخاص بكل نقطة ضمن المخطط الزمني:

 

والآن، لنشاهد أهمية ال measure لقياس الأداء بين النقطتين الخاصة بال calendar، وبكل تأكيد، يمكنك اختيار ما شئت من النقاط، شاهد الصورة: 

وهذه النتيجة الخاصة بها:

 

لاحظ هنا أن ال duration هو الفرق بين الزمنين الخاص بال marks…

 

والآن، يمكننا الانتقال إلى جزئية أخرى ^^، يتبع في الجزء السادس بإذن الله…

أو مشاهدة مباشرة: