प्रॉम्प्ट और दायरा
एक समाचार साइट Speculation Rules API के साथ लेख-विवरण नेविगेशन को तेज़ करना चाहती है। समझाएं कि आप prefetch बनाम prerender कैसे चुनेंगे, नियमों का दायरा तय करेंगे, और लॉग-इन साइड इफेक्ट्स, ताज़गी, ब्राउज़र फ़ॉल बैक, कैंसिलेशन और मॉनिटरिंग को कैसे संभालेंगे।
Chrome दस्तावेज़ बताता है कि prefetch मुख्य रूप से संसाधनों को समय से पहले फ़ेच करता है, जबकि prerender एक अदृश्य संदर्भ (invisible context) में पेज को लोड और रेंडर करता है। इसलिए Prerender एक बड़ा नेविगेशन लाभ दे सकता है लेकिन यह स्क्रिप्ट्स को चला सकता है और साइड इफेक्ट्स को पहले ट्रिगर कर सकता है। यह प्रश्न प्रदर्शन इंजीनियरिंग, प्रोग्रेसिव एन्हांसमेंट और सुरक्षा सीमाओं का परीक्षण करता है।
इंटरव्यूअर क्या मूल्यांकन करता है
उम्मीदवार को रणनीति को नेविगेशन हिट रेट और साइड-इफेक्ट जोखिम से जोड़ना चाहिए; सिलेक्टर्स, ओरिजिन, कैश और प्राइवेसी को सीमित करना चाहिए; जब API असमर्थित हो या अटकलें (speculation) रद्द कर दी जाएं तो सामान्य नेविगेशन को बनाए रखना चाहिए; और अकेले लैब स्कोर के बजाय वास्तविक उपयोगकर्ता डेटा के साथ प्रभाव साबित करना चाहिए।
30-सेकंड का उत्तर ढांचा
"मैं उच्च-संभावना वाले, केवल-पढ़ने योग्य (read-only), समान-मूल (same-origin) लेख लिंक के लिए रूढ़िवादी (conservative) prefetch से शुरुआत करूंगा। मैं कोई राइट साइड इफेक्ट न होने, पर्याप्त हिट रेट और संसाधन बजट की पुष्टि करने के बाद ही prerender का उपयोग करूंगा। नियम लॉगिन, भुगतान, वैयक्तिकरण (personalization) और परिवर्तनशील (mutating) रूट्स को बाहर रखेंगे। सर्वर इडेम्पोटेंसी और निजी कैशिंग लागू करेगा; क्लाइंट document.prerendering का पता लगाएगा और एनालिटिक्स को स्थगित करेगा। असमर्थित ब्राउज़र सामान्य लिंक का उपयोग करेंगे। मैं सक्रियण दर (activation rate), LCP, INP, बैंडविड्थ और कैंसिलेशन दर की तुलना करूंगा।"
चरण-दर-चरण विस्तृत उत्तर
चरण 1: नेविगेशन जोखिम को वर्गीकृत करें
केवल-पढ़ने योग्य लेख और सहायता पृष्ठों को शामिल करें; चेकआउट, लॉगआउट, लाइक्स, भुगतान और अत्यधिक वैयक्तिकृत पृष्ठों को बाहर रखें। Prerender पेज लाइफ़साइकिल कोड चलाता है, इसलिए राइट्स के लिए वास्तविक उपयोगकर्ता सक्रियण की आवश्यकता होनी चाहिए।
चरण 2: prefetch या prerender चुनें
जब हिट रेट कम हो या साइड इफेक्ट्स अनिश्चित हों तो prefetch का उपयोग करें। स्थिर फ़र्स्ट पेंट और पर्याप्त CPU व मेमोरी बजट वाले उच्च-संभावना, समान-मूल पेजों के लिए prerender का उपयोग करें। कभी भी डिफ़ॉल्ट रूप से प्रत्येक लिंक को prerender न करें।
चरण 3: नियमों और संसाधन लागत को सीमित करें
ऐसे दस्तावेज़ या सर्वर नियम उत्पन्न करें जो केवल लेख लिंक से मेल खाते हों। समवर्ती उम्मीदवारों और संसाधन आकार को सीमित करें। उपयुक्त कैश, Vary और अमान्यकरण (invalidation) व्यवहार सेट करें ताकि निजी प्रतिक्रियाएं गलत तरीके से साझा न हों।
चरण 4: साइड इफेक्ट्स और लॉगिन स्थिति को अलग करें
राइट एंडपॉइंट्स के लिए वास्तविक इंटरैक्शन और CSRF सुरक्षा की आवश्यकता होनी चाहिए; एक सट्टा अनुरोध (speculative request) स्थिति को म्यूटेट नहीं कर सकता है। जब तक document.prerendering सत्य (true) है, तब तक एनालिटिक्स, विज्ञापनों और सूचनाओं में देरी करें, फिर सक्रियण के बाद एक डिडप्लीकेटेड इवेंट भेजें। निजी कैशिंग का उपयोग करें या वैयक्तिकृत प्रतिक्रियाओं को बाहर रखें।
चरण 5: फ़ॉल बैक और कैंसिलेशन डिज़ाइन करें
असमर्थित ब्राउज़र सामान्य लिंक का उपयोग करते हैं। मेमोरी, नेटवर्क या ब्राउज़र सीमाओं द्वारा अटकलों को रद्द किया जा सकता है, इसलिए पेज को अभी भी सामान्य रूप से लोड होना चाहिए। सट्टा पेज की प्रतीक्षा करते समय क्लिक फ़ीडबैक को ब्लॉक न करें।
चरण 6: ताज़गी (freshness) को संभालें
बार-बार संपादित किए जाने वाले लेखों के लिए, कैश लाइफ़टाइम छोटा करें और सक्रियण के समय संस्करण को मान्य करें; ETag के साथ सशर्त अनुरोधों का उपयोग करें। यदि prerender के बाद सामग्री बदल गई है, तो बासी सामग्री को चमकाए बिना या उपयोगकर्ता क्रियाओं को दोबारा चलाए बिना परिवर्तनशील क्षेत्रों को रीफ़्रेश करें।
चरण 7: वास्तविक उपयोगकर्ता मूल्य मापें
सक्रियण दर, नेविगेशन प्रतीक्षा, LCP, INP, CLS, बैंडविड्थ, CPU, मेमोरी और कैंसिलेशन की एक नियंत्रित तुलना चलाएं। ब्राउज़र, नेटवर्क, डिवाइस और लॉगिन स्थिति द्वारा खंडित करें। यदि लागत या त्रुटियां बढ़ने के साथ गति में सुधार होता है, तो नियमों को संकीर्ण करें या prefetch पर वापस लौटें।
ट्रेड-ऑफ़ और सीमाएं
हिट रेट बनाम संसाधन लागत
कम-हिट-रेट prerender CPU, मेमोरी और बैंडविड्थ बर्बाद करता है। Prefetch की लागत कम होती है लेकिन यह एक छोटा लाभ प्रदान करता है। देखे गए सक्रियण और परिभाषित बजट से सीमाएं (thresholds) निर्धारित करें।
ताज़गी बनाम त्वरित नेविगेशन
लंबी कैशिंग हिट रेट में सुधार करती है लेकिन बासीपन को बढ़ाती है। स्थिर URL का संस्करण बनाएं; सक्रियण पर गतिशील सामग्री को मान्य करें और केवल परिवर्तनशील क्षेत्रों को रीफ़्रेश करें।
अनुकूलता बनाम रखरखाव
अटकलें एक प्रोग्रेसिव एन्हांसमेंट लेयर हैं और सामान्य लिंक विहित (canonical) बने रहते हैं। व्यावसायिक स्थिति परिवर्तनों को prerender लाइफ़साइकिल से स्वतंत्र रखें।
विफलता अभ्यास (failure drills) और विकास
एक सट्टा पृष्ठ राइट को ट्रिगर करता है
स्टेजिंग में सट्टा अनुरोधों को लॉग करें और सत्यापित करें कि लाइक्स, एनालिटिक्स और सूचनाओं में कोई म्यूटेशन नहीं है। नियम से रूट हटाएं और राइट्स को वास्तविक सक्रियण के पीछे ले जाएं।
कम हिट रेट संसाधनों को बर्बाद करता है
बाधित उपकरणों और नेटवर्क के लिए prerender को अक्षम करें, बैंडविड्थ और INP की तुलना करें, और डेटा द्वारा समर्थित होने पर ही एक छोटे prefetch प्रयोग से prerender में स्नातक करें।
सक्रियण से पहले सामग्री समाप्त हो जाती है
prerender और क्लिक के बीच एक प्रकाशन अपडेट का अनुकरण करें। ETag सत्यापन और आंशिक रीफ़्रेश को सत्यापित करें ताकि सक्रिय पेज वर्तमान शीर्षक और बॉडी दिखाए।
सामान्य गलतियां और फ़ॉलो-अप
गलती 1: प्रत्येक लिंक को prerender करना
हिट-रेट, समवर्ती और मेमोरी थ्रेशोल्ड के साथ-साथ एक स्पष्ट अक्षम शर्त के लिए कहें।
गलती 2: prerender को कैश के रूप में मानना
पूछें कि कौन से स्क्रिप्ट निष्पादित होते हैं और एनालिटिक्स और लॉगिन स्थिति को कैसे विलंबित या अलग किया जाता है।
गलती 3: केवल Lighthouse को देखना
पूछें कि वास्तविक उपयोगकर्ता माप में सक्रियण, कैंसिलेशन और बैंडविड्थ को कैसे खंडित किया जाता है।
गलती 4: सामान्य नेविगेशन को छोड़ना
पूछें कि क्या ब्राउज़र में समर्थन की कमी होने या अटकलों को रद्द करने पर भी क्लिक काम करता है।
गलती 5: ताज़गी को अनदेखा करना
पूछें कि prerender और क्लिक के बीच एक प्रकाशन अपडेट बासी सामग्री से कैसे बचता है।
विस्तारित फ़ॉलो-अप और संदर्भ उत्तर
प्रत्येक पेज को prerender क्यों नहीं किया जाता?
Prerender अतिरिक्त संसाधनों की खपत करता है और स्क्रिप्ट्स को निष्पादित कर सकता है। बजट के भीतर केवल उच्च-हिट, केवल-पढ़ने योग्य, समान-मूल पेजों का चयन करें।
आप डुप्लिकेट एनालिटिक्स से कैसे बचते हैं?
document.prerendering का पता लगाएं, सक्रियण तक इवेंट को टालें, और नेविगेशन पहचानकर्ता के साथ डिडप्लीकेट करें।
आप कैसे साबित करते हैं कि अनुकूलन काम करता है?
वास्तविक उपयोगकर्ता असाइनमेंट का उपयोग करें और डिवाइस और नेटवर्क द्वारा सक्रियण नेविगेशन LCP, INP, प्रतीक्षा समय, बैंडविड्थ और कैंसिलेशन की तुलना करें।