परफॉर्मेंस ऑब्जर्वर एपीआई: रनटाइम परफॉर्मेंस मेट्रिक्स और बॉटलनेक विश्लेषण

आज के प्रतिस्पर्धी डिजिटल परिदृश्य में, वेबसाइट और वेब एप्लिकेशन का प्रदर्शन उपयोगकर्ता जुड़ाव और व्यावसायिक सफलता के लिए महत्वपूर्ण है। धीमा लोडिंग समय और अनुत्तरदायी इंटरफेस निराश उपयोगकर्ताओं, छोड़े गए लेनदेन और अंततः, खोए हुए राजस्व का कारण बन सकते हैं। परफॉर्मेंस ऑब्जर्वर एपीआई एक शक्तिशाली उपकरण है जो डेवलपर्स को रनटाइम प्रदर्शन मेट्रिक्स की निगरानी और विश्लेषण करने, बाधाओं की पहचान करने और उपयोगकर्ता के स्थान या डिवाइस की परवाह किए बिना, एक सहज, तेज और अधिक मनोरंजक उपयोगकर्ता अनुभव के लिए अपने अनुप्रयोगों को अनुकूलित करने की अनुमति देता है।

परफॉर्मेंस ऑब्जर्वर एपीआई क्या है?

परफॉर्मेंस ऑब्जर्वर एपीआई एक जावास्क्रिप्ट एपीआई है जो वेब एप्लिकेशन में प्रदर्शन-संबंधी घटनाओं के घटित होने पर उनका निरीक्षण करने और उन पर प्रतिक्रिया करने के लिए एक तंत्र प्रदान करता है। पारंपरिक प्रदर्शन निगरानी तकनीकों के विपरीत, जो आवधिक नमूनाकरण या मैन्युअल इंस्ट्रूमेंटेशन पर निर्भर करती हैं, परफॉर्मेंस ऑब्जर्वर एपीआई वास्तविक समय में प्रदर्शन डेटा कैप्चर करने का एक अधिक कुशल और लचीला तरीका प्रदान करता है। यह डेवलपर्स को विशिष्ट प्रदर्शन एंट्री प्रकारों की सदस्यता लेने और नई एंट्री दर्ज होने पर सूचनाएं प्राप्त करने की अनुमति देता है।

यह "ऑब्जर्व-एंड-रिएक्ट" दृष्टिकोण सक्रिय प्रदर्शन निगरानी को सक्षम बनाता है, जिससे डेवलपर्स उपयोगकर्ता अनुभव को प्रभावित करने से पहले प्रदर्शन संबंधी समस्याओं की पहचान और समाधान कर सकते हैं। यह एपीआई आधुनिक ब्राउज़रों में मानकीकृत है, जो सुसंगत व्यवहार और क्रॉस-प्लेटफॉर्म संगतता सुनिश्चित करता है।

मुख्य अवधारणाएं और विशेषताएं

परफॉर्मेंस ऑब्जर्वर एपीआई का प्रभावी ढंग से उपयोग करने के लिए, इसकी मुख्य अवधारणाओं और विशेषताओं को समझना आवश्यक है:

