पब्लिश की गई तारीख: 23 जनवरी, 2026
Chrome, Speculation Rules API में prerender until script जोड़ने तक, Chrome 144 से एक नया ऑरिजिन ट्रायल लॉन्च कर रहा है. इस ऑरिजिन ट्रायल की मदद से, साइटें नए एडिशन को असली उपयोगकर्ताओं के साथ आज़मा सकती हैं. इसका मकसद, इस सुविधा को फ़ील्ड में आज़माना और Chrome की टीम को फ़ीडबैक देना है. इससे, यह तय करने में मदद मिलेगी कि हमें इस सुविधा को वेब प्लैटफ़ॉर्म में जोड़ना चाहिए या नहीं.
इस सुविधा से किस समस्या को हल करने में मदद मिलेगी?
Speculation Rules API की मदद से, उपयोगकर्ता के किसी पेज पर जाने से पहले ही उसे लोड किया जा सकता है. इससे, आने वाले समय में पेज लोड होने की परफ़ॉर्मेंस बेहतर हो सकती है, क्योंकि कुछ या सभी काम पहले ही पूरे हो जाते हैं. अब तक, इसमें दो तरह के अनुमान लगाए जा सकते थे: प्रीफ़ेच और प्रीरेंडर.
प्रीफ़ेच में सिर्फ़ एचटीएमएल दस्तावेज़ फ़ेच किया जाता है. इससे, पहला ज़रूरी रिसॉर्स पहले ही फ़ेच हो जाता है. इसके बाद, जब कोई यूआरएल खोला जाता है, तो परफ़ॉर्मेंस बेहतर होती है. इसमें कोई भी सब-रिसॉर्स लोड नहीं होता. जैसे, सीएसएस, JavaScript या इमेज. साथ ही, JavaScript भी एक्ज़ीक्यूट नहीं होती. इसलिए, पेज लोड होने पर ब्राउज़र को अब भी काफ़ी काम करना पड़ सकता है.
प्रीरेंडर में इससे ज़्यादा काम होता है. इसमें सब-रिसॉर्स फ़ेच किए जाते हैं. साथ ही, पेज रेंडर होना शुरू हो जाता है और JavaScript एक्ज़ीक्यूट होती है. ऐसा लगता है कि पेज, बैकग्राउंड में छिपे टैब में खुला हो. जब उपयोगकर्ता किसी लिंक पर क्लिक करता है, तो उसे तुरंत नेविगेट किया जा सकता है. हालांकि, ऐसा तब होगा, जब ब्राउज़र ने पेज रेंडर करने के लिए ज़रूरी सभी काम पूरे कर लिए हों.
प्रीरेंडर विकल्प का इस्तेमाल करने से, परफ़ॉर्मेंस बेहतर हो सकती है. हालांकि, इसे लागू करने में ज़्यादा खर्च आता है. साथ ही, ज़्यादा रिसॉर्स खर्च होते हैं. अगर इस पर ध्यान न दिया जाए, तो उपयोगकर्ता के किसी पेज पर जाने से पहले ही उसे पूरी तरह से प्रीरेंडर करने पर, अनचाहे साइड इफ़ेक्ट भी हो सकते हैं. उदाहरण के लिए, अगर Analytics की सुविधा देने वाली कंपनी, अनुमानों को ध्यान में नहीं रखती है, तो Analytics, उपयोगकर्ता के नेविगेट करने से पहले ही फ़ायर हो सकता है. इससे आंकड़े गलत हो सकते हैं.
प्रीरेंडर का इस्तेमाल करने वाली साइटों को यह भी ध्यान रखना होगा कि वे उपयोगकर्ता को पुराना पेज न दिखाएं. उदाहरण के लिए, अगर ई-कॉमर्स साइट पर किसी पेज के लिए अनुमान लगाया जाता है, तो अपनी बास्केट में कुछ जोड़ा जाता है. इसके बाद, पहले से अनुमान लगाया गया पेज लोड किया जाता है. ऐसे में, आपको बास्केट में मौजूद आइटम की पुरानी संख्या दिख सकती है. हालांकि, ऐसा तब होगा, जब साइट यह पक्का करने के लिए ज़्यादा ध्यान न दे कि यह संख्या अपडेट हो गई है.
प्रीफ़ेच के लिए भी ये समस्याएं मौजूद हैं. हालांकि, ऐसा तब होता है, जब स्टेट मैनेजमेंट का कुछ हिस्सा सर्वर-साइड पर होता है. हालांकि, प्रीरेंडर के लिए यह अक्सर एक बड़ी समस्या होती है. ज़्यादा जटिल साइटों पर प्रीरेंडर का इस्तेमाल करना मुश्किल हो सकता है.
हालांकि, हमें डेवलपर से पता चला है कि वे पेज को प्रीफ़ेच करने से पहले ही परफ़ॉर्मेंस में सुधार देख रहे हैं. साथ ही, वे Speculation Rules का इस्तेमाल करके, और भी ज़्यादा फ़ायदा पाना चाहते हैं. ऐसे में, prerender until script काम आता है.
prerender until script क्या है?
prerender until script प्रीफ़ेच और प्रीरेंडर के बीच एक नया विकल्प है. यह एचटीएमएल दस्तावेज़ को प्रीफ़ेच करती है. जैसा कि प्रीफ़ेच में होता है. इसके बाद, पेज को रेंडर करना शुरू कर देती है. इसमें सभी सब-रिसॉर्स फ़ेच करना भी शामिल है. जैसा कि प्रीरेंडर में होता है. हालांकि, सबसे अहम बात यह है कि ब्राउज़र, <script> एलिमेंट (इनलाइन स्क्रिप्ट और src स्क्रिप्ट, दोनों के लिए) को एक्ज़ीक्यूट नहीं करेगा. जब उसे ब्लॉक करने वाला <script> टैग मिलता है, तो वह पार्सर को रोक देता है और उपयोगकर्ता के पेज पर नेविगेट करने तक इंतज़ार करता है. इसके बाद, वह आगे की प्रोसेस जारी रखता है. इस दौरान, प्रीलोड स्कैनर जारी रह सकता है और पेज के लिए ज़रूरी सब-रिसॉर्स फ़ेच कर सकता है. इससे, जब पेज लोड होना जारी रख पाएगा, तब ये रिसॉर्स इस्तेमाल के लिए तैयार होंगे.
ब्लॉक करने वाले किसी भी <script> एलिमेंट को रोककर, लागू करने की जटिलता से बचा जा सकता है. इसके साथ ही, रेंडरिंग की प्रोसेस शुरू करके और सब-रिसॉर्स फ़ेच करके, प्रीफ़ेच की तुलना में काफ़ी फ़ायदा मिलता है. यह फ़ायदा, पूरी तरह से प्रीरेंडर करने पर मिलने वाले फ़ायदे के बराबर हो सकता है.
सबसे अच्छे मामले में (जब पेज में कोई स्क्रिप्ट न हो), यह विकल्प पूरे पेज को प्रीरेंडर करेगा. इसके अलावा, जब किसी पेज में फ़ुटर में सिर्फ़ स्क्रिप्ट एलिमेंट होते हैं या सिर्फ़ async या defer एट्रिब्यूट वाली स्क्रिप्ट होती हैं, तो पेज को उस JavaScript के बिना पूरी तरह से प्रीरेंडर किया जाएगा. सबसे खराब मामले में भी (जब <head> में ब्लॉक करने वाली स्क्रिप्ट हो), पेज रेंडर होना शुरू हो जाएगा. खास तौर पर, सब-रिसॉर्स को प्रीफ़ेच करने से, पेज लोड होने की परफ़ॉर्मेंस बेहतर होगी.
prerender until script का इस्तेमाल कैसे करें?
सबसे पहले, इस सुविधा को चालू करें. इसके बाद, prerender until script का इस्तेमाल, Speculation Rules API के अन्य विकल्पों की तरह ही किया जाता है. इसके लिए, prerender_until_script नई कुंजी का इस्तेमाल करें. ध्यान दें कि इसे मान्य JSON कुंजी का नाम बनाने के लिए, इसमें अंडरस्कोर का इस्तेमाल किया गया है
इसका इस्तेमाल, स्टैटिक यूआरएल की सूची के नियमों के साथ किया जा सकता है:
<script type="speculationrules">
{
"prerender_until_script": [{
"urls": ["next.html", "next2.html"]
}]
}
</script>
इसका इस्तेमाल, दस्तावेज़ के नियमों के साथ भी किया जा सकता है. इसमें अनुमान लगाने के लिए यूआरएल, पेज पर लिंक के तौर पर उपलब्ध होते हैं:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}]
}
</script>
इसके बाद, prerender until script का इस्तेमाल, Speculation Rules API के सामान्य विकल्पों के साथ किया जा सकता है. इनमें, अलग-अलग ईगर्नेस वैल्यू भी शामिल हैं.
JavaScript एक्ज़ीक्यूट नहीं होगी. इसलिए, document.prerendering को पढ़ा नहीं जा सकता. साथ ही, prerenderingchange इवेंट को भी नहीं पढ़ा जा सकता. हालांकि, activationStart का समय शून्य नहीं होगा.
यहां दिए गए उदाहरण में, पिछले उदाहरण को उन ब्राउज़र के लिए प्रीफ़ेच पर फ़ॉलबैक के साथ डिप्लॉय करने का तरीका बताया गया है जिनमें prerender_until_script काम नहीं करता:
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}],
"prefetch": [{
"where": { "href_matches": "/*" }
}]
}
</script>
Chrome, डुप्लीकेट होने की समस्या को बिना किसी परेशानी के हल करेगा. साथ ही, हर ईगर्नेस सेटिंग के लिए सबसे सही नियम को एक्ज़ीक्यूट करेगा.
इसके अलावा, इन्हें अलग-अलग ईगर्नेस लेवल के साथ इस्तेमाल किया जा सकता है. इससे, पहले से प्रीफ़ेच किया जा सकेगा. इसके बाद, ज़्यादा सिग्नल के साथ prerender until script में अपग्रेड किया जा सकेगा जैसा कि पहले प्रीफ़ेच/प्रीरेंडर के साथ सुझाव दिया गया था:
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender_until_script": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
ध्यान दें कि इस तरीके से, आप prerender until script को पूरी तरह से प्रीरेंडर करने की सुविधा में अपग्रेड नहीं कर सकते. हालांकि, अगर आपको लगता है कि Chrome को इस पैटर्न के साथ काम करना चाहिए, तो हमें बताएं. इसके लिए, इस गड़बड़ी को स्टार करें.
क्या सभी JavaScript को रोका जाता है?
नहीं, सिर्फ़ <script> एलिमेंट की वजह से पार्सर रुकता है. इसका मतलब है कि इनलाइन स्क्रिप्ट हैंडलर (उदाहरण के लिए, onload) या javascript: यूआरएल की वजह से पार्सर नहीं रुकेगा और ये एक्ज़ीक्यूट हो सकते हैं.
उदाहरण के लिए, पेज पर नेविगेट करने से पहले, कंसोल में Hero image is now loaded लॉग किया जा सकता है:
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
वहीं, अगर इवेंट लिसनर को <script> के साथ जोड़ा जाता है, तो Hero image is now loaded पेज के चालू होने के बाद ही कंसोल में लॉग किया जाएगा:
<img src="hero.jpg" id="hero-image" alt="Example Photo">
<script>
const heroImage = document.querySelector('#hero-image');
if (heroImage.complete) {
console.log('Hero image is now loaded');
} else {
heroImage.addEventListener('load',
(event) => {
console.log('Hero image is now loaded');
}
);
}
</script>
यह आपको अजीब लग सकता है. हालांकि, कई मामलों में (जैसे, पिछले उदाहरण में!), तुरंत कार्रवाई करना बेहतर होता है. इसमें देरी करने से, अनचाही समस्याएं हो सकती हैं.
इसके अलावा, ज़्यादातर इनलाइन इवेंट के लिए, उपयोगकर्ता की कार्रवाई ज़रूरी होती है. जैसे, onclick, onhover. इसलिए, जब तक उपयोगकर्ता पेज के साथ इंटरैक्ट नहीं कर पाएगा, तब तक ये इवेंट एक्ज़ीक्यूट नहीं होंगे.
आखिर में, पहले से मौजूद ब्लॉक करने वाली स्क्रिप्ट, पार्सर को रोक देंगी. इसलिए, इनलाइन इवेंट हैंडलर नहीं दिखेंगे. इसलिए, इनलाइन इवेंट हैंडलर होने के बावजूद, चालू होने तक कंसोल में मैसेज लोड नहीं होगा:
<script>...</script>
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
यह खास तौर पर उन इनलाइन स्क्रिप्ट हैंडलर के लिए काम का है जो पहले से तय किए गए कोड का इस्तेमाल करते हैं. ये हैंडलर, उम्मीद के मुताबिक काम करते रहेंगे:
<script>
imageLoadFunction() = {
...
}
</script>
<img src="hero.jpg" onload="imageLoadFunction" alt="Example Photo">
async और defer एट्रिब्यूट वाली स्क्रिप्ट के बारे में क्या?
async और defer एट्रिब्यूट वाली स्क्रिप्ट, चालू होने तक डिले होती हैं. हालांकि, ये पार्सर को पेज के बाकी हिस्से को प्रोसेस करने से नहीं रोकेंगी. स्क्रिप्ट डाउनलोड हो जाती हैं, लेकिन पेज पर नेविगेट करने तक एक्ज़ीक्यूट नहीं होती हैं.
prerender until script को कैसे चालू करें?
prerender until script एक नया विकल्प है. हम इस पर काम कर रहे हैं. इसमें बदलाव हो सकता है. इसलिए, इसे चालू किए बिना इसका इस्तेमाल नहीं किया जा सकता.
डेवलपर के लिए, इसे स्थानीय तौर पर चालू किया जा सकता है. इसके लिए, chrome://flags/#prerender-until-script Chrome फ़्लैग या --enable-features=PrerenderUntilScript कमांड लाइन फ़्लैग का इस्तेमाल करें.
prerender until script अब Chrome 144 से ऑरिजिन ट्रायल के तौर पर भी उपलब्ध है. ऑरिजिन ट्रायल की मदद से, साइट के मालिक अपनी साइटों पर कोई सुविधा चालू कर सकते हैं. इससे, असली उपयोगकर्ता उस सुविधा का इस्तेमाल कर सकते हैं. इसके लिए, उन्हें मैन्युअल तरीके से सुविधा चालू करने की ज़रूरत नहीं होती. इससे, असली उपयोगकर्ताओं पर सुविधा के असर को मेज़र किया जा सकता है. इससे यह पक्का किया जा सकता है कि सुविधा, उम्मीद के मुताबिक काम कर रही है.
इसे टेस्ट के तौर पर आज़माएं और अपना फ़ीडबैक शेयर करें
हमें Speculation Rules API में इस नए एडिशन को लॉन्च करने में बेहद खुशी हो रही है. हम साइट के मालिकों को इसे टेस्ट के तौर पर आज़माने का सुझाव देते हैं.
प्रपोज़ल के बारे में अपना फ़ीडबैक, GitHub रेपो पर शेयर करें. Chrome के लागू करने के तरीके के बारे में फ़ीडबैक देने के लिए, Chromium में गड़बड़ी की शिकायत करें.