आप firstInterimResponseStart के साथ Early Hints को कैसे मापेंगे?

प्रश्न और संदर्भ

ब्राउज़र PerformanceResourceTiming.firstInterimResponseStart को अपना रहे हैं, जो यह रिकॉर्ड करता है कि अंतरिम 1xx रिस्पॉन्स का पहला बाइट कब आता है। यह मूल्यांकन करने के लिए एक ऑब्ज़र्वर लागू करें कि क्या 103 Early Hints रिसोर्स की तैयारी के समय को कम करता है, जिसमें असमर्थित, क्रॉस-ओरिजिन और कैश्ड मामले शामिल हैं।

साक्षात्कारकर्ता क्या परीक्षण कर रहा है

• क्या आप requestStart, firstInterimResponseStart, और अंतिम रिस्पॉन्स-हेडर टाइमिंग को समझते हैं।
• क्या आप जानते हैं कि शून्य का अर्थ कोई 1xx न होना, क्रॉस-ओरिजिन मास्किंग, या कैश-संबंधित अनुपलब्ध टाइमस्टैम्प हो सकता है।
• क्या आप बफ़र्ड एंट्रीज़ और सैम्पल्ड रिपोर्टिंग के साथ PerformanceObserver का उपयोग कर सकते हैं।
• क्या आप प्रोटोकॉल लाभ को ब्राउज़र समर्थन, Timing-Allow-Origin, और उत्पाद मेट्रिक्स से अलग रखते हैं।

पहले पूछे जाने वाले स्पष्टीकरण प्रश्न

मापन का लक्ष्य

क्या हम पहले 1xx तक के समय को माप रहे हैं, Early Hints प्रीलोड्स की संख्या को, या LCP और इंटरैक्शन तत्परता जैसे उपयोगकर्ता परिणामों को?

रिसोर्स का दायरा (स्कोप)

क्या हमें केवल सेम-ओरिजिन नेविगेशन का निरीक्षण करना चाहिए, या CDN एसेट्स, फ़ॉन्ट्स और क्रॉस-ओरिजिन स्क्रिप्ट्स का भी? क्या Timing-Allow-Origin कॉन्फ़िगर किया गया है?

संगतता नीति

क्या डेटा किसी लाइव निर्णय को संचालित करेगा? जब प्रॉपर्टी अनुपलब्ध हो, तो क्या पुराने ब्राउज़रों को एक समकक्ष फ़ॉलबैक मेट्रिक प्रदान करना चाहिए?

30-सेकंड का उत्तर ढांचा

मैं PerformanceObserver का उपयोग करूंगा और firstInterimResponseStart - requestStart की गणना केवल तभी करूंगा जब प्रॉपर्टी मौजूद हो और गैर-शून्य हो। शून्य यह साबित नहीं कर सकता कि सर्वर ने 103 को छोड़ दिया है क्योंकि क्रॉस-ओरिजिन टाइमिंग को मास्क किया जा सकता है और कैश पाथ शून्य प्रदर्शित कर सकते हैं। टेलीमेट्री को समर्थन, ओरिजिन स्कोप और अंतिम रिस्पॉन्स टाइमिंग को रिकॉर्ड करना चाहिए, और फिर LCP जैसे उपयोगकर्ता मेट्रिक्स के विरुद्ध Early Hints को मान्य करना चाहिए।

गहन उत्तर के चरण

1. टाइमस्टैम्प्स को समझाएं

requestStart वह समय है जब ब्राउज़र रिसोर्स का अनुरोध करने वाला होता है; firstInterimResponseStart वह समय है जब 1xx रिस्पॉन्स का पहला बाइट आता है; finalResponseHeadersStart वह समय है जब अंतिम रिस्पॉन्स हेडर आते हैं। जब कोई अंतरिम रिस्पॉन्स मौजूद होता है, तो पहला अंतर उस 1xx तक नेटवर्क प्रतीक्षा का अनुमान लगाता है।