• PerformanceEntry: एक एकल प्रदर्शन माप या घटना का प्रतिनिधित्व करता है। परफॉर्मेंस एंट्री में घटना के प्रकार, उसके शुरू और खत्म होने के समय और अन्य प्रासंगिक विशेषताओं के बारे में जानकारी होती है। उदाहरणों में resource, mark, measure, navigation, longtask, और event शामिल हैं।
• PerformanceObserver: एक ऑब्जेक्ट जो आपको विशिष्ट प्रदर्शन एंट्री प्रकारों की सदस्यता लेने और ब्राउज़र की प्रदर्शन टाइमलाइन में नई एंट्री जोड़े जाने पर सूचनाएं प्राप्त करने की अनुमति देता है।
• observe() method: विशिष्ट प्रदर्शन एंट्री प्रकारों को सुनने के लिए परफॉर्मेंस ऑब्जर्वर को कॉन्फ़िगर करने के लिए उपयोग किया जाता है। आप उन एंट्री प्रकारों को निर्दिष्ट कर सकते हैं जिन्हें आप ऑब्जर्व करना चाहते हैं, साथ ही ऐतिहासिक एंट्री प्राप्त करने के लिए एक buffered विकल्प भी।
• disconnect() method: परफॉर्मेंस ऑब्जर्वर को प्रदर्शन घटनाओं को सुनने से रोकने के लिए उपयोग किया जाता है।
• takeRecords() method: उन सभी परफॉर्मेंस एंट्री की एक ऐरे लौटाता है जिन्हें ऑब्जर्व किया गया है लेकिन अभी तक ऑब्जर्वर के कॉलबैक फ़ंक्शन द्वारा संसाधित नहीं किया गया है।
• Callback Function: एक फ़ंक्शन जो नई परफॉर्मेंस एंट्री ऑब्जर्व होने पर निष्पादित होता है। यह फ़ंक्शन एक PerformanceObserverEntryList ऑब्जेक्ट प्राप्त करता है जिसमें ऑब्जर्व की गई एंट्री होती हैं।

समर्थित परफॉर्मेंस एंट्री प्रकार

परफॉर्मेंस ऑब्जर्वर एपीआई विभिन्न प्रकार के प्रदर्शन एंट्री प्रकारों का समर्थन करता है, जिनमें से प्रत्येक वेब एप्लिकेशन प्रदर्शन के विभिन्न पहलुओं में विशिष्ट अंतर्दृष्टि प्रदान करता है। कुछ सबसे अधिक उपयोग किए जाने वाले एंट्री प्रकारों में शामिल हैं:

• resource: व्यक्तिगत संसाधनों, जैसे चित्र, स्क्रिप्ट, स्टाइलशीट और फ़ॉन्ट के लोडिंग के बारे में जानकारी प्रदान करता है। इस एंट्री प्रकार में संसाधन यूआरएल, शुरू और खत्म होने का समय, फेच अवधि और ट्रांसफर आकार जैसे विवरण शामिल हैं।
• mark: आपको विशिष्ट कोड अनुभागों की अवधि को मापने के लिए अपने कोड के भीतर कस्टम टाइमस्टैम्प बनाने की अनुमति देता है। आप डेटा प्रोसेसिंग या यूआई रेंडरिंग जैसे महत्वपूर्ण परिचालनों की शुरुआत और अंत को ट्रैक करने के लिए मार्क्स का उपयोग कर सकते हैं।
• measure: दो मार्क्स के बीच की अवधि की गणना करने के लिए उपयोग किया जाता है। यह एंट्री प्रकार कस्टम कोड अनुभागों के प्रदर्शन को मापने का एक सुविधाजनक तरीका प्रदान करता है।
• navigation: एक पृष्ठ के नेविगेशन समय के बारे में जानकारी प्रदान करता है, जिसमें डीएनएस लुकअप समय, टीसीपी कनेक्शन समय, अनुरोध और प्रतिक्रिया समय और डोम प्रसंस्करण समय शामिल है।
• longtask: उन कार्यों की पहचान करता है जो मुख्य थ्रेड को एक विस्तारित अवधि (आमतौर पर 50 मिलीसेकंड से अधिक) के लिए ब्लॉक करते हैं। लंबे कार्य यूआई अनुत्तरदायीता और जंक का कारण बन सकते हैं।
• event: विशिष्ट ब्राउज़र घटनाओं, जैसे click, keydown, और scroll के लिए समय की जानकारी रिकॉर्ड करता है।
• layout-shift: पृष्ठ पर अप्रत्याशित लेआउट शिफ्ट को ट्रैक करता है। ये बदलाव उपयोगकर्ताओं के लिए परेशान करने वाले हो सकते हैं और उपयोगकर्ता अनुभव को नकारात्मक रूप से प्रभावित कर सकते हैं।
• largest-contentful-paint: पृष्ठ पर सबसे बड़े सामग्री तत्व को दिखाई देने में लगने वाले समय को मापता है।
• first-input-delay: पहले उपयोगकर्ता इंटरैक्शन (जैसे, एक क्लिक या टैप) पर ब्राउज़र को प्रतिक्रिया देने में लगने वाले समय को मापता है।
• element: पृष्ठ पर विशिष्ट तत्वों के प्रतिपादन के लिए समय की जानकारी की रिपोर्ट करता है।

