तीसरे पक्ष की धीमी JavaScript की पहचान करना

Lighthouse और Chrome DevTools की मदद से, अपनी परफ़ॉर्मेंस डिटेक्टिव स्किल को बेहतर बनाएं.

Milica Mihajlija

डेवलपर के तौर पर, आपके पास अक्सर यह कंट्रोल नहीं होता कि आपकी साइट तीसरे पक्ष की कौनसी स्क्रिप्ट लोड करेगी. तीसरे पक्ष के कॉन्टेंट को ऑप्टिमाइज़ करने से पहले, आपको जासूसी करके यह पता लगाना होगा कि आपकी साइट किस वजह से धीमी हो रही है. 🕵️

इस पोस्ट में, आपको Lighthouse और Chrome DevTools का इस्तेमाल करके, धीमे तीसरे पक्ष के संसाधनों की पहचान करने का तरीका पता चलेगा. इस पोस्ट में, कॉन्टेंट की ऐसी बेहतर तकनीकों के बारे में बताया गया है जिन्हें एक साथ सबसे ज़्यादा इस्तेमाल किया जाता है.

अगर आपके पास सिर्फ़ पांच मिनट हैं

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

ऑडिट चलाने के लिए:

1. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
2. लाइटहाउस टैब पर क्लिक करें.
3. मोबाइल पर क्लिक करें.
4. परफ़ॉर्मेंस चेकबॉक्स चुनें. (आपके पास ऑडिट सेक्शन के बाकी चेकबॉक्स हटाने का विकल्प भी है.)
5. सिम्युलेटेड फ़ास्ट 3G, 4x सीपीयू स्लोडाउन पर क्लिक करें.
6. स्टोरेज खाली करें चेकबॉक्स को चुनें.
7. ऑडिट चलाएं पर क्लिक करें.

तीसरे पक्ष का इस्तेमाल

लाइटहाउस तीसरे पक्ष के इस्तेमाल के ऑडिट में, सेवा देने वाली तीसरे पक्ष की उन कंपनियों की सूची दिखती है जिनका इस्तेमाल पेज करता है. इस खास जानकारी से, आपको पूरी जानकारी पाने और तीसरे पक्ष के ग़ैर-ज़रूरी कोड को पहचानने में मदद मिल सकती है. ऑडिट Lighthouse एक्सटेंशन में उपलब्ध है और जल्द ही इसे Chrome 77 के DevTools में जोड़ा जाएगा.

JavaScript चलाने का समय कम करें

लाइटहाउस JavaScript एक्ज़ीक्यूशन समय कम करें ऑडिट उन स्क्रिप्ट को हाइलाइट करता है जिन्हें पार्स, कंपाइल या मूल्यांकन करने में ज़्यादा समय लगता है. तीसरे पक्ष की उन स्क्रिप्ट को खोजने के लिए जो सीपीयू (CPU) पर आधारित हैं, तीसरे पक्ष के संसाधन दिखाएं चेकबॉक्स को चुनें.

बहुत ज़्यादा नेटवर्क पेलोड से बचें

लाइटहाउस बहुत बड़े नेटवर्क पेलोड से बचें ऑडिट, ऐसे नेटवर्क अनुरोधों की पहचान करता है जिनमें तीसरे पक्ष से मिले अनुरोध भी शामिल हैं. ये अनुरोध पेज लोड होने में लगने वाले समय को कम कर सकते हैं. आपके नेटवर्क का पेलोड 4,000 केबी से ज़्यादा होने पर ऑडिट नहीं हो पाता.

Chrome DevTools में नेटवर्क के अनुरोधों को ब्लॉक करना

Chrome DevTools में नेटवर्क अनुरोध को ब्लॉक करने की सुविधा की मदद से, यह देखा जा सकता है कि कोई खास स्क्रिप्ट, स्टाइलशीट या अन्य संसाधन उपलब्ध न होने पर आपका पेज कैसे काम करता है. अगर आपको लगता है कि तीसरे पक्ष की जिन स्क्रिप्ट से परफ़ॉर्मेंस पर असर पड़ रहा है उनकी पहचान करने के बाद, उन स्क्रिप्ट के अनुरोधों को ब्लॉक करके यह आकलन करें कि लोड होने में लगने वाला समय कैसे बदलता है.

अनुरोध को ब्लॉक करने की सुविधा चालू करने के लिए: 1. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं. 1. नेटवर्क टैब पर क्लिक करें. 1. नेटवर्क पैनल में किसी भी अनुरोध पर राइट क्लिक करें. 1. यूआरएल के अनुरोध को ब्लॉक करें को चुनें.

DevTools पैनल में ब्लॉक करने का अनुरोध करें टैब दिखेगा. वहां आपके पास ब्लॉक किए गए अनुरोधों को मैनेज करने का विकल्प होता है.

तीसरे पक्ष की स्क्रिप्ट का असर मेज़र करने के लिए:

1. नेटवर्क पैनल का इस्तेमाल करके देखें कि आपके पेज को लोड होने में कितना समय लगता है. असल हालातों का पालन करने के लिए, नेटवर्क थ्रॉटलिंग और सीपीयू थ्रॉटलिंग चालू करें. (तेज़ कनेक्शन और डेस्कटॉप हार्डवेयर पर, महंगी स्क्रिप्ट का असर मोबाइल फ़ोन पर शायद उतना बेहतर नहीं होता जितना दिखता है.)
2. अगर आपको लगता है कि तीसरे पक्ष की स्क्रिप्ट से कोई समस्या है, तो उन यूआरएल या डोमेन को ब्लॉक करें.
3. पेज को फिर से लोड करें. साथ ही, फिर से आकलन करें कि तीसरे पक्ष की ब्लॉक की गई स्क्रिप्ट के बिना, लोड होने में कितना समय लगता है.

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

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