फ्रंटएंड इंटरव्यू: फील्ड INP का निदान करने के लिए आप Long Animation Frames API का उपयोग कैसे करेंगे?

प्रॉम्प्ट और संदर्भ

Lighthouse में पेज अच्छा दिखता है, फिर भी वास्तविक उपयोगकर्ता रिपोर्ट करते हैं कि क्लिक अटके हुए महसूस होते हैं। मौजूदा RUM केवल एक INP मान की रिपोर्ट करता है और यह नहीं बता सकता कि देरी का कारण इवेंट हैंडलर, requestAnimationFrame, स्टाइल और लेआउट, या थर्ड-पार्टी स्क्रिप्ट थे या नहीं। LoAF ऑब्जर्वेशन, कोरिलेशन, सैंपलिंग, एग्रीगेशन और फिक्स लूप को डिज़ाइन करें।

इंटरव्यूअर क्या जांच रहा है

• क्या आप INP इनपुट डिले (input delay), प्रोसेसिंग अवधि (processing duration) और प्रेजेंटेशन डिले (presentation delay) को समझते हैं।
• क्या आप जानते हैं कि LoAF 50 मिलीसेकंड से अधिक के फ्रेम मापता है और स्क्रिप्ट एट्रिब्यूशन और रेंडरिंग टाइमिंग्स को उजागर करता है।
• क्या आप हर रॉ इवेंट को अपलोड करने के बजाय इंटरैक्शन, LoAF, पेज वर्जन और डिवाइस संदर्भ को कोरिलेट करते हैं।
• क्या आप ब्राउज़र सपोर्ट, बफर, क्रॉस-ओरिजिन स्क्रिप्ट और गोपनीयता जोखिम को संभालते हैं।
• क्या आप डेटा को कोड फिक्स, रिग्रेशन चेक और अलर्टिंग से जोड़ते हैं।

पहले स्पष्ट करने योग्य प्रश्न

1. क्या लक्ष्य INP निदान, एनिमेशन स्मूथनेस, लॉन्ग-टास्क मॉनिटरिंग या तीनों हैं?
2. सैंपलिंग दर, दैनिक उपयोगकर्ता, रिपोर्टिंग बजट और रिटेंशन अवधि क्या हैं?
3. क्या आपको URL, स्क्रिप्ट स्रोत, इंटरैक्शन प्रकार और पेज वर्जन रिकॉर्ड करने की अनुमति है?
4. किन ब्राउज़रों पर काम करना आवश्यक है, और जब LoAF अनुपलब्ध हो तो फॉलबैक क्या है?
5. अलर्ट और फिक्स का स्वामित्व किस टीम के पास है, और क्या थ्रेशोल्ड को p75, p95 या डिवाइस कोहोर्ट्स का उपयोग करना चाहिए?

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

“मैं INP फेज़ ब्रेकडाउन और LoAF ऑब्जर्वेशन को एक ही RUM कोरिलेशन पाथ में रखूँगा। long-animation-frame के लिए PerformanceObserver का उपयोग करें, केवल उच्च-INP इंटरैक्शन विंडो को इंटरसेक्ट करने वाले फ्रेम को रखें, और duration, blockingDuration, renderStart, styleAndLayoutStart और स्क्रिप्ट एट्रिब्यूशन को बनाए रखें। सपोर्ट का पता लगाएं, फ़ील्ड्स को रिडैक्ट करें, गतिशील रूप से सैंपल लें, और पेज वर्जन, डिवाइस कोहोर्ट और एक अनाम सेशन कुंजी के साथ रिपोर्ट को बैच करें। इंटरैक्शन और रिलीज़ के आधार पर एग्रीगेट करें, फिर अलर्ट को sourceURL और फ़ंक्शन से लिंक करें। प्रत्येक फिक्स को समान कोहोर्ट्स और सैंपलिंग के साथ मान्य करें।”

चरण-दर-चरण विस्तृत विश्लेषण

1. INP चरणों को विभाजित करें

इनपुट डिले कतार में लगने से लेकर हैंडलर शुरू होने तक का समय है, प्रोसेसिंग अवधि हैंडलर निष्पादन है, और प्रेजेंटेशन डिले प्रोसेसिंग समाप्त होने से लेकर अगले पेंट किए गए फ्रेम तक का समय है। LoAF, INP की जगह नहीं लेता; यह धीमे चरण का पता लगाने के लिए फ्रेम संदर्भ जोड़ता है।