व्यावहारिक उदाहरण और उपयोग के मामले

वेब एप्लिकेशन के प्रदर्शन को बेहतर बनाने के लिए परफॉर्मेंस ऑब्जर्वर एपीआई का उपयोग कई तरह के परिदृश्यों में किया जा सकता है। यहाँ कुछ व्यावहारिक उदाहरण दिए गए हैं:

1. रिसोर्स लोडिंग समय की निगरानी

resource एंट्री प्रकार आपको व्यक्तिगत संसाधनों, जैसे चित्र, स्क्रिप्ट और स्टाइलशीट के लोडिंग समय को ट्रैक करने की अनुमति देता है। इस जानकारी का उपयोग उन धीमे-लोडिंग संसाधनों की पहचान करने के लिए किया जा सकता है जो पृष्ठ लोड समय को प्रभावित कर रहे हैं। उदाहरण के लिए, आप संसाधन लोडिंग समय की निगरानी के लिए निम्न कोड का उपयोग कर सकते हैं:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

यह कोड एक परफॉर्मेंस ऑब्जर्वर बनाता है जो resource एंट्री के लिए सुनता है और संसाधन यूआरएल और अवधि को कंसोल पर लॉग करता है। इस डेटा का विश्लेषण करके, आप धीमे-लोडिंग संसाधनों की पहचान कर सकते हैं और उन्हें छवियों को संपीड़ित करके, एक कंटेंट डिलीवरी नेटवर्क (सीडीएन) का उपयोग करके, या अपने सर्वर कॉन्फ़िगरेशन को अनुकूलित करके अनुकूलित कर सकते हैं।

वैश्विक परिप्रेक्ष्य: संसाधन लोडिंग समय की निगरानी करते समय, अपने उपयोगकर्ताओं के भौगोलिक स्थान पर विचार करें। धीमे इंटरनेट कनेक्शन वाले क्षेत्रों में उपयोगकर्ताओं को काफी लंबा लोडिंग समय अनुभव हो सकता है। भौगोलिक रूप से वितरित सर्वरों के साथ एक सीडीएन का उपयोग करने से इस समस्या को कम करने में मदद मिल सकती है।

2. कस्टम कोड निष्पादन समय मापना

mark और measure एंट्री प्रकार आपको कस्टम कोड अनुभागों के निष्पादन समय को मापने की अनुमति देते हैं। यह आपके एप्लिकेशन तर्क में प्रदर्शन बाधाओं की पहचान करने के लिए उपयोगी है। उदाहरण के लिए, आप किसी विशिष्ट फ़ंक्शन की अवधि को मापने के लिए निम्न कोड का उपयोग कर सकते हैं:

            performance.mark("start");

// Code to be measured
for (let i = 0; i < 1000000; i++) {
 // Some computationally intensive operation
}

performance.mark("end");
performance.measure("My Function", "start", "end");

const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Measurement: ${entry.name}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["measure"] });

            

              
                Copy
              
            
          

यह कोड उस कोड अनुभाग के पहले और बाद में दो निशान, start और end बनाता है, जिसे आप मापना चाहते हैं। फिर यह दो निशानों के बीच की अवधि की गणना करने के लिए performance.measure() विधि का उपयोग करता है। परफॉर्मेंस ऑब्जर्वर measure एंट्री के लिए सुनता है और माप नाम और अवधि को कंसोल पर लॉग करता है। इस डेटा का विश्लेषण करके, आप धीमे-प्रदर्शन वाले कोड अनुभागों की पहचान कर सकते हैं और उन्हें कैशिंग, मेमोइज़ेशन या एल्गोरिथम अनुकूलन जैसी तकनीकों का उपयोग करके अनुकूलित कर सकते हैं।