2. ऑब्ज़र्वर लिखें

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const interim = entry.firstInterimResponseStart;
    if (typeof interim !== "number" || interim <= 0) continue;

    reportTiming({
      name: entry.name,
      interimWait: interim - entry.requestStart,
      finalHeaders: entry.finalResponseHeadersStart - interim,
      initiator: entry.initiatorType,
    });
  }
});

observer.observe({ type: "resource", buffered: true });

प्रोडक्शन कोड को प्रॉपर्टी का फ़ीचर-डिटेक्ट करना चाहिए और नाम, सैंपलिंग और फ़ील्ड्स को सीमित करना चाहिए ताकि पूरे URLs या संवेदनशील क्वेरी पैरामीटर्स एनालिटिक्स में प्रवेश न करें।

3. शून्य की सही व्याख्या करें

शून्य का अर्थ कोई अंतरिम रिस्पॉन्स न होना हो सकता है, या यह कि किसी क्रॉस-ओरिजिन रिसोर्स ने Timing-Allow-Origin के माध्यम से टाइमिंग को उजागर नहीं किया; कैश हिट्स और रद्द किए गए अनुरोध भी संबंधित टाइमस्टैम्प्स के लिए शून्य उत्पन्न कर सकते हैं। डैशबोर्ड को "देखा नहीं गया" को "पुष्टि की गई कि कोई 1xx नहीं है" से अलग करना चाहिए और कभी भी शून्य को नकारात्मक अवधि या स्वचालित विफलता में नहीं बदलना चाहिए।

4. क्रॉस-ओरिजिन रिसोर्सेज को संभालें

यदि कोई CDN या फ़ॉन्ट क्रॉस-ओरिजिन है, तो सुरक्षित टाइमिंग फ़ील्ड्स उजागर होने से पहले सर्वर को अनुमत साइट के लिए Timing-Allow-Origin वापस करना होगा। उस हेडर को प्रत्येक ओरिजिन के बजाय वास्तविक परिनियोजन (डिप्लॉयमेंट) ओरिजिन के लिए कॉन्फ़िगर करें, और स्वीकार करें कि नीति के कारण कुछ उपयोगकर्ता अवलोकनीय नहीं रहेंगे।

5. 103 को उपयोगकर्ता लाभ से अलग करें

प्रॉपर्टी पहले 1xx टाइमिंग की रिपोर्ट करती है; यह 103 की पहचान नहीं करती है या यह साबित नहीं करती है कि प्रीलोड का उपयोग किया गया था। नेविगेशन डेटा, सर्वर लॉग्स, या एक नियंत्रित प्रयोग के साथ 103 की पुष्टि करें, फिर finalResponseHeadersStart, रिसोर्स responseEnd, और LCP की तुलना करें। एक प्रारंभिक या गलत प्रीलोड प्रदर्शन को नुकसान पहुंचा सकता है, भले ही पहला 1xx जल्दी आ जाए।

6. संगतता फ़ॉलबैक डिज़ाइन करें

असमर्थित ब्राउज़र अभी भी सामान्य requestStart, responseStart, और responseEnd मेट्रिक्स की रिपोर्ट कर सकते हैं, लेकिन वे अंतरिम टाइमिंग नहीं बना सकते हैं। क्षमता को चिह्नित करें और पुराने तथा नए नमूनों को अलग-अलग एकत्रित करें; अनुपलब्ध API को रेंडरिंग को अवरुद्ध नहीं करना चाहिए।

7. सत्यापन और शासन (गवर्नेंस) का निर्माण करें

HTTP/2-या-बाद के सेम-ओरिजिन और क्रॉस-ओरिजिन मामलों, कैश हिट्स और मिसेस, और 103 वाले और बिना 103 वाले सर्वरों की तुलना करें। सुनिश्चित करें (Assert) कि interimWait >= 0 हो और अंतिम हेडर पहले अंतरिम रिस्पॉन्स से पहले न आएं। रिपोर्ट आवृत्ति को सीमित करें और नेटवर्क टाइमस्टैम्प को उत्पाद परिणाम के रूप में मानने के बजाय LCP, प्रीलोड हिट दर और त्रुटि दर के साथ टाइमिंग की व्याख्या करें।

