المرحلة التمهيدية

قبل جمع مقاييس الأداء لإجراء تدقيق في الموقع الإلكتروني، هناك عدة عمليات تحقّق يمكنك إجراؤها لتحديد حلول سهلة والمجالات التي يجب التركيز عليها.

التحقّق من الصحة: البنية والرمز

سدّد الديون الفنية

يجب تصحيح الأخطاء البسيطة وإزالة مواد العرض والرموز البرمجية غير المطلوبة قبل measuring performance، مع الحرص على الاحتفاظ بسجلّ قبل وبعد للمشاكل والإصلاحات. ويمكن أن تظل هذه التحسينات جزءًا من عمل التدقيق.

بنية الموقع الإلكتروني ومواد العرض
هل يمكن إزالة أي محتوى بسهولة من مستودع الرموز البرمجية ومن الموقع الإلكتروني، مثل الصفحات القديمة أو المحتوى أو مواد العرض الأخرى غير المستخدَمة؟ ابحث عن الصفحات غير المرتبطة بصفحات أخرى والنماذج المكرّرة والصور غير المستخدَمة والرموز البرمجية والمكتبات غير المستخدَمة.

أخطاء وقت التشغيل
تحقّق من الأخطاء التي تم الإبلاغ عنها في وحدة تحكّم المتصفّح. يجب ألا يكون هناك أي :).

التدقيق
هل هناك أخطاء في رمز HTML أو CSS أو JavaScript؟ يمكن أن يساعد دمج فحص الأخطاء في سير العمل في الحفاظ على جودة الرموز البرمجية وتجنُّب حدوث تراجعات. ننصحك باستخدام HTMLHint وStyleLint و ESLint، والتي يمكن استخدامها كمكوّنات إضافية لأداة تعديل الرموز البرمجية، أو تشغيلها من سطر الأوامر ضمن عمليات سير العمل وأدوات الدمج المستمر، مثل Travis.

الروابط والصور غير الصالحة
تتوفّر العديد من الأدوات لاختبار الروابط غير الصالحة في وقت الإنشاء و وقت التشغيل، بما في ذلك إضافات Chrome (هذه الإضافة جيدة) وأدوات Node، مثل Broken Link Checker.

المكوّنات الإضافية
يمكن أن تشكّل المكوّنات الإضافية، مثل Flash وSilverlight، خطرًا على الأمان، وقدتم إيقاف استخدامها نهائيًا، ولا تعمل على الأجهزة الجوّالة. استخدِم Lighthouse للتحقّق من المكوّنات الإضافية.

الاختبار على مجموعة متنوعة من الأجهزة والسياقات

لا شيء يضاهي الاستعانة بأشخاص حقيقيين لاختبار موقعك الإلكتروني باستخدام أجهزة حقيقية ومتصفحات متعددة و سياقات اتصال مختلفة.

تكون بعض عمليات التحقّق هذه ذاتية نسبيًا، ولكن يمكنها تحديد المشاكل التي تؤثّر في الأداء المُلاحظ. على سبيل المثال، تؤدي الروابط غير الصالحة إلى إضاعة الوقت وشعور المستخدم بأنّ الموقع الإلكتروني "لا يستجيب". إنّ النص غير المقروء يصعّب قراءة المحتوى.

الاختبار على مختلف الأجهزة
جرِّب أحجام إطارات عرض ونوافذ مختلفة. استخدِم جهازًا جوّالاً واحدًا على الأقل و جهاز كمبيوتر مكتبيًا واحدًا. جرِّب موقعك الإلكتروني على جهاز جوّال منخفض المواصفات مزوّد بشاشة صغيرة، إن أمكن. هل النص مقروء؟ هل هناك أي صور لا تعمل؟ هل يمكنك التكبير؟ هل مساحات اللمس كبيرة بما يكفي؟ هل السرعة بطيئة؟ هل هناك أي ميزات لا تستجيب؟ التقاط لقطة شاشة أو فيديو للنتائج

الاختبار على جميع المنصات
ما هي المنصات التي تستهدفها؟ عليك إجراء الاختبار على المتصفّحات و أنظمة التشغيل التي يستخدمها المستخدمون الآن وفي المستقبل.

الاتصال
يجب إجراء الاختبار على عدة أنواع شبكات مستهدَفة: متصلة وWi-Fi و شبكة الجوّال. يمكنك استخدام أدوات المتصفّح لمحاكاة مجموعة متنوعة من ظروف الشبكة.

