रेंडर होने वाले JavaScript कोड को हटाएं

यह नियम तब ट्रिगर होता है, जब PageSpeed Insights को पता चलता है कि आपका एचटीएमएल किसी ब्लॉकिंग का रेफ़रंस देता है बाहरी JavaScript फ़ाइल का इस्तेमाल करें.

खास जानकारी

ब्राउज़र किसी पेज को रेंडर कर सके, उससे पहले उसे एचटीएमएल मार्कअप को पार्स करके, डीओएम ट्री बनाना होगा. इस प्रोसेस के दौरान, जब भी पार्सर को कोई स्क्रिप्ट मिलती है, तो उसे उसे रोकना और एक्ज़ीक्यूट करना पड़ता है इससे पहले कि वह एचटीएमएल को पार्स करना जारी रख सके. बाहरी स्क्रिप्ट के मामले में पार्सर भी संसाधन के डाउनलोड होने की इंतज़ार करना पड़ता है, जिससे एक या उससे ज़्यादा नेटवर्क राउंडट्रिप हो सकती हैं और पेज को पहली बार रेंडर करने में लगने वाले समय को बढ़ा सकती है. देखें JavaScript के साथ इंटरैक्टिविटी जोड़ना, ताकि आप जान सकें कि JavaScript किस तरह से रेंडरिंग पाथ.

सुझाव

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

इनलाइन JavaScript

ब्लॉक करने वाली बाहरी स्क्रिप्ट, ब्राउज़र को JavaScript को फ़ेच करने के लिए इंतज़ार करती हैं, जो पेज रेंडर होने से पहले एक या उससे ज़्यादा नेटवर्क राउंडट्रिप जोड़ सकता है. अगर बाहरी स्क्रिप्ट छोटी होती हैं, इसलिए आप उनकी सामग्री को सीधे HTML दस्तावेज़ में इनलाइन कर सकते हैं और नेटवर्क के अनुरोध में लगने वाला समय. उदाहरण के लिए, अगर एचटीएमएल दस्तावेज़ ऐसा दिखता है: 
<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है और small.js संसाधन ऐसा है: 
  /* contents of a small JavaScript file */
इसके बाद, स्क्रिप्ट को इस तरह इनलाइन करें: 
<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
स्क्रिप्ट के कॉन्टेंट को इनलाइन करने से, small.js के लिए बाहरी अनुरोध हट जाता है और यह अनुमति देता है पहली बार रेंडर होने में ज़्यादा समय लेने के लिए ब्राउज़र. हालांकि, ध्यान रखें कि इनलाइन विज्ञापन को टेक्स्ट में बदलने से एचटीएमएल दस्तावेज़ का साइज़ और स्क्रिप्ट के उसी कॉन्टेंट को अंडरलाइन करना पड़ सकता है एक से ज़्यादा पेज होने चाहिए. इसलिए, आपको बेहतरीन परफ़ॉर्मेंस पाने के लिए सिर्फ़ छोटी स्क्रिप्ट को इनलाइन करना चाहिए.

JavaScript को एसिंक्रोनस बनाएं

डिफ़ॉल्ट रूप से JavaScript, डीओएम कंस्ट्रक्शन को ब्लॉक करता है. इससे पहली बार रेंडर होने में समय लगता है. यहां की यात्रा पर हूं JavaScript को पार्सर को ब्लॉक करने से रोकें, जिसके लिए हम एचटीएमएल async का इस्तेमाल करने का सुझाव देते हैं एट्रिब्यूट का इस्तेमाल करें. जैसे: 
<script async src="my.js">
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है देखें एसिंक्रोनस स्क्रिप्ट के बारे में ज़्यादा जानने के लिए, पार्सर ब्लॉकिंग बनाम एसिंक्रोनस JavaScript. ध्यान दें कि एसिंक्रोनस स्क्रिप्ट के किसी खास क्रम में चलने की गारंटी नहीं दी जाती है. साथ ही, स्क्रिप्ट का इस्तेमाल नहीं किया जाना चाहिए document.write. ऐसी स्क्रिप्ट जो स्क्रिप्ट चलाने के क्रम पर निर्भर करती हैं या जिन्हें ऐक्सेस करने या उनमें बदलाव करने की ज़रूरत होती है इन सीमाओं को ध्यान में रखते हुए, पेज के DOM या CSSOM को फिर से लिखना पड़ सकता है.

JavaScript को लोड होने से रोकें

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

अक्सर पूछे जाने वाले सवाल

अगर मैं jQuery जैसी JavaScript लाइब्रेरी का इस्तेमाल कर रहा हूं, तो क्या होगा?
कई JavaScript लाइब्रेरी, जैसे कि JQuery, का इस्तेमाल पेज को बेहतर बनाने के लिए किया जाता है साथ ही, अन्य इंटरैक्शन, ऐनिमेशन, और अन्य इफ़ेक्ट शामिल हैं. हालांकि, इनमें से कई पेज के ऊपरी हिस्से में मौजूद कॉन्टेंट को रेंडर करने के बाद, व्यवहार को सुरक्षित तरीके से जोड़ा जा सकता है. इस तरह की JavaScript को एसिंक्रोनस बनाने की जांच करें या इसकी लोडिंग को रोकें.
अगर मैं पेज बनाने के लिए JavaScript फ़्रेमवर्क का इस्तेमाल कर रहा हूं, तो क्या होगा?
अगर पेज का कॉन्टेंट क्लाइंट-साइड JavaScript की मदद से बनाया गया है, तो आपको अतिरिक्त पेज बनाने से बचने के लिए, काम के JavaScript मॉड्यूल को इनलाइन करना चाहिए नेटवर्क राउंडट्रिप. इसी तरह, सर्वर साइड रेंडरिंग का इस्तेमाल करने पर, पहले पेज की लोड परफ़ॉर्मेंस को बेहतर बनाएं: डिलीवर करने के लिए सर्वर पर JavaScript टेंप्लेट रेंडर करें पहले रेंडर को तेज़ बनाया जा सकता है और पेज लोड होने के बाद क्लाइंट-साइड टेंप्लेट का इस्तेमाल किया जा सकता है. ज़्यादा के लिए जानकारी सर्वर-साइड रेंडरिंग पर जानकारी, http://youtu.be/VKTWdaupft0?t=14m28s.

सुझाव/राय दें या शिकायत करें

क्या इस पेज से कोई मदद मिली?