2. LoAF एंट्रीज़ को ऑब्जर्व करें

परफॉरमेंस टाइमलाइन को बार-बार पढ़ने के बजाय PerformanceObserver के साथ long-animation-frame को ऑब्जर्व करें। थ्रेशोल्ड 50 मिलीसेकंड है, और एंट्रीज़ में duration, blockingDuration, renderStart, styleAndLayoutStart, firstUIEventTimestamp और scripts शामिल हैं।

if (PerformanceObserver.supportedEntryTypes.includes("long-animation-frame")) {
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      queueFrameForCorrelation(entry);
    }
  });
  observer.observe({ type: "long-animation-frame", buffered: true });
}

3. इंटरैक्शन और रिलीज़ को कोरिलेट करें

एक अल्पकालिक INP इंटरैक्शन सारांश और LoAF एंट्रीज़ का एक रिंग बफर बनाए रखें। जब कोई इंटरैक्शन समाप्त होता है, तो इंटरसेक्टिंग फ्रेम खोजने के लिए firstUIEventTimestamp, startTime और duration का उपयोग करें और केवल सबसे अधिक व्याख्यात्मक कुछ को बनाए रखें। पेज वर्जन, एक्सपेरिमेंट कोहोर्ट, डिवाइस क्लास और अनाम सेशन कुंजी संलग्न करें, कभी भी पूरा इनपुट नहीं।

4. स्क्रिप्ट और रेंडरिंग लागत की व्याख्या करें

blockingDuration उस समय का अनुमान लगाता है जो इनपुट या उच्च-प्राथमिकता वाले कार्य को रोकता है; renderStart और styleAndLayoutStart प्री-रेंडर, स्टाइल/लेआउट और अन्य चरणों को अलग करने में मदद करते हैं। scripts मुख्य-थ्रेड URL, फ़ंक्शन और इन्वोकर प्रकार की पहचान कर सकता है, लेकिन क्रॉस-ओरिजिन iframes, वर्कर्स और एक्सटेंशन में अधूरा एट्रिब्यूशन हो सकता है।

5. सैंपलिंग और गोपनीयता नियंत्रण डिज़ाइन करें

डिफ़ॉल्ट रूप से उच्च INP, असामान्य लंबे फ्रेम या एक छोटे रैंडम सैंपल की रिपोर्ट करें; प्रत्येक अनाम सेशन को दर-सीमित (rate-limit) करें। स्क्रिप्ट डोमेन को अनुमति सूची (allowlist) में डालें या हैश करें, क्वेरी पैरामीटर, उपयोगकर्ता इनपुट और DOM टेक्स्ट हटा दें, और संवेदनशील पेजों पर विस्तृत एट्रिब्यूशन अक्षम करें। सर्वर पर रिटेंशन, एक्सेस, डिलीशन और एक वर्जन की गई सैंपलिंग नीति लागू करें।

6. एग्रीगेशन और फिक्स लूप को पूरा करें

एकल साइट औसत के बजाय इंटरैक्शन, रिलीज़, डिवाइस, नेटवर्क और स्क्रिप्ट स्रोत के आधार पर p75/p95 को एग्रीगेट करें। अलर्ट इनपुट, प्रोसेसिंग और प्रेजेंटेशन चरणों के साथ-साथ सामान्य एट्रिब्यूशन दिखाते हैं। यह सुनिश्चित करने के लिए कि समस्या किसी अन्य डिवाइस या इंटरैक्शन में स्थानांतरित नहीं हुई है, समान सैंपलिंग और कोहोर्ट्स का उपयोग करके पहले और बाद की तुलना करें।

एक मजबूत उत्तर का उदाहरण