कार्रवाई योग्य अंतर्दृष्टि: अपने एप्लिकेशन के महत्वपूर्ण पथों की पहचान करें - कोड के अनुक्रम जो सबसे अधिक बार निष्पादित होते हैं और प्रदर्शन पर सबसे अधिक प्रभाव डालते हैं। सबसे महत्वपूर्ण प्रदर्शन लाभ प्राप्त करने के लिए इन महत्वपूर्ण पथों पर अपने अनुकूलन प्रयासों को केंद्रित करें।

3. लॉन्ग टास्क की पहचान करना

longtask एंट्री प्रकार उन कार्यों की पहचान करता है जो मुख्य थ्रेड को एक विस्तारित अवधि के लिए ब्लॉक करते हैं। लंबे कार्य यूआई अनुत्तरदायीता और जंक का कारण बन सकते हैं, जिससे एक खराब उपयोगकर्ता अनुभव होता है। आप लंबे कार्यों की निगरानी के लिए निम्न कोड का उपयोग कर सकते हैं:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Long Task: ${entry.name}, Duration: ${entry.duration}ms`);
 console.warn(`Long Task Attribution: ${JSON.stringify(entry.attribution)}`);
 });
});

observer.observe({ entryTypes: ["longtask"] });

            

              
                Copy
              
            
          

यह कोड एक परफॉर्मेंस ऑब्जर्वर बनाता है जो longtask एंट्री के लिए सुनता है और कार्य का नाम और अवधि कंसोल पर लॉग करता है। इस डेटा का विश्लेषण करके, आप लंबे समय तक चलने वाले कार्यों की पहचान कर सकते हैं और उन्हें छोटे टुकड़ों में तोड़कर, अतुल्यकालिक संचालन का उपयोग करके, या उन्हें एक वेब वर्कर को ऑफलोड करके अनुकूलित कर सकते हैं।

वैश्विक लेखन दिशानिर्देश: तकनीकी अवधारणाओं को समझाते समय, स्पष्ट और संक्षिप्त भाषा का उपयोग करें जो विभिन्न स्तरों की तकनीकी विशेषज्ञता वाले पाठकों के लिए सुलभ हो। शब्दजाल से बचें और अपरिचित शब्दों के लिए संदर्भ प्रदान करें।

4. नेविगेशन टाइमिंग का विश्लेषण

navigation एंट्री प्रकार एक पृष्ठ के नेविगेशन समय के बारे में विस्तृत जानकारी प्रदान करता है, जिसमें डीएनएस लुकअप समय, टीसीपी कनेक्शन समय, अनुरोध और प्रतिक्रिया समय और डोम प्रसंस्करण समय शामिल है। इस डेटा का उपयोग पृष्ठ लोडिंग प्रक्रिया में बाधाओं की पहचान करने के लिए किया जा सकता है। उदाहरण के लिए, आप नेविगेशन समय का विश्लेषण करने के लिए निम्न कोड का उपयोग कर सकते हैं:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Navigation: ${entry.name}`);
 console.log(`DNS Lookup Time: ${entry.domainLookupEnd - entry.domainLookupStart}ms`);
 console.log(`TCP Connection Time: ${entry.connectEnd - entry.connectStart}ms`);
 console.log(`Request Time: ${entry.responseStart - entry.requestStart}ms`);
 console.log(`Response Time: ${entry.responseEnd - entry.responseStart}ms`);
 console.log(`DOM Processing Time: ${entry.domComplete - entry.domInteractive}ms`);
 });
});

observer.observe({ entryTypes: ["navigation"] });

            

              
                Copy
              
            
          

यह कोड एक परफॉर्मेंस ऑब्जर्वर बनाता है जो navigation एंट्री के लिए सुनता है और विभिन्न समय मेट्रिक्स को कंसोल पर लॉग करता है। इस डेटा का विश्लेषण करके, आप धीमी डीएनएस लुकअप, धीमे टीसीपी कनेक्शन, धीमी अनुरोध प्रसंस्करण, धीमी प्रतिक्रिया प्रसंस्करण, या धीमी डोम प्रसंस्करण जैसी बाधाओं की पहचान कर सकते हैं। फिर आप इन बाधाओं को दूर करने के लिए उचित कार्रवाई कर सकते हैं, जैसे कि अपने डीएनएस कॉन्फ़िगरेशन को अनुकूलित करना, अपने सर्वर के प्रदर्शन में सुधार करना, या अपने एचटीएमएल और जावास्क्रिप्ट कोड को अनुकूलित करना।

