अनुमान के आधार पर तय किए गए नियमों का इस्तेमाल, अगले पेज के नेविगेशन को प्रीफ़ेच और प्रीरेंडर करने के लिए किया जा सकता है. इसके बारे में पिछली पोस्ट में बताया गया है. इससे पेज बहुत तेज़ी से लोड हो सकते हैं या तुरंत लोड हो सकते हैं. साथ ही, पेज पर नेविगेट करने के दौरान वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी में काफ़ी सुधार होता है.
अनुमान लगाने के नियमों को डीबग करना मुश्किल हो सकता है. यह खास तौर पर, पहले से रेंडर किए गए पेजों के लिए सही है. ऐसा इसलिए, क्योंकि इन पेजों को अलग रेंडरर में रेंडर किया जाता है. यह कुछ हद तक, छिपे हुए बैकग्राउंड टैब की तरह होता है. जब इसे चालू किया जाता है, तब यह मौजूदा टैब की जगह ले लेता है. इसलिए, समस्याओं को डीबग करने के लिए, DevTools के सामान्य विकल्पों का हमेशा इस्तेमाल नहीं किया जा सकता.
Chrome की टीम, स्पेकुलेशन रूल डीबग करने के लिए DevTools की सुविधा को बेहतर बनाने पर काम कर रही है. इस पोस्ट में, आपको पेज के स्पेकुलेशन नियमों को समझने के लिए, इन टूल का इस्तेमाल करने के सभी तरीकों के बारे में बताया जाएगा. साथ ही, यह भी बताया जाएगा कि ये टूल काम क्यों नहीं कर रहे हैं. इसके अलावा, यह भी बताया जाएगा कि डेवलपर, DevTools के ज़्यादा जाने-पहचाने विकल्पों का इस्तेमाल कब कर सकते हैं और कब नहीं.
"प्री-" शब्दों के बारे में जानकारी
"प्री-" से शुरू होने वाले कई शब्द हैं, जिनसे भ्रम पैदा होता है. इसलिए, हम इन शब्दों के बारे में जानकारी देकर शुरुआत करेंगे:
- प्रीफ़ेच: आने वाले समय में परफ़ॉर्मेंस को बेहतर बनाने के लिए, किसी संसाधन या दस्तावेज़ को पहले से फ़ेच करना. इस पोस्ट में, Speculation Rules API का इस्तेमाल करके दस्तावेज़ों को प्रीफ़ेच करने के बारे में बताया गया है. इसमें,
<link rel="prefetch">विकल्प के बारे में नहीं बताया गया है. यह विकल्प, सब-संसाधनों को प्रीफ़ेच करने के लिए अक्सर इस्तेमाल किया जाता है. हालांकि, यह विकल्प Speculation Rules API की तरह ही काम करता है, लेकिन यह पुराना है. - प्रीरेंडर: यह प्रीफ़ेचिंग से एक कदम आगे है. इसमें पूरे पेज को इस तरह रेंडर किया जाता है जैसे उपयोगकर्ता ने उस पर नेविगेट किया हो. हालांकि, इसे बैकग्राउंड में रेंडर करने की प्रोसेस में छिपाकर रखा जाता है, ताकि उपयोगकर्ता के उस पेज पर नेविगेट करने पर इसका इस्तेमाल किया जा सके. यह दस्तावेज़, इस सुविधा के नए Speculation Rules API वर्शन के बारे में है. इसमें
<link rel="prerender">विकल्प के बारे में नहीं बताया गया है.<link rel="prerender">विकल्प, अब पूरी तरह से प्रीरेंडर नहीं करता है. - अनुमान के आधार पर नेविगेशन: यह शब्द, अनुमान के आधार पर तय किए गए नियमों के हिसाब से ट्रिगर होने वाले नए प्रीफ़ेच और प्रीरेंडर विकल्पों के लिए इस्तेमाल किया जाता है.
- प्रीलोड: यह एक ऐसा शब्द है जिसका इस्तेमाल कई टेक्नोलॉजी और प्रोसेस के लिए किया जा सकता है. जैसे,
<link rel="preload">, प्रीलोड स्कैनर, और सर्विस वर्कर नेविगेशन प्रीलोड. इन आइटम को यहां शामिल नहीं किया जाएगा. हालांकि, "अनुमानित नेविगेशन" शब्द से इन्हें अलग करने के लिए, इस शब्द को शामिल किया गया है.
prefetch के लिए अनुमान लगाने के नियम
अनुमान के आधार पर तय किए गए नियमों का इस्तेमाल, अगले नेविगेशन के दस्तावेज़ को प्रीफ़ेच करने के लिए किया जा सकता है. उदाहरण के लिए, किसी पेज में यह JSON डालने पर, next.html और next2.html को पहले से फ़ेच कर लिया जाएगा:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"],
"tag": "rule-set-tag-1"
}
]
}
</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"],
"tag": "rule-set-tag-1"
}
]
}
</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 से शुरू होने वाले लिंक को छोड़कर.
यह prerender eagerness को moderate पर भी सेट करता है. इसका मतलब है कि लिंक पर कर्सर घुमाने (डेस्कटॉप पर), व्यूपोर्ट (मोबाइल पर) के आधार पर या क्लिक करने पर नेविगेशन को पहले से रेंडर किया जाता है.
अनुमान के आधार पर तय किए गए नियमों की डेमो साइट पर, इस तरह के मिलते-जुलते नियम मौजूद हैं. साथ ही, इस साइट पर अनुमान के आधार पर लोड होने वाले पेजों के नए सेक्शन का इस्तेमाल करने से, इस नए टैब के फ़ायदे के बारे में पता चलता है. ऐसा इसलिए, क्योंकि पेज पर ब्राउज़र को मिले सभी ज़रूरी यूआरएल यहां दिए गए हैं:
इनके लिए प्रीरेंडरिंग की प्रोसेस शुरू नहीं हुई है. इसलिए, स्टेटस ट्रिगर नहीं किया गया है. हालांकि, जब हम लिंक पर पॉइंटर घुमाते हैं, तो हमें हर यूआरएल के प्रीरेंडर होने पर स्थिति में बदलाव दिखता है:
Chrome ने प्रीरेंडरिंग की सीमाएं तय की हैं. इनमें moderate ईगरनेस के लिए, ज़्यादा से ज़्यादा दो प्रीरेंडरिंग शामिल हैं. इसलिए, तीसरे लिंक पर कर्सर घुमाने के बाद, हमें उस यूआरएल के लिए प्रीरेंडरिंग नहीं हो पाने की वजह दिखती है:
DevTools के अन्य पैनल की मदद से prerender को डीबग करना
प्रीफ़ेच किए गए पेजों के उलट, पहले से रेंडर किए गए पेज, DevTools पैनल में मौजूदा रेंडरिंग प्रोसेस में नहीं दिखेंगे. जैसे, नेटवर्क पैनल. ऐसा इसलिए, क्योंकि वे पर्दे के पीछे मौजूद अपने रेंडरर में रेंडर किए जाते हैं.
हालांकि, अब DevTools पैनल में इस्तेमाल किए गए रेंडरर को बदला जा सकता है. इसके लिए, सबसे ऊपर दाईं ओर मौजूद ड्रॉप-डाउन मेन्यू का इस्तेमाल करें. इसके अलावा, पैनल के सबसे ऊपर मौजूद किसी यूआरएल को चुनकर और जांच करें को चुनकर भी रेंडरर को बदला जा सकता है:
यह ड्रॉप-डाउन (और चुनी गई वैल्यू), अन्य सभी पैनल के साथ भी शेयर की जाती है. जैसे, नेटवर्क पैनल. यहां देखा जा सकता है कि अनुरोध किया गया पेज, पहले से रेंडर किया गया पेज है:
इन संसाधनों के एचटीटीपी हेडर देखने पर, हमें पता चलता है कि इन सभी को Sec-Purpose: prefetch;prerender हेडर के साथ सेट किया जाएगा:
इसके अलावा, Elements पैनल में जाकर भी पेज का कॉन्टेंट देखा जा सकता है. जैसे, इस स्क्रीनशॉट में दिखाया गया है कि <h1> एलिमेंट, पहले से रेंडर किए गए पेज के लिए है:
इसके अलावा, कंसोल पैनल में भी देखा जा सकता है. यहां आपको पहले से रेंडर किए गए पेज से मिले कंसोल लॉग दिखेंगे:
पहले से रेंडर किए गए पेज पर अनुमान लगाने के नियमों को डीबग करना
पिछले सेक्शन में, उस पेज पर पहले से रेंडर किए गए पेजों को डीबग करने का तरीका बताया गया है जो पहले से रेंडर करने की प्रोसेस शुरू करता है. हालांकि, ऐसा भी हो सकता है कि प्रीरेंडर किए गए पेज खुद ही डीबग करने से जुड़ी जानकारी दें. इसके लिए, वे Analytics कॉल करते हैं या कंसोल में लॉग करते हैं. इसे पिछले सेक्शन में बताए गए तरीके से देखा जा सकता है.
इसके अलावा, जब कोई उपयोगकर्ता किसी प्रीरेंडर किए गए पेज पर जाता है, तो अनुमान के आधार पर लोड होने वाले पेज टैब में यह स्टेटस दिखेगा. साथ ही, यह भी दिखेगा कि पेज को प्रीरेंडर किया गया था या नहीं. अगर पेज को पहले से रेंडर नहीं किया जा सका, तो इसकी वजह बताई जाती है:
इसके अलावा, प्रीफ़ेच की तरह, अनुमान लगाने के नियमों वाले किसी ऐसे पेज से नेविगेट करने पर जो मौजूदा पेज से मेल नहीं खाते हैं, आपको यह दिखाने की कोशिश की जाएगी कि यूआरएल, पिछले पेज के अनुमान लगाने के नियमों में शामिल यूआरएल से मेल क्यों नहीं खाते. यह जानकारी, अनुमान के आधार पर लोड किए गए पेज टैब में दिखेगी:
नतीजा
इस पोस्ट में, हमने ऐसे अलग-अलग तरीके दिखाए हैं जिनकी मदद से डेवलपर, अनुमान के आधार पर तय किए गए प्रीफ़ेच और प्रीरेंडरिंग के नियमों को डीबग कर सकते हैं. हमारी टीम, अनुमान लगाने से जुड़े नियमों के लिए टूल बनाने पर लगातार काम कर रही है. हम डेवलपर से यह जानना चाहेंगे कि इस नए एपीआई को डीबग करने के लिए, और कौनसे तरीके मददगार हो सकते हैं. हम डेवलपर को सुझाव देते हैं कि वे किसी सुविधा के अनुरोध या बग के बारे में Chrome के इश्यू ट्रैकर पर शिकायत करें.
Acknowledgements
Unsplash पर Nubelson Fernandes की थंबनेल इमेज.