एक उच्च-गुणवत्ता वाला नमूना उत्तर

मैं एक बफ़र्ड PerformanceObserver का उपयोग करूंगा और केवल तभी 1xx प्रतीक्षा समय की रिपोर्ट करूंगा जब firstInterimResponseStart मौजूद हो और गैर-शून्य हो। मैं शून्य को अनिश्चित मानकर सुरक्षित रखूंगा, ओरिजिन, Timing-Allow-Origin, कैश और ब्राउज़र क्षमता के अनुसार खंडित (सेगमेंट) करूंगा, और नियंत्रित प्रयोगों के साथ 103 को सत्यापित करूंगा। Early Hints केवल तभी बना रहता है जब LCP, प्रीलोड हिट दर और त्रुटियों में सुधार होता है—न कि केवल इसलिए कि एक अंतरिम बाइट पहले आ गया था।

सामान्य गलतियाँ

• गैर-शून्य मान को इस बात का प्रमाण मानना कि रिस्पॉन्स 103 था।
• प्रत्येक शून्य को इस बात का प्रमाण मानना कि सर्वर ने कोई 1xx नहीं भेजा।
• क्रॉस-ओरिजिन Timing-Allow-Origin के गायब होने के कारण होने वाले डेटा अंतर को अनदेखा करना।
• responseStart को अंतिम-हेडर समय के रूप में उपयोग करना और अंतरिम को अंतिम रिस्पॉन्स के साथ मिलाना।
• केवल लोड के बाद getEntriesByType को कॉल करना और पहले रिकॉर्ड की गई प्रविष्टियों को छोड़ देना।
• LCP, प्रीलोड हिट्स और त्रुटियों की जांच किए बिना केवल नेटवर्क टाइमिंग देखना।

अनुवर्ती प्रश्न और उत्तर

क्या firstInterimResponseStart 103 की पुष्टि कर सकता है?

नहीं। यह 100 Continue सहित किसी भी 1xx रिस्पॉन्स के पहले बाइट को रिकॉर्ड करता है। सर्वर लॉग्स, नियंत्रित अनुरोधों और रिसोर्स-लोडिंग व्यवहार के साथ 103 की पुष्टि करें।

क्रॉस-ओरिजिन प्रविष्टियाँ अक्सर शून्य क्यों होती हैं?

Resource Timing क्रॉस-ओरिजिन टाइमस्टैम्प्स को मास्क कर देता है। मेल खाने वाले Timing-Allow-Origin के बिना, सुरक्षित फ़ील्ड्स शून्य लौटाते हैं। रिस्पॉन्स नीति को ठीक करें या नमूने को अनवलोकनीय के रूप में वर्गीकृत करें; कोई काल्पनिक अनुमान न बनाएं।

responseStart और finalResponseHeadersStart कैसे भिन्न हैं?

एक अंतरिम रिस्पॉन्स के साथ, responseStart पहले अंतरिम बाइट को प्रतिबिंबित कर सकता है, जबकि finalResponseHeadersStart अंतिम हेडर का प्रतिनिधित्व करता है। अंतिम रिस्पॉन्स से पहले सर्वर की तैयारी को मापते समय बाद वाले का उपयोग करें।

पुराने ब्राउज़रों के लिए फ़ॉलबैक क्या है?

प्रॉपर्टी का फ़ीचर-डिटेक्ट करें, सामान्य अनुरोध और रिस्पॉन्स समय एकत्र करना जारी रखें, और अनुपलब्ध अंतरिम फ़ील्ड को चिह्नित करें। पुराने-ब्राउज़र नमूनों को नए-API नमूनों से अलग एकत्रित करें।

आप कैसे साबित करते हैं कि Early Hints को बनाए रखना उचित है?

समान नेटवर्क, कैश और एसेट संस्करणों के साथ सक्षम और अक्षम कोहोर्ट्स चलाएं। LCP, प्रीलोड हिट दर, अंतिम-हेडर समय, रिसोर्स पूर्णता और त्रुटियों की तुलना करें; एक प्रारंभिक 1xx केवल मध्यवर्ती साक्ष्य है।