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