الأجهزة
احرص على تجربة موقعك الإلكتروني على الأجهزة نفسها التي يستخدمها المستخدمون. تعرِض المحاولة التالية صورة الصفحة نفسها على هاتفَين مختلفَين.

صفحة مشاركة مدونة تعمل على هاتف بمواصفات عالية وعلى هاتف بمواصفات منخفضة

على الشاشة الأكبر حجمًا، يكون النص صغيرًا ولكن قابلاً للقراءة. على الشاشة الأصغر حجمًا، يعرض المتصفّح تنسيق المحتوى بشكل صحيح، ولكن لا يمكن قراءة النص حتى عند تكبيره. الشاشة مموهة وتعرض 'تداخلًا في الألوان"، أي أنّ اللون الأبيض لا يبدو أبيضًا، ما يجعل المحتوى أقل وضوحًا.

يمكن أن تكون النتائج البسيطة مثل هذه أكثر أهمية بكثير من بيانات الأداء غير الواضحة.

تجربة واجهة المستخدم وتجربة المستخدم

تسهيل الاستخدام وسهولة القراءة
لضمان إتاحة محتوى موقعك الإلكتروني ووظائفه للجميع، عليك فهم تنوع المستخدمين. يفحص Lighthouse والأدوات الأخرى مشاكل تتعلّق بالوصول إلى المحتوى، ولكن لا شيء يضاهي الاختبار في الواقع. حاوِل قراءة البيانات والتنقّل فيها وإدخالها في مجموعة متنوعة من السيناريوهات، مثل الإضاءة الخارجية أو في القطار. اطلب من مجموعة من الأصدقاء والعائلة والزملاء تجربة موقعك الإلكتروني. جرِّب استخدام قارئ شاشة للاطّلاع على المحتوى، مثل VoiceOver على أجهزة Mac أو NVDA على أجهزة Windows.

يمكنك الاطّلاع على مزيد من المعلومات حول تنفيذ ميزات تسهيل الاستخدام ومراجعتها في دورة Udacity حول تسهيل الاستخدام ومقالة Web Fundamentals كيفية إجراء مراجعة تسهيل الاستخدام.

احتفظ بسجلّ لتدقيق تسهيل الاستخدام. من المرجّح أن تتمكّن من إجراء تحسينات بسيطة تعود بالفائدة على جميع المستخدمين.

المشاكل الأساسية في واجهة المستخدم وتجربة المستخدم
التفاعلات التي لا تعمل على النحو المطلوب، والعناصر التي تتجاوز حدود الشاشة في النوافذ وإطارات العرض الأصغر حجمًا، واستهدافات النقر الصغيرة جدًا، والمحتوى غير القابل للقراءة، والانتقال المفاجئ في التمرير… افتح صفحات متعدّدة على الموقع الإلكتروني، وجرِّب التنقّل وجميع الوظائف الأساسية. الاحتفاظ بسجلّ

الصور والصوت والفيديو
تحقّق من عدم تداخل المحتوى مع الحواف، ونسبة العرض إلى الارتفاع غير الصحيحة، وعمليات الاقتصاص السيئة، ومشاكل الجودة.

اختبارات واجهة المستخدم الذاتية
قد لا تكون هذه الاختبارات كلها ذات صلة، ولكن يمكن أن تسهّل التغييرات البسيطة عملية إعادة التنظيم:

  • هل يظهر السؤال "ما الذي يمكنني فعله هنا؟" بوضوح فور فتح الموقع الإلكتروني؟
  • هل ينجذب جمهورك إلى المحتوى ويتابع الروابط؟
  • هل هناك تسلسلات هرمية أو مسارات مرئية، أم أنّ كل العناصر لها الأهمية المرئية نفسها؟
  • هل التنسيق مزدحم؟
  • هل هناك عدد كبير جدًا من الخطوط؟
  • هل هناك صور أو محتوى آخر يمكن إزالته؟
  • إنّ تصميم المحتوى لا يقل أهمية عن تصميم الواجهة. هل محتوى النصوص والصور على موقعك الإلكتروني مناسب لسياقات الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي؟ هل يمكن إزالة أي شيء؟ اكتب المحتوى المناسب للأجهزة الجوّالة.