अवलोकन

जब वेबपेज उपयोगकर्ता के डिवाइस पर सही रूप से प्रदर्शित या कार्य करने में विफल होता है, तो एक वेबपेज रेंडरिंग समस्या उत्पन्न होती है। यह समस्या विभिन्न रूपों में प्रकट हो सकती है, जैसे अधूरे या विकृत चित्र, टूटे हुए लेआउट, धीमा लोडिंग समय, या अप्रतिसादी विशेषताएँ। इन समस्याओं का कारण विभिन्न कारकों से उत्पन्न हो सकता है। 

हाइपरटेक्स्ट ट्रांसफर प्रोटोकॉल Archive (HAR) एक उपकरण है जो वेबपेज रेंडरिंग समस्याओं के निदान और समाधान में मदद कर सकता है। HAR नेटवर्क प्रशासकों को नेटवर्क ट्रैफ़िक डेटा को कैप्चर और विश्लेषण करने की अनुमति देता है, जिसमें अनुरोध, प्रतिक्रियाएँ, और समय शामिल होता है, जब उपयोगकर्ता किसी वेबपेज पर पहुँचते हैं। यह डेटा यह अंतर्दृष्टि प्रदान कर सकता है कि वेबपेज कैसे लोड हो रही है और प्रदर्शन कर रही है, कहीं कोई बाधाएँ या त्रुटियाँ पहचानने में मदद कर सकता है, और रेंडरिंग समस्याओं के मूल कारण का निर्धारण करने में सहायक हो सकता है।

यह लेख चर्चा करेगा कि हम HAR डेटा का उपयोग वेबपेज रेंडरिंग समस्या का समाधान करने के लिए कैसे कर सकते हैं।

पर्यावरण

HAR डेटा आवश्यक है।

निर्देश

समस्या को पुनरुत्पादित करते समय HAR डेटा एकत्र करें। HAR डेटा कैसे एकत्र करें, इस पर निर्देश के लिए इस लेख को देखें। हम यह देखेंगे कि HTTP स्थिति कोड के साथ-साथ HTTP अनुरोध के प्रतिक्रिया समय की जांच करके एकत्रित HAR डेटा का उपयोग मुद्दों को प्रकट करने के लिए कैसे कर सकते हैं।  

हाइपरटेक्स्ट ट्रांसफर प्रोटोकॉल स्थिति कोड

HTTP स्थिति कोड क्लाइंट के सर्वर अनुरोध की स्थिति के बारे में जानकारी प्रदान करते हैं, जो संचार प्रक्रिया के दौरान उत्पन्न होने वाली किसी भी समस्या का निदान और समस्या निवारण करने में मदद करता है। नीचे सामान्य HTTP स्थिति कोड और उनका क्या अर्थ होता है दिखाया गया है। विवरण के लिए HTTP/1.1 स्थिति कोड परिभाषा पृष्ठ को देखें।

• 200 - सफलता
• 404 - पृष्ठ नहीं मिला / खराब अनुरोध
• 401 - अनधिकृत
• 403 - निषिद्ध 
• 304 - संशोधित नहीं (सामग्री कैश की गई है)
• 500 - आंतरिक सर्वर त्रुटि

चरण

1. संगृहीत HAR डेटा को गूगल HAR विश्लेषक में लोड करें
2. HTTP स्थिति कोड द्वारा अनुरोधों को फ़िल्टर करें।
   उदाहरण
   नीचे एक HAR फ़ाइल दिखाई गई है जो Google HAR विश्लेषक में लोड की गई थी। यह कनेक्शन एक प्रयास है जिसमें Facebook ब्राउज़ करते समय सामग्री सही ढंग से लोड नहीं हुई। गैर-सफ़ल (गैर-2xx) HTTP स्थिति कोड द्वारा फ़िल्टर करके, हम देख सकते हैं कि डोमेन नाम x.x.fbcdn.net के लिए कई 403 (निषिद्ध) प्रतिक्रियाएँ हैं (पीले रंग से चिह्नित)। अगला चरण फिर यह जांच करना होगा कि ये अनुरोध निषिद्ध क्यों हैं। 
   
   
   
3. देश के लिए जहाँ Google की पहुँच प्रतिबंधित है (उदा. चीन), Google HAR विश्लेषक का उपयोग करना संभव नहीं है। इस मामले में, आप उसी डेवलपर टूल में HAR डेटा को लोड कर सकते हैं जिसमें डेटा एकत्र किया गया था, और फिर HTTP स्थिति कोड के अनुसार अवरोही क्रम में क्रमबद्ध कर सकते हैं।
   