एसईओ ऑप्टिमाइज़ेशन: सामग्री में स्वाभाविक रूप से प्रासंगिक कीवर्ड का उपयोग करें। इस अनुभाग में, "नेविगेशन टाइमिंग," "डीएनएस लुकअप समय," "टीसीपी कनेक्शन समय," और "पेज लोडिंग प्रक्रिया" जैसे कीवर्ड को सहजता से शामिल किया गया है।

5. लेआउट शिफ्ट की निगरानी

layout-shift एंट्री प्रकार पृष्ठ पर अप्रत्याशित लेआउट शिफ्ट को ट्रैक करता है। ये बदलाव उपयोगकर्ताओं के लिए परेशान करने वाले हो सकते हैं और उपयोगकर्ता अनुभव को नकारात्मक रूप से प्रभावित कर सकते हैं। वे अक्सर बिना आयामों वाली छवियों, देर से लोड होने वाले विज्ञापनों, या गतिशील रूप से इंजेक्ट की गई सामग्री के कारण होते हैं। आप लेआउट शिफ्ट की निगरानी के लिए निम्न कोड का उपयोग कर सकते हैं:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Layout Shift: ${entry.name}, Value: ${entry.value}`);
 console.warn(`Layout Shift Had Recent Input: ${entry.hadRecentInput}`);
 console.warn(`Layout Shift Sources: ${JSON.stringify(entry.sources)}`);
 });
});

observer.observe({ entryTypes: ["layout-shift"] });

            

              
                Copy
              
            
          

यह कोड एक परफॉर्मेंस ऑब्जर्वर बनाता है जो layout-shift एंट्री के लिए सुनता है और शिफ्ट मान (शिफ्ट की भयावहता का प्रतिनिधित्व करने वाला एक स्कोर) को कंसोल पर लॉग करता है। एक उच्च मान एक अधिक महत्वपूर्ण बदलाव को इंगित करता है। hadRecentInput संपत्ति इंगित करती है कि क्या शिफ्ट उपयोगकर्ता इनपुट के 500ms के भीतर हुई थी। उपयोगकर्ता इनपुट द्वारा ट्रिगर किए गए शिफ्ट को आम तौर पर कम समस्याग्रस्त माना जाता है। sources संपत्ति उन तत्वों के बारे में विवरण प्रदान करती है जिनके कारण शिफ्ट हुई। इस डेटा का विश्लेषण करके, आप छवियों के लिए आयाम निर्दिष्ट करके, विज्ञापनों के लिए जगह आरक्षित करके, और गतिशील रूप से सामग्री इंजेक्ट करने से बचकर लेआउट शिफ्ट समस्याओं की पहचान और समाधान कर सकते हैं जो रिफ्लो का कारण बन सकती हैं।

कार्रवाई योग्य अंतर्दृष्टि: लेआउट शिफ्ट समस्याओं की पहचान करने और उन्हें ठीक करने के लिए सिफारिशें प्राप्त करने के लिए Google के लाइटहाउस जैसे टूल का उपयोग करें। उन शिफ्ट को ठीक करने को प्राथमिकता दें जो उपयोगकर्ता इनपुट के बिना होती हैं।

6. लार्जेस्ट कंटेंटफुल पेंट (LCP) मापना

largest-contentful-paint एंट्री प्रकार पृष्ठ पर सबसे बड़े सामग्री तत्व को दिखाई देने में लगने वाले समय को मापता है। LCP एक कोर वेब वाइटल है जो पृष्ठ की कथित लोडिंग गति को दर्शाता है। एक अच्छा LCP स्कोर 2.5 सेकंड या उससे कम है। आप LCP को मापने के लिए निम्न कोड का उपयोग कर सकते हैं:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Largest Contentful Paint: ${entry.startTime}ms`);
 console.log(`LCP Element: ${entry.element}`);
 console.log(`LCP URL: ${entry.url}`);
 });
});

