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

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

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

تخلَّص من الآثار التقنية طويلة الأمد.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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