अनुमान लगाने के नियमों का इस्तेमाल, अगले पेज के नेविगेशन को प्रीफ़ेच और प्रीरेंडर करने के लिए किया जा सकता है. इसके बारे में पिछली पोस्ट में बताया गया है. इसकी मदद से, पेज तेज़ी से या तुरंत लोड हो सकता है. साथ ही, इन अतिरिक्त पेज नेविगेशन के लिए, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी बेहतर हो जाती है.
अनुमान लगाने के नियमों को डीबग करना मुश्किल हो सकता है. खास तौर पर, यह पहले से रेंडर किए गए पेजों के लिए सही है, क्योंकि ये पेज एक अलग रेंडरर में रेंडर किए जाते हैं. यह एक ऐसे बैकग्राउंड टैब की तरह होता है जो चालू होने पर, मौजूदा टैब की जगह ले लेता है. इसलिए, DevTools के सामान्य विकल्पों का इस्तेमाल हमेशा समस्याओं को डीबग करने के लिए नहीं किया जा सकता.
Chrome टीम, अनुमान लगाने के नियमों को डीबग करने के लिए, DevTools से जुड़ी सहायता को बेहतर बनाने के लिए लगातार काम कर रही है. इस पोस्ट में, आपको पता चलेगा कि किसी पेज पर अनुमान लगाने से जुड़े नियमों को समझने के लिए, इन टूल का इस्तेमाल कैसे किया जा सकता है. साथ ही, यह भी बताया गया है कि ये तरीके काम क्यों नहीं करते हैं, और डेवलपर कब ज़्यादा DevTools इस्तेमाल कर सकते हैं. कब नहीं.
"pre-" की जानकारी शर्तें
"प्री-", बहुत से तो हम इनके बारे में विस्तार से जानकारी देने के साथ शुरुआत करेंगे:
- प्रीफ़ेच: आने वाले समय की परफ़ॉर्मेंस को बेहतर बनाने के लिए किसी संसाधन या दस्तावेज़ को पहले से फ़ेच करना. इस पोस्ट में, अनुमान लगाने के नियम एपीआई का इस्तेमाल करके प्रीफ़ेच करने के बारे में बताया गया है. हालांकि, यह इससे मिलते-जुलते नहीं है. हालांकि,
<link rel="prefetch">के पुराने विकल्प का इस्तेमाल अक्सर सबरिसॉर्स को प्रीफ़ेच करने के लिए किया जाता है. - प्रीरेंडर: यह प्रीफ़ेच करने से कुछ कदम दूर है और असल में पूरे पेज को इस तरह रेंडर करता है, जैसे उपयोगकर्ता ने उस तक नेविगेट किया हो. हालांकि, अगर वह असल में पेज पर जाता है, तो इसे बैकग्राउंड रेंडर करने वाली ऐसी प्रोसेस में ही रखता है जो छिपी हुई होती है. यह दस्तावेज़,
<link rel="prerender">के पुराने विकल्प (जो अब पूरी तरह से प्रीरेंडर नहीं होता) के बजाय, इस दस्तावेज़ के नए, अनुमान लगाने के नियम एपीआई वर्शन को लेकर परेशान है. - नेविगेशनल अनुमान: अनुमान लगाने के नियमों की वजह से ट्रिगर होने वाले नए प्रीफ़ेच और प्रीरेंडरिंग विकल्पों के लिए सामूहिक शब्द.
- पहले से लोड किया गया: यह ऐसा टर्म है जो कई टेक्नोलॉजी और प्रोसेस से जुड़ा होता है. जैसे,
<link rel="preload">, प्रीलोड स्कैनर, और सर्विस वर्कर नेविगेशन प्रीलोड. इन आइटम के बारे में यहां नहीं बताया जाएगा. हालांकि, इस शर्त को शामिल किया गया है, ताकि इन्हें "नेविगेशन से जुड़े अनुमान" से साफ़ तौर पर अलग किया जा सके शब्द.
prefetch के लिए अनुमान लगाने के नियम
अनुमान लगाने के नियमों का इस्तेमाल, अगले नेविगेशन के दस्तावेज़ को प्रीफ़ेच करने के लिए किया जा सकता है. उदाहरण के लिए, किसी पेज में यह JSON डालने पर, next.html और next2.html प्रीफ़ेच कर दिए जाएंगे:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
पुराने <link rel="prefetch"> सिंटैक्स के मुकाबले, नेविगेशन प्रीफ़ेच के लिए अनुमान लगाने के नियमों के कुछ फ़ायदे होते हैं. जैसे, ज़्यादा बेहतर एपीआई और नतीजे एचटीटीपी डिस्क कैश के बजाय मेमोरी कैश में सेव होते हैं.
prefetch अनुमान लगाने के नियमों को डीबग करें
अनुमान लगाने के नियमों से ट्रिगर होने वाले प्रीफ़ेच, नेटवर्क पैनल में दूसरे फ़ेच की तरह ही देखे जा सकते हैं:
लाल रंग से हाइलाइट किए गए दो अनुरोध, प्रीफ़ेच किए गए संसाधन हैं, जिन्हें टाइप कॉलम में देखा जा सकता है. इन्हें Lowest प्राथमिकता पर फ़ेच किया जाता है, क्योंकि ये आने वाले समय में होने वाले नेविगेशन के लिए हैं. Chrome, मौजूदा पेज के संसाधनों को प्राथमिकता देता है.
इनमें से किसी एक पंक्ति पर क्लिक करने से, Sec-Purpose: prefetch एचटीटीपी हेडर भी दिखता है. इससे सर्वर साइड पर इन अनुरोधों की पहचान की जा सकती है:
अनुमान के हिसाब से लोड होने वाले टैब की मदद से, prefetch को डीबग करें
Chrome DevTools के ऐप्लिकेशन पैनल में, बैकग्राउंड सेवाएं सेक्शन में अनुमान लोड करने का एक नया सेक्शन जोड़ा गया है. इससे अनुमान लगाने के नियमों को डीबग करने में मदद मिलेगी:
इस सेक्शन में तीन टैब उपलब्ध हैं:
- अनुमान लोड होने पर, जो मौजूदा पेज की प्रीरेंडरिंग की स्थिति के बारे में जानकारी देते हैं.
- ऐसे नियम जिनमें मौजूदा पेज पर मिले सभी नियमों के सेट की सूची होती है.
- ऐसे अनुमान जिनमें नियम के सेट में मौजूद, प्रीफ़ेच और पहले से रेंडर किए गए सभी यूआरएल की सूची होती है.
पिछले स्क्रीनशॉट में अनुमान टैब दिखाया गया है और हम देख सकते हैं कि इस उदाहरण पेज में तीन पेजों को प्रीफ़ेच करने के लिए, सिर्फ़ अनुमान लगाने के नियमों का एक सेट है. इनमें से दो प्रीफ़ेच हो गए और एक नहीं हो सका. नियम सेट के बगल में दिए गए आइकॉन पर क्लिक करके, आपको एलिमेंट पैनल में नियम सेट के सोर्स पर ले जाया जा सकता है. इसके अलावा, स्थिति लिंक पर क्लिक करके आपको उस नियम-सेट के लिए फ़िल्टर किए गए अनुमान टैब पर ले जाया जा सकता है.
अनुमान टैब में, टारगेट यूआरएल की सभी कार्रवाइयों की सूची होती है. साथ ही, उनमें हर अनुमान की स्थिति और कार्रवाई (प्रीफ़ेच या प्रीरेंडरिंग) की जानकारी भी होती है, जिसके नियम सेट का इस्तेमाल किया गया था (क्योंकि यह एक पेज पर एक से ज़्यादा हो सकती है). साथ ही, इसमें हर अनुमान की स्थिति भी शामिल होती है:
यूआरएल के ऊपर, ड्रॉप-डाउन का इस्तेमाल करके सभी नियम सेट के यूआरएल दिखाए जा सकते हैं या सिर्फ़ किसी खास नियम सेट के यूआरएल दिखाए जा सकते हैं. उसके नीचे, सभी यूआरएल एक सूची में मौजूद होंगे. किसी यूआरएल पर क्लिक करने से आपको ज़्यादा जानकारी मिलती है.
इस स्क्रीनशॉट में, हम next3.html पेज पर गड़बड़ी की वजह देख सकते हैं (जो मौजूद नहीं है. इसलिए, यह 404 दिखाता है, जो कि एक नॉन-2xx एचटीटीपी स्टेटस कोड है).
खास जानकारी टैब यानी अनुमान लोड होने पर, इस पेज के लिए अनुमान के हिसाब से यूआरएल लोड होने की स्थिति की रिपोर्ट दिखती है. इससे पता चलता है कि इस पेज के लिए प्रीफ़ेच या प्रीरेंडरिंग की सुविधा का इस्तेमाल किया गया था या नहीं.
प्रीफ़ेच किए गए किसी पेज के लिए, जब उस पेज को इस पर नेविगेट किया जाएगा, तो आपको एक सफल मैसेज दिखेगा:
मेल न खाने वाले अनुमान
जब अनुमान के नियमों वाले किसी ऐसे पेज से नेविगेशन किया जाता है जिसकी वजह से प्रीफ़ेच या प्रीरेंडरिंग की सुविधा का इस्तेमाल नहीं किया जाता, तो टैब का एक अतिरिक्त सेक्शन इस बारे में ज़्यादा जानकारी दिखाएगा कि यूआरएल, अनुमान लगाने वाले किसी भी यूआरएल से मेल क्यों नहीं खाता. इससे आपको अनुमान लगाने से जुड़े नियमों में टाइपिंग की गलतियों को पहचानने में मदद मिलती है.
उदाहरण के लिए, हमने next4.html पर नेविगेट किया, लेकिन सिर्फ़ next.html, next2.html या next3.html ही प्रीफ़ेच हैं. इसलिए, हम देख सकते हैं कि यह उन तीनों नियमों में से किसी भी नियम से पूरी तरह मेल नहीं खाता.
अनुमान लोड टैब, अनुमान लगाने के नियमों को खुद डीबग करने और JSON में सिंटैक्स की गड़बड़ियों को खोजने में बहुत मदद करते हैं.
प्रीफ़ेच के मामले में, ऐसा हो सकता है कि नेटवर्क पैनल जाना-पहचाना हो. प्रीफ़ेच नहीं होने के उदाहरण के लिए, आप यहां प्रीफ़ेच के लिए 404 देख सकते हैं:
हालांकि, अनुमान लोड टैब, प्रीरेंडरिंग अनुमान लगाने के नियमों के लिए ज़्यादा काम के होते हैं. इन नियमों के बारे में आगे बताया गया है.
prerender के लिए अनुमान लगाने के नियम
प्रीरेंडरिंग अनुमान के नियम, उसी सिंटैक्स का पालन करते हैं जिसका इस्तेमाल प्रीफ़ेच अनुमान लगाने के नियम करते हैं. उदाहरण के लिए:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
यह नियम सेट, तय किए गए पेजों का पूरा लोड और रेंडर होना ट्रिगर करता है (कुछ खास पाबंदियों के आधार पर). इससे, कॉन्टेंट तुरंत लोड होने की सुविधा मिलती है. हालांकि, इसके लिए आपको ज़्यादा संसाधनों की ज़रूरत पड़ती है.
हालांकि, प्रीफ़ेच के उलट ये नेटवर्क पैनल में देखने के लिए उपलब्ध नहीं होते, क्योंकि इन्हें Chrome में एक अलग रेंडरिंग प्रोसेस में फ़ेच और रेंडर किया जाता है. यह पहले से रेंडर किए जाने वाले अनुमान के नियमों को डीबग करने के लिए, अनुमान लोड टैब को ज़्यादा ज़रूरी बना देता है.
अनुमान के हिसाब से लोड होने वाले टैब की मदद से, prerender को डीबग करें
इन अप्रत्यक्ष लोड स्क्रीन का इस्तेमाल, पहले से रेंडर किए जाने के अनुमान के नियमों के लिए किया जा सकता है. यह उसी तरह का डेमो पेज होता है जो तीन पेजों को प्रीफ़ेच करने के बजाय, प्रीरेंडर करने की कोशिश करता है:
यहां हमें फिर से पता चला है कि तीन में से एक यूआरएल को पहले से रेंडर नहीं किया जा सका. डेवलपर, अनुमान टैब में हर यूआरएल के बारे में जानकारी हासिल कर सकते हैं. इसके लिए, उन्हें 2 के लिए तैयार, 1 काम नहीं करने वाले लिंक पर क्लिक करना होगा.
Chrome 121 में, हमने दस्तावेज़ के नियमों से जुड़ी सहायता की सुविधा लॉन्च की है. इससे ब्राउज़र, यूआरएल के खास सेट की सूची के बजाय, पेज पर मौजूद ऑरिजिन लिंक से ही इन लिंक को चुन सकता है:
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_matches": "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
</script>
इस उदाहरण में, ऑरिजिन लिंक के सभी मिलते-जुलते लिंक चुने जाते हैं. हालांकि, इनमें पहले से रेंडर किए गए लिंक के तौर पर, /not-safe-to-prerender से शुरू होने वाले लिंक शामिल नहीं होते.
यह प्रीरेंडरिंग eagerness को moderate पर भी सेट कर देता है. इसका मतलब है कि लिंक पर कर्सर घुमाने या उस पर क्लिक करने पर, नेविगेशन पहले से रेंडर हो जाता है.
अनुमान पर आधारित नियमों वाली डेमो साइट पर भी इसी तरह के नियम हैं. इस साइट के नए अनुमान लोड सेक्शन का इस्तेमाल करने से पता चलता है कि यह नया टैब, ज़रूरी शर्तें पूरी करता है. इसकी वजह यह है कि पेज पर ब्राउज़र को मिलने वाले सभी ज़रूरी शर्तें पूरी करने वाले यूआरएल सूची में शामिल हैं:
स्टेटस ट्रिगर नहीं हुआ, क्योंकि इनके लिए प्रीरेंडरिंग की प्रोसेस शुरू नहीं हुई है. हालांकि, जब हम पॉइंटर को लिंक पर दबाकर रखते हैं, तब हमें हर यूआरएल को पहले से रेंडर किए जाने की वजह से, स्टेटस में बदलाव दिखता है:
Chrome ने प्रीरेंडरिंग की सीमाएं तय की हैं, जिनमें moderate की उत्सुकता के लिए, ज़्यादा से ज़्यादा दो प्रीरेंडरिंग शामिल हैं. इसलिए, तीसरे लिंक पर कर्सर घुमाने के बाद, हमें उस यूआरएल के काम न करने की वजह दिखती है:
अन्य DevTools पैनल की मदद से prerender को डीबग करें
प्रीफ़ेच किए गए पेजों के उलट, जो पेज पहले से रेंडर किए गए हैं वे नेटवर्क पैनल जैसे DevTools पैनल की मौजूदा रेंडरिंग प्रोसेस में नहीं दिखेंगे. इसकी वजह यह है कि ये पेज, पर्दे के पीछे की गतिविधियों वाले रेंडरर में खुद ही रेंडर किए जाते हैं.
हालांकि, अब DevTools पैनल में इस्तेमाल किए गए रेंडरर को, सबसे ऊपर दाईं ओर मौजूद ड्रॉप-डाउन मेन्यू के ज़रिए या पैनल के सबसे ऊपर वाले हिस्से में यूआरएल चुनकर जांच करें चुनकर स्विच किया जा सकता है:
यह ड्रॉप डाउन (और चुना गया मान) अन्य सभी पैनल पर भी शेयर किया जाता है, जैसे कि नेटवर्क पैनल, जहां आप यह देख सकते हैं कि अनुरोध किया जा रहा पेज पहले से रेंडर किया गया पेज है:
इन रिसॉर्स के एचटीटीपी हेडर देखकर हम पता लगा सकते हैं कि वे Sec-Purpose: prefetch;prerender हेडर के साथ सेट अप हो जाएंगे:
इसके अलावा, एलिमेंट पैनल में पेज का कॉन्टेंट भी देखा जा सकता है. जैसा कि इस स्क्रीनशॉट में दिखाया गया है, जहां हमें दिखता है कि पहले से रेंडर किए गए पेज के लिए <h1> एलिमेंट मौजूद है:
इसके अलावा, कंसोल पैनल में जाकर, पहले से रेंडर किए गए पेज से मिले कंसोल लॉग देखे जा सकते हैं:
पहले से रेंडर किए गए पेज पर, अनुमान लगाने के नियमों को डीबग करना
पिछले सेक्शन में, पेज पर पहले से रेंडर किए गए पेजों को डीबग करने के तरीके के बारे में बताया गया है, जिसकी वजह से पेज प्रीरेंडरिंग शुरू हो जाती है. हालांकि, पहले से रेंडर किए गए पेजों के लिए, आंकड़ों के कॉल करके या कंसोल में लॉग इन करके, डीबग करने की जानकारी भी दी जा सकती है. इसे पिछले सेक्शन में देखा जा सकता है.
इसके अलावा, जब उपयोगकर्ता पहले से रेंडर किए गए किसी पेज पर जाता है और उस पर नेविगेट करता है, तो अनुमान लोड टैब में यह स्थिति दिखती है. साथ ही, पेज को यह भी दिखेगा कि पेज को प्रीरेंडर कर दिया गया है या नहीं. अगर पेज को पहले से रेंडर नहीं किया जा सका, तो इस बारे में जानकारी दी जाएगी कि इस मामले में ऐसा क्यों किया गया है:
इसके अलावा—जैसा कि प्रीफ़ेच के मामले में होता है—यह अनुमान लगाने के नियमों वाले ऐसे पेज से नेविगेट करने पर, जो मौजूदा पेज से मेल नहीं खाता, आपको यह दिखाने की कोशिश करेगा कि यूआरएल, अनुमान लोड टैब में पिछले पेज के अनुमान के नियमों में शामिल किए गए यूआरएल से मेल क्यों नहीं खाते:
नतीजा
इस पोस्ट में, हमने ऐसे कई तरीकों के बारे में बताया है जिनसे डेवलपर, प्रीफ़ेच और पहले से रेंडर किए जाने वाले अनुमान के नियमों को डीबग कर सकते हैं. हमारी टीम, अनुमान लगाने से जुड़े नियमों को बनाने के लिए लगातार काम कर रही है. हमें डेवलपर से सुझाव चाहिए कि ऐसे और कौनसे तरीके अपनाकर इस नए एपीआई को डीबग करने में मदद मिल सकती है. हम डेवलपर को सलाह देते हैं कि वे Chrome से जुड़ी समस्या को ट्रैक करने वाले टूल पर जाकर, किसी सुविधा के अनुरोध या किसी गड़बड़ी के बारे में बताएं.
स्वीकार की गई
Unस्प्लैश पर नबेलसन फ़र्नांडीस की थंबाइल इमेज.