“मैं पहले यह तय करने के लिए INP फेज़ ब्रेकडाउन का उपयोग करूँगा कि इनपुट, प्रोसेसिंग या प्रेजेंटेशन में से किसका प्रभाव अधिक है, फिर LoAF साक्ष्य जोड़ूँगा। क्लाइंट फीचर का पता लगाता है और long-animation-frame को ऑब्जर्व करता है, केवल उच्च-INP इंटरैक्शन को इंटरसेक्ट करने वाली एंट्रीज़ को duration, blockingDuration, रेंडरिंग टाइमिंग्स और उपलब्ध स्क्रिप्ट एट्रिब्यूशन के साथ बनाए रखता है। कोरिलेशन में रिलीज़, एक्सपेरिमेंट कोहोर्ट, डिवाइस और एक अनाम सेशन कुंजी का उपयोग होता है, उपयोगकर्ता इनपुट का नहीं। विस्तृत एट्रिब्यूशन का सैंपलिंग और रिडैक्शन रिटेंशन सीमा के साथ किया जाता है; असमर्थित ब्राउज़र अभी भी बुनियादी INP की रिपोर्ट करते हैं। सर्वर इंटरैक्शन, रिलीज़ और डिवाइस के आधार पर एग्रीगेट करता है, संभावित स्रोत कोड पर अलर्ट करता है, और कोहोर्ट-स्तरीय रिग्रेशन जांच के साथ फिक्स को मान्य करता है।”

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

• केवल एक INP संख्या की रिपोर्ट करना → कोई चरण या कोड निदान नहीं → INP चरणों को LoAF फ्रेम के साथ कोरिलेट करें।
• प्रत्येक लंबे फ्रेम को रॉ अपलोड करना → उच्च लागत और उजागर संदर्भ → सैंपल लें, रिडैक्ट करें, और उच्च INP को इंटरसेक्ट करने वाले फ्रेम रखें।
• 50 मिलीसेकंड को INP पास लाइन मानना → फ्रेम थ्रेशोल्ड को उत्पाद मीट्रिक के साथ भ्रमित किया जाता है → थ्रेशोल्ड और पर्सेंटाइल लक्ष्यों को अलग-अलग समझाएं।
• यह मान लेना कि प्रत्येक स्क्रिप्ट में एट्रिब्यूशन है → क्रॉस-ओरिजिन फ्रेम और वर्कर्स अधूरे हैं → अंतरालों को चिह्नित करें और रिलीज़ और डिवाइस कोहोर्ट्स के साथ विश्लेषण करें।
• केवल साइट औसत देखना → डिवाइस-विशिष्ट गंभीर समस्याएं गायब हो जाती हैं → इंटरैक्शन, डिवाइस, नेटवर्क और रिलीज़ के अनुसार खंडित करें।

फॉलो-अप और उत्तर

क्या LoAF Long Tasks API की जगह लेगा?

सीधे तौर पर नहीं। LoAF फ्रेम को मापता है और समृद्ध संदर्भ प्रदान करता है, जबकि Long Tasks मौजूदा मॉनिटरिंग और संगत ब्राउज़रों के लिए उपयोगी बना हुआ है। पुराने सिग्नल को अचानक हटाने के बजाय माइग्रेशन के दौरान दोनों की तुलना करें।

प्रत्येक स्क्रिप्ट URL को अपलोड क्यों नहीं किया जाता?

URL में पहचानकर्ता, क्वेरी पैरामीटर या आंतरिक पथ हो सकते हैं, और वे डेटा की मात्रा बढ़ाते हैं। पेज की संवेदनशीलता के अनुसार पैरामीटर हटाएं, डोमेन प्रतिबंधित करें, मानों को हैश करें, या केवल वर्जन किए गए स्रोत मैपिंग बनाए रखें।

आप लेआउट लागत को स्क्रिप्ट निष्पादन से कैसे अलग करते हैं?

renderStart, styleAndLayoutStart, duration और स्क्रिप्ट एंट्रीज़ की तुलना करें। यदि स्क्रिप्ट का समय कम है लेकिन स्टाइल/लेआउट अंतराल बड़ा है, तो DOM आकार, सिलेक्टर्स और सिंक्रोनस लेआउट का निरीक्षण करें; लैब ट्रेस के साथ पुष्टि करें।

बिना LoAF वाले ब्राउज़रों के बारे में क्या?

फ़ीचर का पता लगाएं और बुनियादी INP, Event Timing या Long Tasks पर वापस आएं, सर्वर-साइड ऑब्जर्वेशन वर्जन को टैग करें। उन उपयोगकर्ताओं को समग्र अनुभव मेट्रिक्स से बाहर न करें; खंडित रिपोर्टों में नैदानिक क्षमता के अंतर का खुलासा करें।