نعلم جميعًا مدى أهمية الأداء. ولكن ماذا نقصد بالتحديد عندما نتحدث عن الأداء و"سرعة" المواقع الإلكترونية؟
في الواقع، الأداء نسبي:
- قد يكون الموقع الإلكتروني سريعًا لمستخدم معيّن (على شبكة سريعة باستخدام جهاز قوي) ولكنه بطيء لمستخدم آخر (على شبكة بطيئة باستخدام جهاز منخفض المستوى).
- قد ينتهي تحميل موقعَين إلكترونيَين في المدة الزمنية نفسها تمامًا، ولكن قد يبدو أنّ أحدهما يتم تحميله بشكل أسرع (إذا كان يحمّل المحتوى تدريجيًا بدلاً من الانتظار حتى النهاية لعرض أي محتوى).
- قد يبدو أنّ موقعًا إلكترونيًا يتم تحميله بسرعة، ولكنّه يستجيب ببطء (أو لا يستجيب على الإطلاق) لتفاعل المستخدم.
عند الحديث عن الأداء، من المهم أن تكون دقيقًا وأن تشير إلى الأداء من حيث المقاييس. معايير موضوعية يمكن قياسها كميًا، ولكن من المهم أيضًا التأكّد من أنّ المقاييس التي تقيسها مفيدة.
تحديد المقاييس
في السابق، كان يتم قياس أداء الويب باستخدام الحدث load. ومع ذلك، على الرغم من أنّ load هي لحظة محدّدة جيدًا في رحلة المستخدِم على الصفحة، لا تتوافق هذه اللحظة بالضرورة مع أيّ شيء يهمّ المستخدِم.
على سبيل المثال، يمكن أن يستجيب الخادم بصفحة بسيطة يتم "تحميلها" على الفور، ولكن بعد ذلك يؤجل جلب المحتوى أو عرض أي شيء على الصفحة إلى عدة ثوانٍ بعد بدء حدث load. تتميز هذه الصفحة من الناحية التقنية بمدة تحميل سريعة، ولكنّ هذه المدة لا تتوافق مع تجربة المستخدم في تحميل الصفحة.
على مدار السنوات القليلة الماضية، عمل أعضاء فريق Chrome بالتعاون مع مجموعة عمل أداء الويب في W3C على توحيد مجموعة من واجهات برمجة التطبيقات والمقاييس الجديدة التي تقيس بدقة أكبر تجربة المستخدمين لأداء صفحة الويب.
للمساعدة في التأكّد من أنّ المقاييس ملائمة للمستخدمين، نحدّدها من خلال بعض الأسئلة الرئيسية:
| هل حدث ذلك؟ | هل بدأ التنقّل بنجاح؟ هل استجاب الخادم؟ |
| هل هذه المعلومات مفيدة؟ | هل تم عرض محتوى كافٍ يمكن للمستخدمين التفاعل معه؟ |
| هل يمكن استخدامه؟ | هل يمكن للمستخدمين التفاعل مع الصفحة، أم أنّها مشغولة؟ |
| هل هو ممتع؟ | هل التفاعلات سلسة وطبيعية وخالية من التأخير؟ |
كيفية قياس المقاييس
يتم قياس مقاييس الأداء بشكل عام بطريقتَين:
- في المختبر: استخدام أدوات لمحاكاة تحميل الصفحة في بيئة متّسقة وخاضعة للرقابة
- في الميدان: على المستخدِمين الفعليين الذين يحمّلون الصفحة ويتفاعلون معها
لا يُعدّ أيّ من هذين الخيارَين أفضل أو أسوأ من الآخر، بل عليك استخدامهما معًا بشكل عام لضمان تحقيق أداء جيد.
في جلسة المعمل
إنّ اختبار الأداء في المختبر أمر ضروري عند تطوير ميزات جديدة. قبل طرح الميزات في قناة الإصدار العلني، من المستحيل قياس خصائص أدائها على المستخدمين الفعليين، لذا فإنّ اختبارها في المختبر قبل طرحها هو أفضل طريقة لمنع حدوث أي تراجع في الأداء.
في المجال
من ناحية أخرى، على الرغم من أنّ الاختبار في المختبر هو بديل معقول للأداء، إلا أنّه لا يعكس بالضرورة تجربة المستخدمين الفعلية لموقعك الإلكتروني.
يمكن أن يختلف أداء الموقع الإلكتروني بشكل كبير استنادًا إلى إمكانات جهاز المستخدم وظروف الشبكة. ويمكن أن يختلف أيضًا بناءً على ما إذا كان المستخدم يتفاعل مع الصفحة (أو كيف يتفاعل معها).
لا تكون عمليات تحميل الصفحات حتمية في جميع الأوقات أيضًا. على سبيل المثال، يمكن أن تختلف خصائص الأداء بشكل كبير من مستخدم لآخر في المواقع الإلكترونية التي تحمّل محتوى أو إعلانات مخصّصة. ولن يرصد الفحص في المختبر هذه الاختلافات.
إنّ الطريقة الوحيدة لمعرفة مستوى أداء موقعك الإلكتروني بالنسبة إلى المستخدمين هي قياس أدائه أثناء تحميله وتفاعل المستخدمين معه. يُعرف هذا النوع من القياس عادةً باسم مراقبة المستخدِمين الفعليين (RUM).
أنواع المقاييس
هناك عدة أنواع أخرى من المقاييس ذات الصلة بنظرة المستخدِمين إلى الأداء.
- سرعة التحميل المتأثّرة بالعوامل الخارجية: هي سرعة تحميل الصفحة وعرض جميع عناصرها المرئية على الشاشة.
- سرعة الاستجابة أثناء التحميل: تشير إلى سرعة تحميل الصفحة وتنفيذ أي رمز JavaScript مطلوب كي تستجيب المكوّنات بسرعة لتفاعل المستخدم.
- سرعة الاستجابة أثناء التشغيل: بعد تحميل الصفحة، مدى سرعة استجابة الصفحة لتفاعل المستخدم.
- الثبات المرئي: هل تتغيّر العناصر على الصفحة بطرق غير متوقّعة للمستخدمين وقد تؤثر في تفاعلاتهم؟
- السلاسة: هل يتم عرض الانتقالات والصور المتحركة بمعدّل لقطات ثابت وسلاسة من حالة إلى أخرى؟
بالنظر إلى كل هذه الأنواع من مقاييس الأداء، من المرجّح أن يكون واضحًا أنّه ما مِن مقياس واحد كافٍ لرصد جميع خصائص أداء الصفحة.
المقاييس المهمة التي يجب قياسها
- سرعة عرض المحتوى على الصفحة (FCP): يقيس هذا المقياس الوقت المنقضي منذ بدء تحميل الصفحة حتى وقت عرض أي جزء من محتوى الصفحة على الشاشة. (مختبر، حقل)
- سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP): يقيس هذا المقياس الوقت المنقضي منذ بدء تحميل الصفحة حتى وقت عرض أكبر مقطع نصي أو عنصر صورة على الشاشة. (مختبر، حقل)
- مدى استجابة الصفحة لتفاعلات المستخدم (INP): يقيس هذا المقياس وقت استجابة كل تفاعل من خلال النقر أو الضغط على لوحة المفاتيح مع الصفحة، وبناءً على عدد التفاعلات، يختار أسوأ وقت استجابة للتفاعل مع الصفحة (أو أقرب وقت إلى أعلى وقت استجابة) كقيمة واحدة تمثّل مدى استجابة الصفحة بشكل عام. (مختبر، حقل)
- إجمالي وقت الحظر (TBT): يقيس إجمالي الوقت بين "سرعة عرض المحتوى على الصفحة" و"وقت التفاعل" الذي تم فيه حظر سلسلة التعليمات الرئيسية لفترة طويلة بما يكفي لمنع الاستجابة للبيانات التي يدخلها المستخدم. (مختبر)
- متغيّرات التصميم التراكمية (CLS): تقيس النتيجة التراكمية لجميع التغييرات غير المتوقّعة في التصميم التي تحدث بين بدء تحميل الصفحة وتغيير حالتها في مسار الإحالة الناجحة إلى "مخفية". (مختبر، حقل)
- مدة تحميل أول بايت (TTFB): تقيس هذه المقاييس الوقت الذي تستغرقه الشبكة في الردّ على طلب المستخدِم الذي يتضمّن أول بايت من أحد الموارد. (مختبر، حقل)
في بعض الحالات، سيتمّ تقديم مقاييس جديدة لتغطية الجوانب غير المتوفّرة، ولكن في حالات أخرى، تكون أفضل المقاييس هي المقاييس المخصّصة خصيصًا لموقعك الإلكتروني.
المقاييس المخصّصة
مقاييس الأداء التي تمّت مناقشتها سابقًا مفيدة للحصول على فهم عام لخصائص الأداء لمعظم المواقع الإلكترونية على الويب. وهي مفيدة أيضًا لتوفير مجموعة مشتركة من المقاييس للمواقع الإلكترونية من أجل مقارنة أدائها بأداء منافسيها.
ومع ذلك، قد تكون هناك أوقات يكون فيها موقع إلكتروني معيّن فريدًا بطريقة ما تتطلّب مقاييس إضافية لرصد الصورة الكاملة للأداء. على سبيل المثال، يهدف مقياس LCP إلى قياس وقت انتهاء تحميل المحتوى الرئيسي للصفحة، ولكن قد تكون هناك حالات لا يكون فيها العنصر الأكبر جزءًا من المحتوى الرئيسي للصفحة، وبالتالي قد لا يكون مقياس LCP ذا صلة.
لحلّ هذه الحالات، عملت مجموعة عمل Web Performance Working Group أيضًا على توحيد واجهات برمجة التطبيقات ذات المستوى الأدنى التي يمكن أن تكون مفيدة لتنفيذ المقاييس المخصّصة الخاصة بك:
- User Timing API
- Long Tasks API
- Long Animation Frames API
- Element Timing API
- Navigation Timing API
- Resource Timing API
- توقيت الخادم
يمكنك الرجوع إلى دليل المقاييس المخصّصة للتعرّف على كيفية استخدام واجهات برمجة التطبيقات هذه لقياس خصائص الأداء الخاصة بموقعك الإلكتروني.