observer.observe({ entryTypes: ["largest-contentful-paint"] });

            

              
                Copy
              
            
          

यह कोड एक परफॉर्मेंस ऑब्जर्वर बनाता है जो largest-contentful-paint एंट्री के लिए सुनता है और प्रारंभ समय, तत्व और यूआरएल को कंसोल पर लॉग करता है। इस डेटा का विश्लेषण करके, आप सबसे बड़े सामग्री तत्व की पहचान कर सकते हैं और छवि के आकार को अनुकूलित करके, एक सीडीएन का उपयोग करके, या संसाधन को प्रीलोड करके उसके लोडिंग समय को अनुकूलित कर सकते हैं।

वैश्विक परिप्रेक्ष्य: विचार करें कि अलग-अलग उपयोगकर्ताओं के स्क्रीन आकार और रिज़ॉल्यूशन के आधार पर अलग-अलग LCP तत्व होंगे। विभिन्न उपकरणों और स्क्रीन आकारों में एक अच्छा LCP स्कोर सुनिश्चित करने के लिए अपने एप्लिकेशन को डिज़ाइन करें।

7. फर्स्ट इनपुट डिले (FID) मापना

first-input-delay एंट्री प्रकार पहले उपयोगकर्ता इंटरैक्शन (जैसे, एक क्लिक या टैप) पर ब्राउज़र को प्रतिक्रिया देने में लगने वाले समय को मापता है। FID एक और कोर वेब वाइटल है जो पृष्ठ की अन्तरक्रियाशीलता को दर्शाता है। एक अच्छा FID स्कोर 100 मिलीसेकंड या उससे कम है। आप FID को मापने के लिए निम्न कोड का उपयोग कर सकते हैं:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`First Input Delay: ${entry.processingStart - entry.startTime}ms`);
 console.log(`Event Type: ${entry.name}`);
 console.log(`Target Element: ${entry.target}`);
 });
});

observer.observe({ type: "first-input", buffered: true });

            

              
                Copy
              
            
          

यह कोड एक परफॉर्मेंस ऑब्जर्वर बनाता है जो first-input एंट्री के लिए सुनता है और देरी, घटना प्रकार और लक्ष्य तत्व को कंसोल पर लॉग करता है। इस डेटा का विश्लेषण करके, आप लंबे इनपुट देरी के कारणों की पहचान कर सकते हैं और मुख्य थ्रेड पर बिताए गए समय की मात्रा को कम करने के लिए अपने जावास्क्रिप्ट कोड को अनुकूलित कर सकते हैं।

कार्रवाई योग्य अंतर्दृष्टि: लंबे समय तक चलने वाले कार्यों को छोटे टुकड़ों में तोड़ें, कार्यों को एक पृष्ठभूमि थ्रेड पर ऑफलोड करने के लिए वेब वर्कर्स का उपयोग करें, और उपयोगकर्ता इंटरैक्शन के लिए प्रसंस्करण समय को कम करने के लिए अपने इवेंट श्रोताओं को अनुकूलित करें।

उन्नत तकनीकें और विचार

ऊपर वर्णित बुनियादी उपयोग के मामलों के अलावा, वेब एप्लिकेशन के प्रदर्शन में गहरी अंतर्दृष्टि प्राप्त करने के लिए परफॉर्मेंस ऑब्जर्वर एपीआई का उपयोग अधिक उन्नत परिदृश्यों में किया जा सकता है। यहाँ कुछ उन्नत तकनीकें और विचार दिए गए हैं:

1. बफरिंग का उपयोग

