प्रीवर्क

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

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

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

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

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

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

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

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

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

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

असल लोगों को असल डिवाइसों, एक से ज़्यादा ब्राउज़र, और अलग-अलग कनेक्टिविटी कॉन्टेक्स्ट के साथ अपनी साइट की जांच करने के लिए कहना, सबसे बेहतर तरीका है.

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

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

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

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

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

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

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

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

यूज़र इंटरफ़ेस (यूआई) और यूज़र एक्सपीरियंस (यूएक्स) आज़माना

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

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

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

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

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

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

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