प्रीवर्क

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

मान्यता की जांच: आर्किटेक्चर और कोड

तकनीकी समस्याओं को ठीक करें!

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

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

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

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

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

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

अलग-अलग डिवाइसों और स्थितियों में जांच करना

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

इनमें से कुछ जांचें, काफ़ी हद तक सब्जेक्टिव होती हैं. हालांकि, इनसे उन समस्याओं का पता लगाया जा सकता है जो परफ़ॉर्मेंस पर असर डालती हैं. उदाहरण के लिए, काम न करने वाले लिंक से समय बर्बाद होता है और ऐसा लगता है कि वे 'काम नहीं कर रहे हैं'. साफ़ तौर पर न दिखने वाले टेक्स्ट को पढ़ने में समय लगता है.

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

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

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

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

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

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

इस तरह के आसान नतीजे, परफ़ॉर्मेंस के ऐसे डेटा से कहीं ज़्यादा अहम हो सकते हैं जो आसानी से समझ में न आए!

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

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

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

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

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

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

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

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