प्रीवर्क

साइट के ऑडिट के लिए परफ़ॉर्मेंस मेट्रिक इकट्ठा करने से पहले, कई तरह की जांच की जा सकती हैं. इनकी मदद से, ठीक करने के आसान तरीकों और उन चीज़ों की पहचान की जा सकती है जिन पर ध्यान देना ज़रूरी है.

तकनीकी क़र्ज़ चुकाएं!

जहां भी हो सके, आसान गड़बड़ियों को ठीक करें और परफ़ॉर्मेंस को मापने से पहले, ग़ैर-ज़रूरी एसेट और कोड हटाएं — लेकिन समस्याओं और उन्हें ठीक करने से पहले और बाद का रिकॉर्ड ज़रूर रखें. ये सुधार अब भी आपके ऑडिट का हिस्सा हो सकते हैं.

साइट आर्किटेक्चर और एसेट
क्या कोड रेपो और साइट से किसी भी चीज़ को आसानी से हटाया जा सकता है, जैसे कि इस्तेमाल न किए गए लेगसी पेज, कॉन्टेंट या अन्य एसेट? ऐसे पेज, ग़ैर-ज़रूरी टेंप्लेट, इस्तेमाल नहीं की गई इमेज, और इस्तेमाल न किए गए कोड और लाइब्रेरी की जांच करें जो किसी भी फ़ोल्डर में नहीं हैं.

रनटाइम से जुड़ी गड़बड़ियां
ब्राउज़र कंसोल में रिपोर्ट की गई गड़बड़ियों की जांच करें. वहां कोई : नहीं होना चाहिए.

Linting
क्या आपके एचटीएमएल, सीएसएस या JavaScript कोड में गड़बड़ियां हैं? अपने वर्कफ़्लो में लिंटिंग बनाने से कोड की क्वालिटी बनाए रखने और रिग्रेशन से बचने में मदद मिल सकती है. हम HTMLHint, StyleLint और ESLint को सुझाव देते हैं, जिन्हें कोड एडिटर प्लगिन के तौर पर इस्तेमाल किया जा सकता है. इसके अलावा, इन्हें वर्कफ़्लो प्रोसेस और Travis जैसे लगातार इंटिग्रेशन टूल में मौजूद कमांड लाइन से चलाया जा सकता है.

टूटे हुए लिंक और इमेज
बिल्ड के समय और रनटाइम के दौरान, काम न करने वाले लिंक की जांच करने के लिए कई टूल मौजूद हैं. इनमें Chrome एक्सटेंशन (यह एक अच्छा है) और टूटा लिंक चेकर जैसे नोड टूल शामिल हैं.

प्लगिन
Flash और Silverlight जैसे प्लग इन सुरक्षा के लिए जोखिम हो सकते हैं. उनके लिए सहायता बंद कर दी गई है और वे मोबाइल पर काम नहीं करते हैं. प्लगिन की जांच करने के लिए, Lighthouse का इस्तेमाल करें.

अलग-अलग डिवाइसों और कॉन्टेक्स्ट की मदद से टेस्ट करें

लोगों से असली डिवाइस, कई ब्राउज़र, और कनेक्टिविटी के अलग-अलग कॉन्टेक्स्ट के हिसाब से अपनी साइट की जांच कराने से बेहतर कुछ भी नहीं होता.

इनमें से कुछ जांच अलग-अलग लोगों के हिसाब से होती हैं, लेकिन इनकी वजह से अनुमानित परफ़ॉर्मेंस पर असर डालने वाली समस्याओं की पहचान की जा सकती है. काम न करने वाले लिंक, जैसे कि समय बर्बाद होने पर और 'गैर-ज़िम्मेदार' महसूस करना. पढ़ा नहीं जा सकने वाला टेक्स्ट, समझने में धीमा होता है.

क्रॉस-डिवाइस टेस्टिंग
अलग-अलग व्यूपोर्ट और विंडो साइज़ आज़माएं. कम से कम एक मोबाइल और एक डेस्कटॉप डिवाइस इस्तेमाल करें. अगर हो सके, तो छोटी स्क्रीन वाले कम सुविधाओं वाले मोबाइल डिवाइस पर अपनी साइट आज़माएं. क्या टेक्स्ट को पढ़ा जा सकता है? क्या कोई इमेज काम नहीं कर रही है? क्या आप ज़ूम कर सकते हैं? क्या टच टारगेट का साइज़ काफ़ी बड़ा है? क्या यह धीमा है? क्या कोई सुविधा काम नहीं कर रही है? नतीजों का स्क्रीनशॉट या वीडियो बनाएं.

क्रॉस-प्लैटफ़ॉर्म टेस्टिंग
किन प्लैटफ़ॉर्म को टारगेट किया जा रहा है? आपको उन ब्राउज़र और ऑपरेटिंग सिस्टम की जांच करनी होगी जिनका इस्तेमाल आपके उपयोगकर्ता अभी और आने वाले समय में करेंगे.

कनेक्टिविटी
अलग-अलग टारगेट नेटवर्क टाइप पर टेस्ट करें: कनेक्ट किया गया, वाई-फ़ाई, और मोबाइल नेटवर्क. नेटवर्क की कई तरह की स्थितियों को अपनाने के लिए, ब्राउज़र टूल का इस्तेमाल किया जा सकता है.

