अनुमान के नियमों का इस्तेमाल, अगले पेज के नेविगेशन को पहले से लोड करने और पहले से रेंडर करने के लिए किया जा सकता है. इस बारे में पिछली पोस्ट में बताया गया है. इससे पेज बहुत तेज़ी से या तुरंत लोड हो सकते हैं. साथ ही, इन अतिरिक्त पेज नेविगेशन के लिए वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को बेहतर बनाया जा सकता है.
अनुमान लगाने के नियमों को डीबग करना मुश्किल हो सकता है. यह बात खास तौर पर, पहले से रेंडर किए गए पेजों के लिए ज़्यादा सही है. ऐसा इसलिए है, क्योंकि इन पेजों को अलग रेंडरर में रेंडर किया जाता है. यह एक तरह का छिपा हुआ बैकग्राउंड टैब होता है, जो चालू होने पर मौजूदा टैब की जगह ले लेता है. इसलिए, समस्याओं को डीबग करने के लिए, 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स्प्लैश पर न्यूबेल्सन फ़र्नांडीस की थंबाइल इमेज.