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