observe() विधि में buffered विकल्प आपको ऐतिहासिक प्रदर्शन एंट्री को पुनः प्राप्त करने की अनुमति देता है जो परफॉर्मेंस ऑब्जर्वर बनाने से पहले दर्ज की गई थीं। यह प्रारंभिक पृष्ठ लोड के दौरान या आपके निगरानी कोड को लोड करने से पहले होने वाले प्रदर्शन डेटा को कैप्चर करने के लिए उपयोगी है। उदाहरण के लिए:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Entry: ${entry.name}, Type: ${entry.entryType}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["navigation", "resource"], buffered: true });

            

              
                Copy
              
            
          

यह कोड एक परफॉर्मेंस ऑब्जर्वर बनाता है जो navigation और resource एंट्री के लिए सुनता है और ऑब्जर्वर बनाने से पहले दर्ज की गई सभी ऐतिहासिक एंट्री को पुनः प्राप्त करता है।

2. परफॉर्मेंस एंट्री को फ़िल्टर करना

आप अपने विश्लेषण के लिए सबसे प्रासंगिक डेटा पर ध्यान केंद्रित करने के लिए विशिष्ट मानदंडों के आधार पर प्रदर्शन एंट्री को फ़िल्टर कर सकते हैं। उदाहरण के लिए, आप संसाधन एंट्री को उनके यूआरएल या सामग्री प्रकार के आधार पर फ़िल्टर कर सकते हैं:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 if (entry.entryType === "resource" && entry.name.endsWith(".jpg")) {
 console.log(`Image Resource: ${entry.name}, Duration: ${entry.duration}ms`);
 }
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

यह कोड एक परफॉर्मेंस ऑब्जर्वर बनाता है जो resource एंट्री के लिए सुनता है और उन्हें केवल .jpg एक्सटेंशन वाले छवि संसाधनों के लिए एंट्री शामिल करने के लिए फ़िल्टर करता है।

3. वेब वर्कर्स का उपयोग

मुख्य थ्रेड के प्रदर्शन को प्रभावित करने से बचने के लिए, आप प्रदर्शन निगरानी और विश्लेषण को एक वेब वर्कर को ऑफलोड कर सकते हैं। यह आपको यूआई को ब्लॉक किए बिना पृष्ठभूमि में प्रदर्शन डेटा एकत्र और संसाधित करने की अनुमति देता है। उदाहरण के लिए, आप एक वेब वर्कर बना सकते हैं जो प्रदर्शन घटनाओं को सुनता है और विश्लेषण के लिए डेटा को मुख्य थ्रेड पर भेजता है।

वैश्विक लेखन दिशानिर्देश: ऐसे उदाहरणों का उपयोग करें जो वैश्विक दर्शकों के लिए प्रासंगिक हों। ऐसे उदाहरणों से बचें जो किसी विशेष देश या संस्कृति के लिए विशिष्ट हों।

4. एनालिटिक्स प्लेटफॉर्म के साथ एकीकरण

परफॉर्मेंस ऑब्जर्वर एपीआई को एक केंद्रीकृत स्थान पर प्रदर्शन डेटा एकत्र और विश्लेषण करने के लिए एनालिटिक्स प्लेटफॉर्म के साथ एकीकृत किया जा सकता है। यह आपको समय के साथ प्रदर्शन प्रवृत्तियों को ट्रैक करने, प्रदर्शन प्रतिगमन की पहचान करने और प्रदर्शन मेट्रिक्स को अन्य उपयोगकर्ता व्यवहार डेटा के साथ सहसंबंधित करने की अनुमति देता है। आप अपने एनालिटिक्स प्लेटफॉर्म पर प्रदर्शन एंट्री को उसके एपीआई का उपयोग करके या उन्हें सर्वर-साइड एंडपॉइंट पर लॉग करके भेज सकते हैं।

5. पुराने ब्राउज़रों के लिए पॉलीफ़िल का उपयोग

हालांकि परफॉर्मेंस ऑब्जर्वर एपीआई अधिकांश आधुनिक ब्राउज़रों द्वारा समर्थित है, यह पुराने ब्राउज़रों में उपलब्ध नहीं हो सकता है। पुराने ब्राउज़रों का समर्थन करने के लिए, आप एक पॉलीफ़िल का उपयोग कर सकते हैं जो एपीआई का एक फ़ॉलबैक कार्यान्वयन प्रदान करता है। ऑनलाइन कई पॉलीफ़िल उपलब्ध हैं जिनका आप अपने एप्लिकेशन में उपयोग कर सकते हैं।

