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

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

Milica Mihajlija

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

DevTools के ड्रॉअर में, अनुरोध ब्लॉक करना टैब दिखेगा. यहां यह मैनेज किया जा सकता है कि किन अनुरोधों को ब्लॉक किया गया है.

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

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

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

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