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