इस्तेमाल नहीं किया गया JavaScript हटाएं

इस्तेमाल न किए गए JavaScript की वजह से आपके पेज के लोड होने की स्पीड धीमी हो सकती है:

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

इस्तेमाल नहीं किया गया JavaScript ऑडिट कैसे काम नहीं करेगा

Lighthouse इस्तेमाल न किए गए कोड के 20 किबीबाइट से ज़्यादा वाले हर JavaScript फ़ाइल को फ़्लैग करता है:

ऑडिट का स्क्रीनशॉट.
स्क्रिप्ट के सोर्स कोड को नए टैब में खोलने के लिए, यूआरएल कॉलम में किसी वैल्यू पर क्लिक करें.

इस्तेमाल नहीं किए गए JavaScript को हटाने का तरीका

इस्तेमाल न किए गए JavaScript का पता लगाएं

Chrome DevTools के कवरेज टैब में, आपको इस्तेमाल न किए गए कोड का लाइन-दर-लाइन ब्रेकडाउन देखा जा सकता है.

Puppeteer में मौजूद Coverage क्लास की मदद से, अपने-आप काम करने वाले कोड का पता लगाने और इस्तेमाल किए गए कोड को निकालने में मदद मिल सकती है.

इस्तेमाल न होने वाले कोड को हटाने के लिए सहायता टूल बनाएं

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

स्टैक के हिसाब से सलाह

Angular

अगर Angular सीएलआई का इस्तेमाल किया जा रहा है, तो अपने बंडल की जांच करने के लिए, अपने प्रोडक्शन बिल्ड में सोर्स मैप शामिल करें.

Drupal

ऐसी JavaScript एसेट हटाएं जिनका इस्तेमाल नहीं हुआ है. साथ ही, सही पेज या पेज के कॉम्पोनेंट में सिर्फ़ ज़रूरी Drupal लाइब्रेरी अटैच करें. ज़्यादा जानकारी के लिए, लाइब्रेरी तय करना देखें.

जूमला

आपके पेज में, इस्तेमाल नहीं किए गए JavaScript को लोड करने वाले Joomla एक्सटेंशन की संख्या को कम करें या स्विच करें.

Magento

Magento की बिल्ट-इन JavaScript बंडलिंग बंद करें.

React

अगर सर्वर-साइड रेंडरिंग का इस्तेमाल नहीं किया जा रहा है, तो React.lazy() के साथ अपने JavaScript बंडल को अलग-अलग करें. इसके अलावा, तीसरे पक्ष की लाइब्रेरी का इस्तेमाल करके कोड को अलग किया जा सकता है. जैसे, लोड किए जा सकने वाले कॉम्पोनेंट.

व्यू

अगर सर्वर-साइड रेंडरिंग नहीं है और Vue राऊटर का इस्तेमाल नहीं किया जा रहा है, तो बंडल को लेज़ी लोडिंग रूट के हिसाब से बांटें.

WordPress

उन WordPress प्लग इन की संख्या कम करें या स्विच करें जो आपके पेज में ऐसी JavaScript लोड कर रहे हैं जिसका इस्तेमाल नहीं किया गया है.

रिसॉर्स