खास जानकारी
ब्राउज़र किसी पेज को रेंडर कर सके, उससे पहले एचटीएमएल मार्कअप को पार्स करके डीओएम ट्री बनाना होता है. इस प्रोसेस के दौरान, जब भी पार्सर को कोई स्क्रिप्ट मिलती है, तब एचटीएमएल को पार्स करना जारी रखने से पहले, पार्सर को उसे रोकना और चलाना पड़ता है. बाहरी स्क्रिप्ट के मामले में, पार्सर को संसाधन के डाउनलोड होने तक इंतज़ार करना पड़ता है. इससे एक या उससे ज़्यादा नेटवर्क राउंडट्रिप हो सकते हैं और पेज को पहली बार रेंडर होने में ज़्यादा समय लग सकता है. इस बारे में ज़्यादा जानने के लिए कि JavaScript, क्रिटिकल रेंडरिंग पाथ पर कैसे असर डालती है, JavaScript के साथ इंटरैक्टिविटी जोड़ना लेख देखें.सुझाव
आपको JavaScript को ब्लॉक करने वाले इस्तेमाल से बचना चाहिए और उसे कम से कम करना चाहिए. खास तौर पर, ऐसी बाहरी स्क्रिप्ट जिन्हें फ़ेच करने से पहले फ़ेच किया जाना ज़रूरी है. पेज के कॉन्टेंट को रेंडर करने के लिए ज़रूरी स्क्रिप्ट को अतिरिक्त नेटवर्क अनुरोधों से बचने के लिए, लाइन में जोड़ा जा सकता है. हालांकि, इनलाइन कॉन्टेंट छोटा होना चाहिए और अच्छी परफ़ॉर्मेंस देने के लिए तुरंत काम करना चाहिए. जो स्क्रिप्ट शुरुआती रेंडर के लिए ज़रूरी नहीं हैं उन्हें एसिंक्रोनस बना दिया जाना चाहिए या पहली रेंडर होने तक टाल दिया जाना चाहिए. कृपया ध्यान रखें कि कॉन्टेंट लोड होने में लगने वाले समय को बढ़ाने के लिए, आपको सीएसएस डिलीवरी को भी ऑप्टिमाइज़ करना होगा.इनलाइन JavaScript
बाहरी तौर पर ब्लॉक करने वाली स्क्रिप्ट, ब्राउज़र को JavaScript के फ़ेच होने का इंतज़ार करने के लिए मजबूर करती हैं. इससे पेज रेंडर होने से पहले, एक या उससे ज़्यादा नेटवर्क राउंडट्रिप जोड़ सकते हैं. अगर बाहरी स्क्रिप्ट छोटी हैं, तो उनके कॉन्टेंट को सीधे एचटीएमएल दस्तावेज़ में इनलाइन किया जा सकता है. ऐसा करके, नेटवर्क अनुरोध के इंतज़ार में लगने वाले समय से बचा जा सकता है. उदाहरण के लिए, अगर एचटीएमएल दस्तावेज़ ऐसा दिखता है:
<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 लाइब्रेरी का इस्तेमाल करूं, तो क्या होगा?
- JQuery जैसी कई JavaScript लाइब्रेरी का इस्तेमाल, पेज को बेहतर बनाने के लिए किया जाता है, ताकि उसमें दूसरे इंटरैक्टिविटी, ऐनिमेशन, और दूसरे इफ़ेक्ट जोड़े जा सकें. हालांकि, इनमें से कई तरीकों को, पेज के ऊपरी हिस्से पर मौजूद कॉन्टेंट को रेंडर करने के बाद सुरक्षित तरीके से जोड़ा जा सकता है. ऐसे JavaScript को एसिंक्रोनस बनाने की जांच करें या इसकी लोडिंग को रोकें.
- अगर पेज बनाने के लिए JavaScript फ़्रेमवर्क का इस्तेमाल किया जा रहा है, तो क्या होगा?
- अगर पेज के कॉन्टेंट को क्लाइंट-साइड JavaScript की मदद से बनाया गया है, तो अतिरिक्त नेटवर्क राउंडट्रिप से बचने के लिए, आपको सही JavaScript मॉड्यूल को इनलाइन करने की जांच करनी चाहिए. इसी तरह, सर्वर-साइड रेंडरिंग का इस्तेमाल करने से, पहले पेज के लोड होने की परफ़ॉर्मेंस काफ़ी बेहतर हो सकती है: तेज़ी से पहले रेंडर करने के लिए, सर्वर पर JavaScript टेंप्लेट रेंडर करें. इसके बाद, पेज लोड होने पर क्लाइंट-साइड टेंप्लेट का इस्तेमाल करें. सर्वर साइड रेंडरिंग के बारे में ज़्यादा जानकारी के लिए, http://youtu.be/VKTWdaupft0?t=14m28s देखें.
सुझाव/राय दें या शिकायत करें
क्या इस पेज से कोई मदद मिली?