يُعد الأداء جزءًا مهمًا من تجربة المستخدم، وهو يؤثر في مقاييس النشاط التجاري. قد يكون من المغري أن تفكر في موقع إلكتروني جيّد إذا كنت مطوِّرًا جيدًا، ولكن في الحقيقة، نادرًا ما يكون لهذا النوع من الأداء أي تأثير سلبي. كما هو الحال مع معظم الأشياء الأخرى - للوصول إلى هدف، عليك تحديده بوضوح. ابدأ الرحلة من خلال وضع ميزانية للأداء.
التعريف
ميزانية الأداء هي مجموعة من الحدود التي يتم فرضها على المقاييس التي تؤثر في أداء الموقع الإلكتروني. قد يشمل ذلك الحجم الإجمالي للصفحة أو الوقت الذي يستغرقه التحميل على شبكة الجوّال أو حتى عدد طلبات HTTP التي يتم إرسالها. يساعد تحديد الميزانية في بدء المحادثة حول أداء الويب. إنها بمثابة نقطة مرجعية لاتخاذ القرارات بشأن التصميم والتكنولوجيا وإضافة الميزات.
يتيح وجود ميزانية للمصممين التفكير في تأثيرات الصور عالية الدقة وعدد خطوط الويب التي يختارونها. وتساعد هذه الأداة أيضًا المطوّرين على مقارنة الأساليب المختلفة بمشكلة ما وتقييم أطر العمل والمكتبات استنادًا إلى حجمها وتكلفة التحليل.
اختيار مقاييس
المقاييس المستندة إلى الكم ⚖️
وهذه المقاييس مفيدة في المراحل الأولى من عملية التطوير لأنّها تُبرز تأثير تضمين الصور والنصوص البرمجية الكثيفة. كما أنها سهلة التواصل مع كل من المصممين والمطورين.
سبق أن ذكرنا بعض الأمور التي يمكنك تضمينها في ميزانية الأداء، مثل حجم الصفحة وعدد طلبات HTTP، ولكن يمكنك تقسيمها إلى حدود أكثر دقة مثل:
- الحد الأقصى لحجم الصور
- الحد الأقصى لعدد خطوط الويب
- الحد الأقصى لحجم النصوص البرمجية، بما في ذلك أُطر العمل
- إجمالي عدد الموارد الخارجية، مثل النصوص البرمجية التابعة لجهات خارجية
ومع ذلك، فإن هذه الأرقام لا تخبرك كثيرًا عن تجربة المستخدم. يمكن عرض صفحتين لهما نفس عدد الطلبات أو نفس الوزن بشكل مختلف بناءً على الترتيب الذي يتم طلب الموارد به. في حال تحميل مورد مهم، مثل صورة رئيسية أو ورقة أنماط على إحدى الصفحات، في وقت متأخر من العملية، سينتظر المستخدمون وقتًا أطول لرؤية محتوى مفيد وسيرون الصفحة أبطأ. إذا تم تحميل الأجزاء الأكثر أهمية بسرعة في الصفحة الأخرى، فقد لا تلاحظ ما إذا لم يتم تحميل باقي الصفحة.
لهذا السبب من المهم تتبع نوع آخر من المقاييس.
توقيتات الإنجاز ⏱️
تشير توقيتات المحطات المهمة إلى الأحداث التي تحدث أثناء تحميل الصفحة، مثل حدث DOMContentLoaded أو حدث تحميل. وأكثر الأوقات فائدةً هي مقاييس الأداء التي تركّز على المستخدم والتي تخبرك بشيء عن تجربة تحميل الصفحة. تتوفّر هذه المقاييس من خلال واجهات برمجة تطبيقات المتصفِّح وكجزء من تقارير Lighthouse.
يقيس سرعة عرض أول محتوى (FCP) الوقت الذي يعرض فيه المتصفِّح أول جزء من المحتوى من نموذج العناصر في المستند (DOM)، مثل النصوص أو الصور.
يقيس وقت التفاعل (TTI) الوقت الذي تستغرقه الصفحة لتصبح تفاعلية بالكامل وتستجيب بشكل موثوق لإدخال المستخدم. وهذا مقياس في غاية الأهمية يتم تتبعه إذا كنت تتوقع أي نوع من تفاعل المستخدم على الصفحة مثل النقر على الروابط أو الأزرار أو الكتابة أو استخدام عناصر النموذج.
المقاييس المستندة إلى القواعد 🏏
تحتسب Lighthouse وWebPageTest نقاط الأداء استنادًا إلى قواعد أفضل الممارسات العامة التي يمكنك استخدامها كإرشادات. كمكافأة، تقدِّم لك أداة Lighthouse تلميحات لإجراء تحسينات بسيطة.
وستحصل على أفضل النتائج في حال تتبُّع مجموعة من مقاييس الأداء القائمة على الكمية والتي تركّز على المستخدم. ننصحك بالتركيز على أحجام الأصول في المراحل الأولى من المشروع وبدء تتبُّع سرعة عرض أكبر جزء من المحتوى على الصفحة (FCP) ومؤشر جودة الهواء (TI) في أقرب وقت ممكن.
وضع خط الأساس
الطريقة الوحيدة لمعرفة ما يصلح لموقعك الإلكتروني بشكل أفضل هي تجربته، وهي إجراء بحث عن النتائج ثم اختبارها. حلِّل المنافسة لمعرفة مستواك. 🕵️
إذا لم يكن لديك الوقت لإجراء ذلك، فإليك الأرقام الافتراضية الجيدة التي يمكنك البدء بها:
- أقل من 5 ثوانٍ من وقت التفاعل
- ضمن 170 كيلوبايت من موارد المسار الحرج (مضغوطة أو مصغَّرة)
يتم احتساب هذه الأرقام استنادًا إلى الأجهزة المرجعية الفعلية وسرعة شبكة الجيل الثالث. أكثر من نصف حركة بيانات الإنترنت اليوم تتم على شبكات الجوّال، لذا عليك استخدام سرعة شبكة الجيل الثالث كنقطة بداية.
أمثلة على الميزانيات
ويجب أن تكون قد أعددت ميزانية لمختلف أنواع الصفحات على موقعك، حيث إن المحتوى سيختلف. مثال:
- يجب أن تشحن صفحة المنتج أقل من 170 كيلوبايت من محتوى JavaScript على الأجهزة الجوّالة.
- يجب أن تتضمن صفحة البحث أقل من 2 ميغابايت من الصور على أجهزة الكمبيوتر المكتبي.
- يجب أن يتم تحميل صفحتنا الرئيسية والتفاعل معها خلال أقل من 5 ثوانٍ على شبكة الجيل الثالث البطيئة على هاتف Moto G4.
- يجب أن تحقّق مدونتنا نتيجة أكثر من 80 نتيجة عمليات تدقيق الأداء في Lighthouse
إضافة ميزانيات مخصصة للأداء إلى عملية التصميم
سيعتمد اختيار أداة لذلك كثيرًا على حجم مشروعك والموارد التي يمكنك تخصيصها للمهمة. هناك بعض الأدوات مفتوحة المصدر التي يمكن أن تساعدك في إضافة ميزانية إلى عملية التصميم:
إذا تجاوز أحد العناصر حدًا معيّنًا، يمكنك تنفيذ أحد الإجراءَين التاليَين:
- تحسين ميزة أو مادة عرض حالية 🛠️
- إزالة ميزة أو مادة عرض حالية 🗑️
- عدم إضافة الميزة أو مادة العرض الجديدة ✋⛔
تتبّع الأداء
إن التأكد من سرعة موقعك الإلكتروني بما فيه الكفاية يعني أنه عليك مواصلة القياس بعد الإطلاق الأوليّ. ستوضّح لك مراقبة هذه المقاييس بمرور الوقت والحصول على بيانات من مستخدمين حقيقيين مدى تأثير التغييرات في الأداء في مقاييس النشاط التجاري الرئيسية.
الخاتمة
الغرض من ميزانية الأداء هو التأكد من التركيز على الأداء طوال المشروع وإعداده مبكرًا سيساعد على منع التراجع لاحقًا. يجب أن تكون هي النقطة المرجعية لمساعدتك في معرفة ما يجب تضمينه في موقع الويب الخاص بك. والفكرة الأساسية هي تحديد الأهداف لتحقيق التوازن بين الأداء بشكل أفضل بدون الإضرار بالوظائف أو تجربة المستخدم.🎯
سيرشدك الدليل التالي إلى كيفية تحديد ميزانيتك الأولى المرتكزة على الأداء من خلال بضع خطوات بسيطة.