डिवाइस
अपनी साइट को उन डिवाइसों पर ही आज़माएं जिन पर आपके उपयोगकर्ता हैं. नीचे दी गई फ़ोटो में, दो अलग-अलग फ़ोन पर एक ही पेज दिख रहा है.

ब्लॉग पोस्ट का पेज, जो हाई और कम
स्पेसिफ़िकेशन वाले फ़ोन पर चल रहा है

बड़ी स्क्रीन पर दिखने वाला टेक्स्ट छोटा होता है, लेकिन इसे आसानी से पढ़ा जा सकता है. छोटी स्क्रीन पर ब्राउज़र, लेआउट को सही तरीके से रेंडर करता है, लेकिन ज़ूम इन होने पर भी टेक्स्ट पढ़ा नहीं जा सकता. डिस्प्ले धुंधला है और इसमें 'कलर कास्ट' है — सफ़ेद रंग सफ़ेद नहीं दिखता है — इससे कॉन्टेंट को आसानी से पढ़ा जा सकता है.

इस तरह के सामान्य नतीजे, परफ़ॉर्मेंस डेटा को धुंधला करने की तुलना में कहीं ज़्यादा अहम हो सकते हैं!

यूज़र इंटरफ़ेस (यूआई) और उपयोगकर्ता अनुभव को आज़माएं

सुलभता, उपयोगिता, और पठनीयता
यह पक्का करने के लिए कि आपकी साइट की सामग्री और फ़ंक्शन सभी के लिए उपलब्ध हैं, आपको अपने उपयोगकर्ताओं की विविधता को समझना होगा. Lighthouse और दूसरे टूल खास सुलभता समस्याओं के लिए जांच करते हैं, लेकिन असली दुनिया में जांच से बेहतर कुछ भी नहीं हो सकता. अलग-अलग स्थितियों में डेटा पढ़ने, नेविगेट करने, और डालने की कोशिश करें. उदाहरण के लिए, सूरज की रोशनी में या ट्रेन में. अपने दोस्तों, परिवार के सदस्यों, और साथ काम करने वालों को अपनी साइट आज़माने के लिए कहें. किसी स्क्रीन रीडर की मदद से कॉन्टेंट इस्तेमाल करें. जैसे, Mac पर VoiceOver या Windows पर NVDA.

सुलभता को लागू करने और उसकी समीक्षा करने के बारे में ज़्यादा जानने के लिए, सुलभता पर Udacity कोर्स और वेब के बुनियादी लेख सुलभता समीक्षा कैसे करें लेख देखें.

सुलभता सुविधाओं के ऑडिट का रिकॉर्ड रखें. हो सकता है कि आप ऐसे आसान सुधार कर पाएं जो आपके सभी उपयोगकर्ताओं के लिए अच्छे हों.

यूज़र इंटरफ़ेस (यूआई) और उपयोगकर्ता अनुभव से जुड़ी बुनियादी समस्याएं
ऐसे इंटरैक्शन जो उन्हें सही तरीके से काम नहीं करते, छोटी विंडो और व्यूपोर्ट पर एलिमेंट को ओवरफ़्लो करना, बहुत छोटे टैप टारगेट, नहीं पढ़ा जा सकने वाला कॉन्टेंट, स्क्रोल करना... साइट के कई पेज खोलें, नेविगेशन और सभी मुख्य फ़ंक्शन आज़माएं. रिकॉर्ड रखें.

इमेज, ऑडियो, और वीडियो
बहुत ज़्यादा कॉन्टेंट, गलत आसपेक्ट रेशियो, काटने के खराब तरीके, और क्वालिटी से जुड़ी समस्याओं की जांच करें.

सब्जेक्टिव यूज़र इंटरफ़ेस (यूआई) टेस्ट
हो सकता है कि ये सभी काम के न हों, लेकिन आसान बदलावों से रीफ़ैक्टरिंग को आसान बनाया जा सकता है:

  • क्या 'मैं यहां क्या कर सकता/सकती हूं?' साइट खोलने पर तुरंत साफ़ हो जाता है?
  • क्या आप कॉन्टेंट देखने और लिंक फ़ॉलो करने के लिए तैयार हैं?
  • क्या विज़ुअल हैरारकी या पाथवे हैं — या हर चीज़ का विज़ुअल वेट एक जैसा है?
  • क्या लेआउट अव्यवस्थित है?
  • क्या फ़ॉन्ट की संख्या बहुत ज़्यादा है?
  • क्या इसमें ऐसी इमेज या अन्य कॉन्टेंट है जिसे हटाया जा सकता है?
  • कॉन्टेंट का डिज़ाइन, इंटरफ़ेस के डिज़ाइन जितना ही ज़रूरी है. क्या आपकी साइट पर मौजूद टेक्स्ट और इमेज का कॉन्टेंट, मोबाइल और डेस्कटॉप के हिसाब से सही है? क्या यहां से कुछ भी हटाया जा सकता है? मोबाइल के लिए लिखें.