पब्लिश होने की तारीख: 23 जनवरी, 2026
Chrome, Chrome 144 से Speculation Rules API में prerender until script जोड़ने के लिए, नया ऑरिजिन ट्रायल लॉन्च कर रहा है. इस ऑरिजिन ट्रायल की मदद से साइटें, असल उपयोगकर्ताओं के साथ नई सुविधा को आज़मा सकती हैं. हमारा मकसद इस सुविधा को फ़ील्ड टेस्ट करना है. साथ ही, Chrome टीम को सुझाव/राय देना या शिकायत करना है, ताकि इस सुविधा को बेहतर बनाया जा सके. इससे यह तय करने में भी मदद मिलेगी कि हमें इस सुविधा को वेब प्लैटफ़ॉर्म में जोड़ना चाहिए या नहीं.
इस सुविधा से किस समस्या को हल करने में मदद मिलेगी?
Speculation Rules API की मदद से, उपयोगकर्ताओं के पेजों पर जाने से पहले ही उन्हें लोड किया जा सकता है. इससे आने वाले समय में पेज लोड होने की प्रोसेस को बेहतर बनाया जा सकता है. ऐसा इसलिए, क्योंकि कुछ या सभी काम पहले ही पूरे हो जाते हैं. अब तक, यह दो तरह के अनुमान लगाने की अनुमति देता है: प्रीफ़ेच और प्रीरेंडर.
प्रीफ़ेचिंग, सिर्फ़ एचटीएमएल दस्तावेज़ को फ़ेच करती है. इससे पहली ज़रूरी रिसॉर्स को समय से पहले लोड किया जा सकता है. इसके बाद, जब किसी यूआरएल पर नेविगेट किया जाता है, तो परफ़ॉर्मेंस बेहतर होती है. यह कोई भी सबरिसॉर्स लोड नहीं करता. जैसे, सीएसएस, JavaScript या इमेज. साथ ही, यह JavaScript को भी एक्ज़ीक्यूट नहीं करता. इसलिए, पेज लोड होने पर ब्राउज़र को अब भी काफ़ी काम करना पड़ सकता है.
प्रीरेंडरिंग की सुविधा के और भी कई फ़ायदे हैं. यह सब-रिसोर्स फ़ेच करता है. साथ ही, पेज को रेंडर करना और JavaScript को एक्ज़ीक्यूट करना शुरू करता है. ऐसा लगता है कि पेज को बैकग्राउंड में छिपे हुए टैब में खोला गया है. जब उपयोगकर्ता लिंक पर क्लिक करता है, तो ब्राउज़र के पेज को रेंडर करने से जुड़ा सारा काम पूरा करने पर, उसे तुरंत नेविगेशन मिल सकता है.
प्रीरेंडर विकल्प का इस्तेमाल करने से, परफ़ॉर्मेंस बेहतर हो सकती है. हालांकि, इसे लागू करने के लिए अतिरिक्त शुल्क देना होगा. साथ ही, इसके लिए अतिरिक्त संसाधनों की ज़रूरत होगी. अगर इस पर ध्यान न दिया जाए, तो इससे कुछ अनचाहे साइड इफ़ेक्ट भी हो सकते हैं. ऐसा तब होता है, जब उपयोगकर्ता के पेज पर जाने से पहले ही, पूरे पेज को पहले से रेंडर कर दिया जाता है. उदाहरण के लिए, अगर Analytics सेवा देने वाली कंपनी, अनुमानों को ध्यान में नहीं रखती है, तो analytics, उपयोगकर्ता के नेविगेट करने से पहले ही फ़ायर हो सकता है. इससे आंकड़ों में गड़बड़ी हो सकती है.
प्रीरेंडरिंग का इस्तेमाल करने वाली साइटों को यह भी ध्यान रखना चाहिए कि वे किसी उपयोगकर्ता को पुराना पेज न दिखाएं. उदाहरण के लिए, अगर आपने किसी ई-कॉमर्स साइट पर किसी पेज को स्पेकुलेट किया है, फिर अपनी बास्केट में कोई आइटम जोड़ा है, और इसके बाद आपने पहले स्पेकुलेट किए गए पेज को लोड किया है, तो आपको बास्केट में आइटम की पुरानी संख्या दिख सकती है. ऐसा तब होता है, जब साइट यह पक्का करने के लिए अतिरिक्त सावधानी नहीं बरतती कि यह अपडेट हो गया है.
अगर सर्वर-साइड पर कुछ स्टेट मैनेजमेंट होता है, तो प्रीफ़ेच के लिए भी ये समस्याएं होती हैं. हालांकि, प्रीरेंडर के लिए ये समस्याएं अक्सर ज़्यादा बड़ी होती हैं. ज़्यादा जटिल साइटों पर प्रीरेंडरिंग का इस्तेमाल करना ज़्यादा मुश्किल हो सकता है.
हालांकि, हमें डेवलपर से पता चला है कि उन्हें पेज को प्रीफ़ेच करने से पहले ही परफ़ॉर्मेंस में सुधार दिख रहा है. साथ ही, वे अनुमान के आधार पर तय किए गए नियमों का इस्तेमाल करके, और भी फ़ायदे पाना चाहते हैं. ऐसे में, स्क्रिप्ट के लोड होने तक पेज को पहले से रेंडर करने की सुविधा काम आती है.
स्क्रिप्ट तक प्रीरेंडर क्या होता है?
स्क्रिप्ट के लोड होने तक प्रीरेंडर करने की सुविधा, प्रीफ़ेच और प्रीरेंडर के बीच की एक नई सुविधा है. यह एचटीएमएल दस्तावेज़ को प्रीफ़ेच करता है (प्रीफ़ेच की तरह). इसके बाद, पेज को रेंडर करना शुरू करता है. इसमें सभी सब-संसाधन फ़ेच करना भी शामिल है (प्रीरेंडर की तरह). हालांकि, ब्राउज़र <script> एलिमेंट को एक्ज़ीक्यूट नहीं करेगा. ऐसा इनलाइन स्क्रिप्ट और src स्क्रिप्ट, दोनों के लिए होगा. जब इसे कोई ब्लॉकिंग <script> टैग मिलता है, तो यह पार्सर को रोक देता है और तब तक इंतज़ार करता है, जब तक उपयोगकर्ता पेज पर नहीं जाता. इसके बाद, यह पार्सर को फिर से शुरू करता है. इस दौरान, प्रीलोड स्कैनर काम करता रहता है. साथ ही, यह पेज के लिए ज़रूरी सब-रिसोर्स फ़ेच करता है, ताकि पेज लोड होने के बाद उनका इस्तेमाल किया जा सके.
ब्लॉक करने वाले <script> एलिमेंट को होल्ड करके, लागू करने की जटिलता से बचा जा सकता है. साथ ही, रेंडरिंग प्रोसेस शुरू करने और सब-रिसोर्स फ़ेच करने से, प्रीफ़ेच की तुलना में बहुत ज़्यादा फ़ायदा मिलता है. यह फ़ायदा, पूरी तरह से प्रीरेंडर करने से मिलने वाले फ़ायदे के बराबर हो सकता है.
सबसे सही स्थिति में (जब पेज में कोई स्क्रिप्ट नहीं होती है), यह विकल्प पूरे पेज को पहले से रेंडर कर देगा. इसके अलावा, अगर किसी पेज के फ़ुटर में सिर्फ़ स्क्रिप्ट एलिमेंट या सिर्फ़ async या defer एट्रिब्यूट वाली स्क्रिप्ट मौजूद हैं, तो उस पेज को पूरी तरह से प्रीरेंडर किया जाएगा. हालांकि, ऐसा JavaScript के बिना किया जाएगा. सबसे खराब स्थिति (जब <head> में कोई स्क्रिप्ट ब्लॉक की जा रही हो) में भी, पेज रेंडरिंग की शुरुआत और खास तौर पर सब-रिसोर्स की प्रीफ़ेचिंग से, पेज लोड होने में काफ़ी सुधार होना चाहिए.
स्क्रिप्ट तक प्रीरेंडर करने की सुविधा का इस्तेमाल कैसे करें?
सबसे पहले, सुविधा चालू करें. इसके बाद, स्क्रिप्ट का इस्तेमाल तब तक प्रीरेंडर करें, जब तक कि इसे 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>
स्क्रिप्ट के लोड होने तक प्रीरेंडर करने की सुविधा का इस्तेमाल, 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, डुप्लीकेट किए गए इस नियम को बिना किसी समस्या के मैनेज करेगा. साथ ही, हर सेटिंग के लिए सबसे सही नियम लागू करेगा.
इसके अलावा, इन स्क्रिप्ट का इस्तेमाल अलग-अलग ईगरनेस लेवल के साथ किया जा सकता है. इससे, ईगरनेस लेवल के हिसाब से प्रीफ़ेच किया जा सकता है. इसके बाद, ज़्यादा सिग्नल वाली स्क्रिप्ट जैसा कि पहले प्रीफ़ेच/प्रीरेंडर के साथ सुझाव दिया गया था तक अपग्रेड किया जा सकता है:
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender_until_script": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</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 एट्रिब्यूट वाली स्क्रिप्ट, चालू होने तक डिले हो जाती हैं. हालांकि, ये स्क्रिप्ट पार्सर को पेज के बाकी हिस्से को प्रोसेस करने से नहीं रोकेंगी. स्क्रिप्ट डाउनलोड की जाती हैं, लेकिन पेज पर नेविगेट करने तक उन्हें लागू नहीं किया जाता.
स्क्रिप्ट तक प्रीरेंडर करने की सुविधा कैसे चालू करें?
स्क्रिप्ट के लोड होने तक प्रीरेंडर करने की सुविधा, एक नया विकल्प है. हम इस पर काम कर रहे हैं. इसमें बदलाव किया जा सकता है. इसलिए, ऑप्ट इन करने के लिए, इसे पहले चालू किए बिना इस्तेमाल नहीं किया जा सकता.
इसे डेवलपर के लिए, स्थानीय तौर पर चालू किया जा सकता है. इसके लिए, chrome://flags/#prerender-until-script Chrome फ़्लैग या --enable-features=PrerenderUntilScript कमांड लाइन फ़्लैग का इस्तेमाल करें.
स्क्रिप्ट के लोड होने तक प्रीरेंडर करने की सुविधा, Chrome 144 से ऑरिजिन ट्रायल के तौर पर उपलब्ध है. ऑरिजिन ट्रायल की मदद से, साइट के मालिक अपनी साइटों पर कोई सुविधा चालू कर सकते हैं. इससे असली उपयोगकर्ता, सुविधा को मैन्युअल तरीके से चालू किए बिना उसका इस्तेमाल कर सकते हैं. इससे, इस सुविधा का इस्तेमाल करने वाले लोगों पर पड़ने वाले असर को मेज़र किया जा सकता है. इससे यह पक्का किया जा सकता है कि यह सुविधा उम्मीद के मुताबिक काम कर रही है.
इसे आज़माकर देखें और अपने सुझाव/राय/शिकायत शेयर करें
हमें Speculation Rules API में इस नए बदलाव को शामिल करने में बेहद खुशी हो रही है. हम साइट के मालिकों को इसका इस्तेमाल करने का सुझाव देते हैं.
GitHub repo पर जाकर, इस प्रस्ताव के बारे में अपनी राय दें. Chrome में लागू किए गए बदलावों के बारे में सुझाव/राय देने या शिकायत करने के लिए, Chromium में बग की शिकायत करें.