परफॉर्मेंस ऑब्जर्वर एपीआई का उपयोग करने के लिए सर्वोत्तम अभ्यास

परफॉर्मेंस ऑब्जर्वर एपीआई का प्रभावी ढंग से उपयोग करने और सामान्य नुकसान से बचने के लिए, इन सर्वोत्तम प्रथाओं का पालन करें:

• केवल उन मेट्रिक्स की निगरानी करें जो आपके लक्ष्यों के लिए प्रासंगिक हैं। अत्यधिक डेटा एकत्र करने से बचें जो प्रदर्शन को प्रभावित कर सकता है।
• सबसे महत्वपूर्ण डेटा पर ध्यान केंद्रित करने के लिए फ़िल्टरिंग का उपयोग करें। आपको संसाधित करने के लिए आवश्यक डेटा की मात्रा को कम करने के लिए विशिष्ट मानदंडों के आधार पर प्रदर्शन एंट्री को फ़िल्टर करें।
• प्रदर्शन निगरानी को एक वेब वर्कर को ऑफलोड करें। यह प्रदर्शन निगरानी को मुख्य थ्रेड के प्रदर्शन को प्रभावित करने से रोकेगा।
• समय के साथ प्रदर्शन प्रवृत्तियों को ट्रैक करने के लिए एनालिटिक्स प्लेटफॉर्म के साथ एकीकृत करें। यह आपको प्रदर्शन प्रतिगमन की पहचान करने और प्रदर्शन मेट्रिक्स को अन्य उपयोगकर्ता व्यवहार डेटा के साथ सहसंबंधित करने की अनुमति देगा।
• पुराने ब्राउज़रों का समर्थन करने के लिए पॉलीफ़िल का उपयोग करें। यह सुनिश्चित करेगा कि आपका प्रदर्शन निगरानी कोड कई प्रकार के ब्राउज़रों में काम करता है।
• अपने प्रदर्शन निगरानी कोड का अच्छी तरह से परीक्षण करें। सुनिश्चित करें कि आपका कोड अपने आप में कोई प्रदर्शन समस्या पैदा नहीं कर रहा है।
• डेटा गोपनीयता नियमों के प्रति सचेत रहें। सुनिश्चित करें कि आप उपयोगकर्ता की सहमति के बिना कोई व्यक्तिगत रूप से पहचान योग्य जानकारी (PII) एकत्र नहीं कर रहे हैं।

एसईओ ऑप्टिमाइज़ेशन: आकर्षक मेटा विवरण बनाएं। ब्लॉग पोस्ट की सामग्री को सारांशित करने वाला एक संक्षिप्त विवरण JSON मेटाडेटा में प्रदान किया गया है।

निष्कर्ष

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

उपयोगकर्ता अनुभव को सबसे ऊपर प्राथमिकता देना याद रखें। प्रदर्शन अनुकूलन हमेशा आपके उपयोगकर्ताओं के लिए एक सहज और सुखद अनुभव प्रदान करने के लक्ष्य से प्रेरित होना चाहिए। परफॉर्मेंस ऑब्जर्वर एपीआई का प्रभावी ढंग से उपयोग करके, आप अपने एप्लिकेशन के प्रदर्शन की गहरी समझ प्राप्त कर सकते हैं और उपयोगकर्ता अनुभव को बेहतर बनाने के लिए सूचित निर्णय ले सकते हैं।

प्रदर्शन के वैश्विक प्रभावों पर ध्यान से विचार करके, डेवलपर्स वेब एप्लिकेशन बना सकते हैं जो दुनिया भर के उपयोगकर्ताओं के लिए तेज, उत्तरदायी और सुलभ हों। इसके लिए एक समग्र दृष्टिकोण की आवश्यकता है जो नेटवर्क विलंबता, डिवाइस क्षमताओं और सांस्कृतिक प्राथमिकताओं जैसे कारकों को ध्यान में रखता है।