लंबा वेबपेज लोड समय

वेब अनुप्रयोगों के साथ सामना किए जाने वाले सबसे सामान्य मुद्दों में से एक है उनका धीमा वेबपेज लोडिंग या कुछ मामलों में, वेबपेज की पूर्णतया लोड में विफलता। HAR डेटा का उपयोग करके, हम प्रत्येक अनुरोध के विवरण में गहराई से जा सकते हैं और पहचान सकते हैं कि कौन से लोड होने में महत्वपूर्ण विलंब का अनुभव कर रहे हैं। यह संभव है कि कुछ अनुरोध हमेशा के लिए लोड हो रहे हैं, जिससे अनुप्रयोग के समग्र गति में कमी हो रही है। HAR डेटा का विश्लेषण करके, हम इन समस्याग्रस्त अनुरोधों को निर्धारित कर सकते हैं और उन्हें संबोधित करने के लिए उचित उपाय कर सकते हैं।

चरण

1. संग्रहित HAR डेटा को Google HAR विश्लेषक में लोड करें।

2. सबसे धीमी प्रतिक्रिया देने वाला अनुरोध (आमतौर पर कुल समय देखने वाला सबसे लम्बा बार) पर क्लिक करें

3. देखें कि विलंब का मुख्य योगदानकर्ता क्या है (अवरुद्ध करना, प्रतीक्षा करना या प्राप्त करना)
   महत्वपूर्ण समय फ़ील्ड्स
   अवरुद्ध समय - समय जो अनुरोध ने ब्राउज़र द्वारा भेजे जाने से पहले प्रतीक्षा में बिताया।
   प्रतीक्षा समय - सर्वर के प्रतिक्रिया का इंतजार करने का समय। अगर यह मान उच्च है, तो इसका अर्थ हो सकता है कि सर्वर व्यस्त है या प्रदर्शन का मुद्दा हो रहा है। नीचे हम देख सकते हैं कि सर्वर से लगभग 5 सेकंड की प्रतीक्षा समय है:
   प्राप्त समय - यह समय सर्वर द्वारा आवश्यक जानकारी को क्लाइंट को स्थानांतरित करने के लिए लिया गया। आमतौर पर यहाँ पर हम नेटवर्क समस्या का पता लगाते हैं। 
   
   नोट: समय फ़ील्ड क्रोम में डेवलपर के टूल का उपयोग करते समय भी उपलब्ध होता है, जो समय चरणों का समान ब्रेकडाउन प्रदान करता है। समय ब्रेकडाउन चरणों की विस्तृत व्याख्या के लिए, कृपया timing-preview देखें।
   

4. देश, जहां गूगल का पहुँच प्रतिबंधित है (उदाहरण के लिए चीन), वहां Google HAR विश्लेषक का उपयोग संभव नहीं होगा। इस मामले में, आप वह HAR डेटा उसी डेवलपर के टूल में लोड कर सकते हैं जिसमें डेटा संग्रहीत किया गया था।
5. विश्लेषण चरण 2 के समान होगा जहां हम सबसे लम्बी प्रतिक्रिया समय वाले कनेक्शनों को पहचानने पर ध्यान केंद्रित करते हैं। नीचे दिए गए स्क्रीनशॉट में, अवलोकन अनुभाग के तहत, हम देख सकते हैं कि कई कनेक्शन महत्वपूर्ण लोडिंग विलंबों का अनुभव कर रहे हैं। इन कनेक्शनों को अवलोकन अनुभाग में हाइलाइट करके, हम पहचान सकते हैं कि कुछ अनुरोधों को लोड होने में 30 से अधिक सेकंड लग सकते हैं। इनमें से किसी एक कनेक्शन का चयन करने पर पता चलता है कि यह app.launchdarkly.com की एक अनुरोध है।
   
6. एक बार लंबे लोड होने वाले समय के अनुरोधों की पहचान करने के बाद, देरी के वास्तविक कारण को खोजने के लिए और अधिक जांच की जा सकती है। एक संभावित कारक का पता लगाना यह हो सकता है कि ऑन-प्रिमाइस फ़ायरवॉल मौजूद हैं जो इन अनुरोधों को अवरुद्ध कर सकते हैं।
7. कुछ क्षेत्रों में, जैसे कि चीन, यह एक ज्ञात समस्या है कि कुछ लंबे लम्बित अनुरोध एप्लिकेशन्स के भीतर एम्बेडेड ट्रैकर्स के कारण हो सकते हैं। अधिक विवरण के लिए देखें चीन | वेबपृष्ठ में रेंडरिंग समस्याएं।