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